how to set initial sort and filter?

[Phil Hadley]

I have added the markup necessary to specify the initial sort and filter.  When the page loads, the UI is set with the proper sort and filter indicated, but the request submitted by Telerik's Ajax code to my web service has no elements in either of List<GridSortExpression> or List<GridFilterExpression>.  So as a result, the grid is populated with unsorted & unfiltered data.

Here's the signature of the web service function that is called:

public Dictionary<string, object> GetAllUsersGrid(int startRowIndex, int maximumRows, List<GridSortExpression> sortExpression, List<GridFilterExpression> filterExpression)

Here's my markup:

<telerik:RadGrid ID="AllUsersGrid" runat="server" AllowPaging="True" GridLines="None"
    AutoGenerateColumns="False" Skin="WebBlue" AllowSorting="True" PageSize="20">
    <PagerStyle Mode="NumericPages" />
    <MasterTableView Font-Size="11px" AllowFilteringByColumn="true">
        <SortExpressions>
            <telerik:GridSortExpression FieldName="Name" SortOrder="Ascending" />
        </SortExpressions>
        <Columns>
            <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Wrap="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Email Address" DataField="Email" UniqueName="EmailAddress" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Access Level" DataField="AccessLevel" UniqueName="AccessLevel" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" CurrentFilterFunction="EqualTo" CurrentFilterValue="User">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Verified" DataField="EmailVerified" UniqueName="EmailVerified" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Failed Logins" DataField="NumFailedLogins" UniqueName="FailedLogins" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Reset" UniqueName="Reset" ItemStyle-Width="40" AllowFiltering="false">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <DataBinding Location="webservices/SupportSvcs.asmx" SelectCountMethod="GetAllUsersGrid"
            SelectMethod="GetAllUsersGrid">
        </DataBinding>
        <ClientEvents OnDataBindingFailed="AllUsers_DataBindingFailed" OnRowDataBound="AllUsers_RowDataBound"
             OnDataBound="AllUsers_DataBound" OnDataBinding="AllUsers_DataBinding" />
    </ClientSettings>
    <SortingSettings EnableSkinSortStyles="False" />
</telerik:RadGrid>

Seems like a Telerik bug to me because none of my Javascript is invoked in the process.  Help!

[Elliott]

<telerik:RadCodeBlock ID="rcBlock" runat="server">
    <script type="text/javascript">
    function doFilter(sender,e) {
        var masterTable = $find("<%= rgItems.ClientID %>").get_masterTableView();
        masterTable.filter(sender, sender.value, Telerik.Web.UI.GridFilterFunction.StartsWith, true);
    }
    </script>

[Phil Hadley]

Thanks, but....  How to I wireup to "doFilter" ?

I tried wiring it to OnMasterTableViewCreated without success...

[Phil Hadley]

Through trial and error, I discovered that this works if you wire doFilter to the OnDataSourceResolved event.  Calling filter does not set the UI elements on the page, so I had to set the CurrentFilterValue and CurrentFilterFunction in the markup.

I'm now satisfied with how it works, and the code looks like this:

