Grid Grouping and Sorting with ClientDataSource

[Omar]

Hi, I got confused with all the threads I've read and I wasn't able to find an answer to my problem.

I have a RadGrid bound to RadClientDataSource. I'm using ClientItemTemplate to format my data in a single cell and my column does not have a header. 

So each data item occupies a single cell per row.

I want to know how I can group/ungroup the grid using a checkbox.

I was able to group by declaring the grouping in the grid but I want to achieve this using the checkbox.

 

One of the data field in the cell is a date, I want to sort my grid based on this field in a descending order.

How can I do it?

ps. type is string representing the name of the typeid.

<telerik:RadClientDataSource ID="AlarmClientDataSource" runat="server" AutoSync="True">
    <ClientEvents OnDataParse="AlarmClientDataSource_OnDataParse" OnChange="AlarmClientDataSource_OnChange" />
    <SortExpressions>
        <telerik:ClientDataSourceSortExpression FieldName="Created" SortOrder="Desc" />
    </SortExpressions>
    <Schema DataName="Result" ResponseType="JSON" ErrorsName="ErrorMessage">
        <Model ID="ID">
            <telerik:ClientDataSourceModelField FieldName="ID" DataType="String" Nullable="true" Editable="False" />
            <telerik:ClientDataSourceModelField FieldName="TypeID" DataType="String" Nullable="false" Editable="False" />
            <telerik:ClientDataSourceModelField FieldName="Created" DataType="Date" />
        </Model>
    </Schema>
</telerik:RadClientDataSource>

<telerik:RadCheckBox ID="AlarmGroupCheckBox" runat="server" Text="Group Alarms By Type" Width="100%" RenderMode="Classic"
            AutoPostBack="False" OnClientCheckedChanged="AlarmGroupCheckBox_OnClientCheckedChanged">
        </telerik:RadCheckBox>
        <telerik:RadGrid ID="AlarmGrid" runat="server" ClientDataSourceID="AlarmClientDataSource" Width="100%"
            AutoGenerateColumns="False" RenderMode="Lightweight" Skin="Material" CssClass="noWrapRadGrid">
            <ClientSettings AllowGroupExpandCollapse="true">
                <Selecting CellSelectionMode="SingleCell"></Selecting>
                <ClientEvents OnCellSelected="AlarmGrid_CellSelected" OnCellSelecting="AlarmGrid_CellSelecting" OnGridCreated="gridCreated"></ClientEvents>
            </ClientSettings>
            <SortingSettings SortedBackColor="#FFF6D6" EnableSkinSortStyles="false"></SortingSettings>
            <MasterTableView ShowHeader="False" AllowNaturalSort="True">
                <%--<SortExpressions>
                      <telerik:GridSortExpression FieldName="Created" SortOrder="Descending" />
                </SortExpressions>--%>
                <GroupByExpressions>
                    <telerik:GridGroupByExpression>
                        <SelectFields>
                            <telerik:GridGroupByField FieldAlias="Type" FieldName="type"></telerik:GridGroupByField>
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="type" />
                        </GroupByFields>
                    </telerik:GridGroupByExpression>
                </GroupByExpressions>
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="Alarms">
                        <ClientItemTemplate>
                            <table>
                                <tr>
                                    <td>
                                        <div class="alarm">
                                            <div class="alarm-wrapper">
                                                <div style="color:red; font-weight:bold">Alarm: #: ID #</div>
                                                <dl class="alarm-list-details">
                                                    <dt class="name">#= fecha.format(Created, 'YYYY-MM-DD hh:mm:ss A') #</dt>
                                                </dl>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </ClientItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <GroupingSettings ShowUnGroupButton="true" />
        </telerik:RadGrid>
    </ItemTemplate>
</telerik:RadPanelItem>

[Marin]

Hello,

You can use methods from the grid's client-side API:
groupColumn
ungroupColumn
which can be executed when you check or uncheck the checkbox.

Sorting can also be done through a method:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/sort

I hope this helps.

Regards,
Marin
Telerik by Progress

[Omar]

Thank you Marin for your reply, the sort worked for me but I'm still having problems with the group/ungroup.

I want to have the same functionality as groupbyexpression and the capability to cancel the grouping.

(un)groupColumn does not provide me with the same results, in fact when I use groupColumn my grid data disappears.

The only working method is using the declarative GroupByExpressions but I don't have a mean to enable/disable it.

[Marin]

Hello,

The group / ungroup methods from the API are equivalent to dragging a column header to group by that specific data field. If this feature is working in your case then the group / ungroup methods should also work. The column should also have DataField set if you wish to test the drag-to-group feature separately.
A sample demo of the correct setup where the group / ungroup methods work as expected can be found here:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/grouping/clientdatasource-grouping/defaultcs.aspx

Additionally you can also check the browser console for any client-side errors to verify whether the methods run correctly.

Regards,
Marin
Telerik by Progress

[Omar]

Hi Marin,

Thanks for your help. Apparently I needed to set ShowGroupPanel="True" as I was trying to avoid having a header to the table.

Btw, I noticed that the ungroup does not remove the header from Group Panel.

This will not affect me as I intend to hide the panel but thought I should report it.

[Marin]

Hello,

Thank you for the feedback. We'll look into this.

Regards,
Marin
Telerik by Progress