Cancel Postback on sort

[Craig]

I am new to the Telerik controls but I have been testing them out for a couple of weeks on a proof of concept project. I am really liking the flexibility and power of this control set. But there is a bit of a learning curve.
I'm hving an issue with canceling the sort event on the grid. I basically want to trap the sort command and stop the postback but have the header images reflect the sort direction and grap the sort expression. I am doing this all client side so I will call a web service to get the data and rebind. I found an example on how to cancel a command but for some reason the postback is still happening. I am using the demo version of the Ajax/UI control version 2009.02.0701.35. Bellow is my code.

The Grid

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" GridLines="None"
        Skin="Forest" AutoGenerateColumns="False" GroupingEnabled="False" ShowStatusBar="True"
        Width="100%" Height="300px" EnableViewState="False">
        <MasterTableView ClientDataKeyNames="bl_id,fl_id,rm_id" TableLayout="Fixed" EnableViewState="False"
            AllowNaturalSort="True" AllowFilteringByColumn="false">
            <RowIndicatorColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="bl_id" AllowSorting="false"
                    HeaderText="Building" ReadOnly="True" ShowFilterIcon="False" UniqueName="bl_id">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="fl_id" AllowSorting="false"
                    HeaderText="Floor" ReadOnly="True" ShowFilterIcon="False" UniqueName="fl_id">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="rm_id" SortExpression="rm_id"
                    HeaderText="Room" ReadOnly="True" ShowFilterIcon="False" UniqueName="rm_id">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="name" SortExpression="name"
                    HeaderText="Name" ReadOnly="True" ShowFilterIcon="False" UniqueName="name">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="use" SortExpression="rm_use"
                    HeaderText="Use" ReadOnly="True" ShowFilterIcon="False" UniqueName="use">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="rmtype" SortExpression="rmtype"
                    HeaderText="Type" ReadOnly="True" ShowFilterIcon="False" UniqueName="rmtype">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="capacity" SortExpression="capacity"
                    HeaderText="Capacity" ReadOnly="True" ShowFilterIcon="False" UniqueName="capacity">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn AllowFiltering="False" DataField="area" SortExpression="rm.area"
                    HeaderText="Area" ReadOnly="True" ShowFilterIcon="False" UniqueName="area">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <DataBinding CountPropertyName="" MaximumRowsParameterName=""
                StartRowIndexParameterName="" SelectMethod="GetRoomList"
                Location="services/SjeccdSpaceWebService.asmx" FilterParameterName="filter"
                FilterParameterType="Linq" SortParameterName="sort" SortParameterType="Linq">
            </DataBinding>
            <Selecting EnableDragToSelectRows="False" AllowRowSelect="True" />
            <ClientEvents OnCommand="CheckStuff" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" EnableVirtualScrollPaging="false" />
        </ClientSettings>
    </telerik:RadGrid>

The script

<script id="sample" language="javascript" type="text/javascript">
    function CheckStuff(sender, args) {
         //cancel the default command to prevent postback/ajax request
        //var sortExpressions = sender.get_masterTableView().get_sortExpressions();
        if (args.get_commandName() == 'Sort'){
            args.set_cancel(true);
            //get data and update grid;

        }
        alert(args.get_cancel()); //+ sortExpressions.toString());
    }


</script>

After I click the column header the sort command is trapped. I get a message box wiith 'true' and I select OK. Then the grid updates with the new sort. Does this have something to do with the data binding section of the grid control? I have about 8 hours into this and I have tried a number of diffent options. I am just stuck. Any help or best practices would be appreciated.

Thanks,
Craig

[Craig]

After trying more configurations I found that removing the "location" and "SelectMethod" values allows me to cancel the event on the client. The down side is that I have to do everything on the client for the grid. So I had to wire a page load event to populate the grid the first time the page loads.

The issue now is that setting "AllowNaturalSort" to false still cycles through all the sorts (Asc, Desc, none) instead of just two.

Craig

[Patrice Boissonneault]

Hi Craig,

I'm trying to acheive the same thing, which is to do a full client-side sort.  But I'm having difficulties with the sort itself.  Would you mind sharing the code that is actually performing the sort on the grid?

Otherwise, Telerik, would you not have a sample for full client-side sorting (no postback to server)?

Thank you so much.

Patrice

[Princy]

Hello,

You can try the following code snippet for client side sorting.
CS:

protected void RadGrid1_PreRender(object sender, EventArgs e)
   {
       foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
       {
           foreach (GridHeaderItem header in RadGrid1.MasterTableView.GetItems(GridItemType.Header))
           {
               header[column.UniqueName].Attributes.Add("OnClick", "return SortColumn('"+ column.UniqueName+ "');");
           }
       }
 }

JS:

<script type="text/javascript">
 function SortColumn(colname)
     {
        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
        masterTable.sort(colname);
     }
</script>

One suggestion to prevent postback on clicking the header is you can use RadAjaxPanel or RadAjaxManager.

Another suggestion is you can use Client-side Binding to populate the RadGrid.

Thanks,
Princy.

[Veli]

Hi guys,

Have you checked out RadGrid's client-side databinding demos?

RadGrid Client-Side Programmatic DataBinding
RadGrid Client-Side Declarative DataBinding

I  believe they demonstrate exactly the scenario you need. Just a note on using Location and SelectMethod in RadGrid. This setup tells RadGrid that it is supposed to databind to a web service automatically. This is why you cannot cancel the command event. RadGrid still makes a service call. Depending on your scenarios, you have two advisable approaches here:

1. When using automatic data source binding (keeping Location and SelectMethod) RadGrid has already built the sort and filter expressions. You can modify them right in the OnCommand event handler and RadGrid will send them as you need to the web service.

2. When using programmatic web service binding, remove the Location and SelectMethod properties, cancel the OnCommand event and make a service request programmatically (e.g. thorugh jQuery.ajax). The filter and sort expressions will be available again for you in the OnCommand event handler, so you can access them, apply any modifications needed and append them to the service call.

These 2 approaches are, in fact, what the above linked RadGrid demos show. Hope it helps.

Veli
the Telerik team