var filtered = false;
function AllUsers_DataSourceResolved(sender, args) {
    if (!filtered) {
        var masterTable = $find("ctl00_ContentPlaceHolder1_AllUsersGrid").get_masterTableView();
        filtered = true;
        masterTable.filter("AccessLevel", "User", "EqualTo");
        masterTable.sort("Name");
    }

And the markup looks like this:

<telerik:RadGrid ID="AllUsersGrid" runat="server" AllowPaging="True" GridLines="None"
    AutoGenerateColumns="False" Skin="WebBlue" AllowSorting="True" PageSize="20">
    <PagerStyle Mode="NumericPages" />
    <MasterTableView Font-Size="11px" AllowFilteringByColumn="true">
        <Columns>
            <telerik:GridBoundColumn HeaderText="Name" DataField="Name" UniqueName="Name" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Wrap="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Email Address" DataField="Email" UniqueName="EmailAddress" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Access Level" DataField="AccessLevel" UniqueName="AccessLevel" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" CurrentFilterFunction="EqualTo" CurrentFilterValue="User">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Verified" DataField="EmailVerified" UniqueName="EmailVerified" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Failed Logins" DataField="NumFailedLogins" UniqueName="FailedLogins" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Reset" UniqueName="Reset" ItemStyle-Width="40" AllowFiltering="false">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <DataBinding Location="webservices/SupportSvcs.asmx" SelectCountMethod="GetAllUsersGrid"
            SelectMethod="GetAllUsersGrid">
        </DataBinding>
        <ClientEvents OnDataBindingFailed="AllUsers_DataBindingFailed" OnRowDataBound="AllUsers_RowDataBound"
             OnDataBound="AllUsers_DataBound" OnDataBinding="AllUsers_DataBinding" OnDataSourceResolved="AllUsers_DataSourceResolved" />
    </ClientSettings>
    <SortingSettings EnableSkinSortStyles="False" />
</telerik:RadGrid>

[Phil Hadley]

I have a problem with my approach that I explained in my last post.  It causes the GetAllUsersGrid() web service method to be invoked two times.  The first time, it has only the filter parameter set.  The second time, it has both the filter and the sort parameters set.  So it seems that the filter() and sort() functions are each causing the grid to bind one time.  How do I set the initial sort and filter such that it only invokes the web service method one time??

[Phil Hadley]

I seem to have stumped the entire support community....

Is there not a way to set an initial sort & filter without invoking multiple web service invocations?

[Iana Tsolova]

Hello Phil,

You can handle the OnGridCeated client-side event of the grid and use a similar code to add default sort expressions. Then try calling the filter() method to filter the grid:

function GridCreated(sender, args) {
    var grid = sender;
    var sortExpression = new Telerik.Web.UI.GridSortExpression();
    var fieldName = "Name";
    var sortOrder = Telerik.Web.UI.GridSortOrder.Descending;
    sortExpression.set_fieldName(fieldName);
    sortExpression.set_sortOrder(sortOrder);
    grid.get_masterTableView()._sortExpressions.add(sortExpression);
    grid.get_masterTableView()._showSortIconForField(fieldName, sortOrder);
    sortExpression = new Telerik.Web.UI.GridSortExpression();
    fieldName = "ID";
    sortOrder = Telerik.Web.UI.GridSortOrder.Descending;
    sortExpression.set_fieldName(fieldName);
    sortExpression.set_sortOrder(sortOrder);
    grid.get_masterTableView()._sortExpressions.add(sortExpression);
    grid.get_masterTableView()._showSortIconForField(fieldName, sortOrder);
}

Give it a try and let me know how it goes.

Kind regards,
Iana
the Telerik team

[Phil Hadley]

Thanks, that helped.  Except it was still invoking the web service method twice, so I inserted filtering code into my OnGridCreated handler, and it fixed the problem.  I have one remaining issue: What is the analog to _showSortIconForField() for filtering?  It's weird but none of the client-side methods seem to be documented.  (I'm looking at this page)

function AllUsers_GridCreated(sender, args) {
    var grid = sender;
    var sortExpression = new Telerik.Web.UI.GridSortExpression();
    var fieldName = "Name";
    var sortOrder = Telerik.Web.UI.GridSortOrder.Ascending;
    sortExpression.set_fieldName(fieldName);
    sortExpression.set_sortOrder(sortOrder);
    grid.get_masterTableView()._sortExpressions.add(sortExpression);
    grid.get_masterTableView()._showSortIconForField(fieldName, sortOrder);
    var filterExpression = new Telerik.Web.UI.GridFilterExpression();
    filterExpression.set_fieldName("AccessLevel");
    filterExpression.set_fieldValue("User");
    filterExpression.set_filterFunction("EqualTo");
    grid.get_masterTableView()._filterExpressions.add(filterExpression);
}

[Phil Hadley]

Ok I found the way to set the filter value, but I still haven't found the way to set the filter function in the drop list.

masterTableView._updateFilterControlValue("User", "AccessLevel", "EqualTo");

Any help would be lovely.  This should really be documented somewhere...

[Phil Hadley]

There must be an analogous client-side function to_showSortIconForField() that sets the filtering UI.  These methods aren't in the documentation, that I can tell.  If it were, I wouldn't have spent the past two weeks on this forum....

[Iana Tsolova]

Hi Phil,

Please find the sample modified which illustrates how you can add default filter expression for the client-side bound grid. I added the below code in the OnGridCreated client-side event to add a sample expression:

<script type="text/javascript">
     function GridCreated(sender, args) {
         var grid = $find("<%=RadGrid2.ClientID %>");
         var filterExpression = new Telerik.Web.UI.GridFilterExpression();
         var columnUniqueName = "Name";
         var dataField = "Name";
         var filterFunction = Telerik.Web.UI.GridFilterFunction.Contains;
         var filterValue = "Ma";
         var column = grid.get_masterTableView().getColumnByUniqueName(columnUniqueName);
         column.set_filterFunction(filterFunction);
         filterExpression.set_fieldName(dataField);
         filterExpression.set_fieldValue(filterValue);
         filterExpression.set_filterFunction(filterFunction);
         filterExpression.set_columnUniqueName(columnUniqueName);
         grid.get_masterTableView()._updateFilterControlValue(filterValue, columnUniqueName, filterFunction);
         grid.get_masterTableView()._filterExpressions.add(filterExpression);
     }
</script>

However you are right that the approach for adding default sort and filter expressions is not documented. I will forward that issue to our documentation team so they consider adding this either in RadGrid documentation or as other support resource. 

Greetings,
Iana
the Telerik team

[Phil Hadley]

Thank you for providing this information.  I am more than a bit miffed that I have to pay for undocumented code.  I propose that paying licensees receive FREE priority support for the client-side code until it is documented.

[Iana Tsolova]

Hi Phil,

RadGrid does not support adding filter and sort expression out of the box. The desired functionality can be achieved with custom code provided in this forum thread.

Kind regards,
Iana
the Telerik team