This is a migrated thread and some comments may be shown as answers.

show and hide filter option on button click

6 Answers 615 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raj
Top achievements
Rank 1
Raj asked on 14 Sep 2010, 04:13 PM
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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Sep 2010, 04:15 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Raj
Top achievements
Rank 1
answered on 14 Sep 2010, 04:33 PM
cant we hide at first time page load?
0
Accepted
Princy
Top achievements
Rank 2
answered on 15 Sep 2010, 05:02 AM
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.
0
Raj
Top achievements
Rank 1
answered on 15 Sep 2010, 01:46 PM
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>
0
Dimo
Telerik team
answered on 15 Sep 2010, 02:01 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Raj
Top achievements
Rank 1
answered on 15 Sep 2010, 04:13 PM
Hi Dimo,

Thanks. I got it. Thanks for your help.

Tags
Grid
Asked by
Raj
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Raj
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or