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

Trying to filter a radgrid with javascript

1 Answer 165 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Javier
Top achievements
Rank 1
Javier asked on 13 Jul 2012, 05:18 PM
Ok, I have a radgrid (nothing fancy)

<telerik:RadGrid runat="server" ID="rgdGroupOrder" CellSpacing="0" GridLines="None">
    <MasterTableView AutoGenerateColumns="False">
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="Accession" DataType="System.Int64" FilterControlAltText="Filter Accession column"
                HeaderText="Acc #" SortExpression="Accession" UniqueName="Accession">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Description" FilterControlAltText="Filter Description column"
                HeaderText="Exam" SortExpression="Description" UniqueName="Description">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Status" FilterControlAltText="Filter Status column"
                HeaderText="Status" SortExpression="Status" UniqueName="Status">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ScheduleTime" DataType="System.DateTime" FilterControlAltText="Filter ScheduleTime column"
                HeaderText="Time" SortExpression="ScheduleTime" UniqueName="ScheduleTime" DataFormatString="{0:t}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Modality" FilterControlAltText="Filter Modality column"
                HeaderText="Modality" SortExpression="Modality" UniqueName="Modality">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ExamDate" DataType="System.DateTime" FilterControlAltText="Filter ExamDate column"
                HeaderText="ExamDate" SortExpression="ExamDate" UniqueName="ExamDate">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Resource" FilterControlAltText="Filter Resource column"
                HeaderText="Resource" SortExpression="Resource" UniqueName="Resource">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
</telerik:RadGrid>

And I have a radiobutton list (also not fancy)
<asp:RadioButtonList ID="rblGroupOptions" runat="server" AutoPostBack="false">
    <asp:ListItem Text="Apply to this exam only" Value="single"></asp:ListItem>
    <asp:ListItem Text="Apply to all in this group with same modality" Value="modality"
        Selected="True"></asp:ListItem>
    <asp:ListItem Text="Apply to all in this group for all modalities" Value="all"></asp:ListItem>
</asp:RadioButtonList>

And I have javascript functions that filter the grid based off of the radiobuttonlist
<telerik:RadCodeBlock ID="radcodeblock1" runat="server">
    <script type="text/javascript">
 
        function filterByAcc() {
            var grid = $find("<%=rgdGroupOrder.ClientID %>");
            if (grid != null) {
                var acc = "<%= AccessionNumber %>";
                var master = $find('<%=rgdGroupOrder.ClientID %>').get_masterTableView();
                master.filter("Modality", "", "NoFilter");
                master.filter("Accession", acc, "EqualTo");
            }
        }
        function filterByModality() {
            var grid = $find("<%=rgdGroupOrder.ClientID %>");
            if (grid != null) {
                var modality = "<%= Modality %>";
                var master = $find('<%=rgdGroupOrder.ClientID %>').get_masterTableView();
                master.filter("Accession", "", "NoFilter");
                master.filter("Modality", modality, "EqualTo");
            }
        }
        function clearFilters() {
            var grid = $find("<%=rgdGroupOrder.ClientID %>");
            if (grid != null) {
                var master = $find('<%=rgdGroupOrder.ClientID %>').get_masterTableView();
                master.filter("Modality", "", "NoFilter");
                master.filter("Accession", "", "NoFilter");
            }
        }
    
    </script>
</telerik:RadCodeBlock>

I've tied these javascript functions to the clientside clickevents of the radiobuttons. 

Not only do they not work, but they cause a postback that I have to handle using the radajaxmanager.  Which is what I was trying to avoid because this is in a usercontrol and some of the pages may have a lot of data on them.

Now, because it IS posting back I can set the filters server-side which I want to completely avoid.

Any suggestions?

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 17 Jul 2012, 12:41 PM
Hello Javier,

Thank you for contacting us.

I have created a sample RadGrid web site where I implemented the described Master/Content page scenario. Please check out the attached application and try to distinguish the crucial differences between our projects.

Please note that even when you fire the filter command from client-side, filtering is a complex feature which requires accommodating database operations. Therefore, the grid will need to rebind its data items in order for the filtering to work properly.

All the best,
Eyup
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Javier
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or