show and hide filter option on button click

[Raj]

Hi,
 Here is my req.

When radgrid loads ona page it should not display filter option. When cilck the link button on commanditemtemplate it should display the filter option and when i click hide button it should hide the filter option. Can anyone help me how to do this?

Thanks
Babu

[Dimo]

Hello Babu,

Here is a demo:

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx

Note that the filter item is initially displayed. However, you can hide it with a client script in the RadGrid GridCreated client event.

Greetings,
Dimo
the Telerik team

[Raj]

cant we hide at first time page load?

[Princy]

Hello Raj,

You can hide the filter item initially by adding the following code in GridCreated client event.

ASPX:

<ClientSettings>
   <ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>

Java Script:

<script type="text/javascript">
     function GridCreated(sender, args) {
         sender.get_masterTableView().hideFilterItem();
    }
</script>

Thanks,
Princy.

[Raj]

Thanks Princy,

That works great. But I am getting JS error while trying to show filter on click like "Object expected". Here is my code. Can you help me what causing the error.

            function ShowFilter() {
                $find('<%=gvPjtMnt.ClientID %>').get_masterTableView().showFilterItem();
//                sender.get_masterTableView().showFilterItem();
//                document.getElementById('btnhidefilter').style.display = 'block';
//                document.getElementById('btnshowfilter').style.display = 'none';
            }
            function HideFilter() {
//                document.getElementById('btnhidefilter').style.display = 'none';
//                document.getElementById('btnshowfilter').style.display = 'block';
                $find('<%=gvPjtMnt.ClientID %>').get_masterTableView().hideFilterItem();
//                sender.get_masterTableView().hideFilterItem();
            }
            function GridCreated(sender, args) {
                sender.get_masterTableView().hideFilterItem();
            }

<telerik:RadGrid ID="gvPjtMnt" runat="server" Height="600px" AutoGenerateColumns="false"
            BorderWidth="1px" BorderStyle="None" BackColor="White" BorderColor="White" CellSpacing="1"
            AllowPaging="True" Width="99.9%" PageSize="20" AllowSorting="True" AllowFilteringByColumn="true"
            OnNeedDataSource="gvPjtMnt_OnNeedDataSource" OnItemCommand="gvPjtMnt_ItemCommand"
            OnItemCreated="gvPjtMnt_ItemCreated">
            <HeaderStyle Height="20px" BackColor="#004000" Font-Size="8pt" Font-Bold="True" ForeColor="White"
                HorizontalAlign="Center" BorderColor="White" BorderWidth="1px" />
            <AlternatingItemStyle Font-Size="8pt" BackColor="#F5F5E9" HorizontalAlign="Center"
                BorderWidth="1px" BorderColor="White" />
            <ItemStyle HorizontalAlign="Center" />
            <ExportSettings ExportOnlyData="true" IgnorePaging="true" />
            <MasterTableView GridLines="None" CommandItemDisplay="Top" DataKeyNames="ProjectId"
                HorizontalAlign="Center" AllowFilteringByColumn="true">
                <CommandItemTemplate>
                    <table style="width: 100%">
                        <tr>
                            <td align="left" style="width: 65%">
                                <%-- <asp:LinkButton ID="btnshowfilter" OnClientClick="showfilter();" ForeColor="Blue"
                                                                    Font-Underline="true" runat="server" Text="Show Filter" />
                                                                <asp:LinkButton ID="btnhidefilter" OnClientClick="hidefilter();" ForeColor="Blue"
                                                                    Font-Underline="true" runat="server" Text="Hide Filter" />--%>
                                <div>
                                    Show filtering item
                                    <input id="showrd" type="radio" runat="server" name="showHideGroup" onclick="showFilterItem()" /><label
                                        for="showrd">Yes</label>
                                    <input id="hiderd" type="radio" runat="server" name="showHideGroup" checked="true"
                                        onclick="hideFilterItem()" /><label for="hiderd">No</label>
                                </div>
                            </td>
                            <td align="right" style="width: 15%">
                                <asp:ImageButton ID="ExportToWordButton" runat="server" ImageUrl="~/images/ExportToWord.gif"
                                    ToolTip="Export to Word" OnClick="ExportWord_Click" />

                                <asp:ImageButton ID="ExportToExcelButton" runat="server" ImageUrl="~/images/ExportToExcel.gif"
                                    ToolTip="Export to Excel" OnClick="ExportExcel_Click" />
                            </td>
                        </tr>
                    </table>
                </CommandItemTemplate>
                <Columns>
                    <telerik:GridBoundColumn DataField="ProjectId" UniqueName="ProjectId" Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="LOB" DataField="LOB" UniqueName="LOB">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Division Name" DataField="Division" UniqueName="Division">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Region Name" DataField="MarketName" UniqueName="MarketName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Project Name" DataField="ProjectName" UniqueName="ProjectName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Project Manager Name" DataField="ProjectMgrName"
                        UniqueName="ProjectMgrName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Number Of Sites Received" DataField="NumSitesReceived"
                        UniqueName="NumSitesReceived">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Accept Service Order Date" DataField="AcceptServiceOrderTaskCompleteDate"
                        UniqueName="AcceptServiceOrderTaskCompleteDate" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="PTD" DataField="PTD" UniqueName="PTD" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Health Reason" DataField="HealthReason" UniqueName="HealthReason">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Project Health" DataField="ProjectHealth" UniqueName="ProjectHealth">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Customer Signed Date" DataField="CustomerSignedDate"
                        UniqueName="CustomerSignedDate" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="OA Complete Date" DataField="OACompleteDate"
                        UniqueName="OACompleteDate" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Customer Requested Due Date" DataField="CustomerRequestedDueDate"
                        UniqueName="CustomerRequestedDueDate" DataFormatString="{0:MM/dd/yyyy}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn HeaderText="Last Note Added" DataField="LastNoteAdded" UniqueName="LastNoteAdded">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn UniqueName="EditRows" HeaderStyle-Width="3%" ItemStyle-Width="3%"
                        AllowFiltering="false">
                        <ItemTemplate>
                            <asp:ImageButton runat="server" ID="EditPMTsk" CommandName="EditRow" ImageUrl="Images/edit-icon.png"
                                ImageAlign="Middle" ToolTip="Edit Task" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                <ItemStyle ForeColor="#3C5F22" Font-Size="8pt" BackColor="White" BorderWidth="0px"
                    BorderColor="White" />
                <PagerStyle Mode="NextPrevAndNumeric" />
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="true">
                <ClientEvents OnGridCreated="GridCreated" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <Resizing AllowColumnResize="true" />
            </ClientSettings>
        </telerik:RadGrid>

[Dimo]

Hello Raj,

Do you see anything wrong here?

<%--<asp:LinkButton ID="btnshowfilter" OnClientClick="showfilter();" />
<asp:LinkButton ID="btnhidefilter" OnClientClick="hidefilter();" />--%>

<input id="showrd" onclick="showFilterItem()" />
<input id="hiderd"  checked="true" onclick="hideFilterItem()" />


function ShowFilter() {
}

function HideFilter() {
}



Dimo
the Telerik team

[Raj]

Hi Dimo,

Thanks. I got it. Thanks for your help.