Grid Grouping and Sorting with ClientDataSource

6 posts, 1 answers
  1. Omar
    Omar avatar
    13 posts
    Member since:
    Oct 2016

    Posted 04 Dec 2016 Link to this post

    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>
  2. Answer
    Marin
    Admin
    Marin avatar
    1057 posts

    Posted 07 Dec 2016 Link to this post

    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
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  3. Omar
    Omar avatar
    13 posts
    Member since:
    Oct 2016

    Posted 11 Dec 2016 in reply to Marin Link to this post

    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.

  4. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 14 Dec 2016 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Omar
    Omar avatar
    13 posts
    Member since:
    Oct 2016

    Posted 18 Dec 2016 Link to this post

    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.

  6. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 20 Dec 2016 Link to this post

    Hello,

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

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top