How to Show/Hide Button inside Gridview(Telerik Grid) in javascript or jquery??
hi guyss...How to Show/Hide Button insider Gridview in javascript or jquery??
actually i have filter in my Gridview but i want to show/hide filter property.actually it was working fine on checkbox but now new requirment is to use image button and to remove checkbox.now i have used two image buttons.now i want to make one button visible false when i click the other one.means on clicking btnShow the other button btnHide Should be visible true and btnShow should be visible false and the same case for other one below is my code thnx in advance
<telerik:RadGrid ID="RadGrid1" CssClass="gridsetup" AllowFilteringByColumn="true" runat="server" GridLines="None" PageSize="6"
OnDataBound="RadGrid1_DataBound" Height="195px" OnNeedDataSource="RadGrid1_NeedDataSource"
AutoGenerateColumns="false" Skin="Office2007" EnableEmbeddedSkins="True" AllowSorting="true"
Width="100%">
<GroupingSettings CaseSensitive="false" />
<HeaderContextMenu EnableEmbeddedSkins="True">
</HeaderContextMenu>
<MasterTableView TableLayout="Fixed" ClientDataKeyNames="ACG_ID" DataKeyNames="ACG_ID">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
<HeaderStyle Width="100px" HorizontalAlign="Center" />
<HeaderTemplate>
<asp:ImageButton ImageUrl="~/Images/grid-accept.png" ID="btnHide" runat="server" OnClientClick="Hide(this);" ToolTip="Hide" />
<asp:ImageButton ImageUrl="~/Images/grid-accept.png" ID="btnShow" runat="server" OnClientClick="Show(this);" ToolTip="Show" />
<%--<asp:CheckBox ID="chk" runat="server" Checked="true" Text=" Filter" onclick="ShowHideFilter(this);" />--%>
</HeaderTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="ACG_ID" SortExpression="ACG_ID" HeaderText="ID"
DataField="ACG_ID" Display="false">
<HeaderStyle></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="ACG_CODE" SortExpression="ACG_CODE" HeaderText="Code"
DataField="ACG_CODE">
<HeaderStyle Width="15%"></HeaderStyle>
<ItemStyle Width="15%" />
</telerik:GridBoundColumn>
<%--////////// Code Generation ///////--%>
<telerik:GridBoundColumn UniqueName="ACTUALCODE" SortExpression="ACTUALCODE" HeaderText="ACTUALCODE"
DataField="ACTUALCODE" Display="false">
<HeaderStyle></HeaderStyle>
</telerik:GridBoundColumn>
<%--////////// End Code Generation ///////--%>
</Columns>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="true" />
<ClientEvents OnRowSelected="rowSelected" />
<Scrolling AllowScroll="true" UseStaticHeaders="true"/>
</ClientSettings>
<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>
here is my javascript code
function Show(spanChk) {
document.getElementById('ctl00_ContentPlaceHolder1_btnShow').style.display = "none";
document.getElementById('ctl00_ContentPlaceHolder1_btnHide').style.display = "";
$find('<%=RadGrid1.ClientID %>').get_masterTableView().showFilterItem();
}
function Hide(spanChk) {
document.getElementById('ctl00_ContentPlaceHolder1_btnHide').style.display = "none";
document.getElementById('ctl00_ContentPlaceHolder1_btnShow').style.display = "";
$find('<%=RadGrid1.ClientID %>').get_masterTableView().hideFilterItem();
}