Get all the items in RadGrid Gouping client side

4 posts, 0 answers
  1. Ali
    Ali avatar
    24 posts
    Member since:
    Apr 2010

    Posted 02 Sep 2012 Link to this post

    Hi,
    The following code can be used to get all the items in RadGrid [client side].

    var masterTable = $find("<%= Radgrid1.ClientID %>").get_masterTableView();
    var rows = masterTable.get_dataItems();

    How can I get / traverse all the items in a grouping in RadGrid? [client side]. 

    Thanks for your help.
    http://www.megasearches.com/ 

  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 06 Sep 2012 Link to this post

    Hi,

    To achieve the desired functionality you could try using the following code snippet on the client:
    var allItems = $find("RadGrid1").get_masterTableView().get_element().rows
    var groups = new Array();
    var group = new Array();
    for(var i=0;i<allItems.length;i++)
    {
        if(allItems[i].className.indexOf("rgGroupHeader") != -1)
        {
            group = new Array();
            groups.push(group);
        }
        else
        {
            group.push(allItems[i]);
        }
    }
    Where the "groups" will contains all rows grouped into arrays. Please give it try and let me know if it helps you. I hope this helps.

    Regards,
    Radoslav
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    6 posts
    Member since:
    Feb 2012

    Posted 26 Jun 2015 in reply to Radoslav Link to this post

    Hi,

    The code provided by Radoslav works great, however how do I access the individual row information? 

    I have this code getting the rows of a specific group:

     

    var groupRows = groups[0];

     

    Within the groups[0] I have 4 rows in my grid

    groupRows[0] Is my first row within the group, but I need to get field information from it.  Ideally it would be nice to grab the ClientDataKeys

     

    Below is my RadGrid:

     

    Thanks for your help.

     

    <telerik:RadGrid ID="gvTransactions" runat="server" AutoGenerateColumns="false" EmptyDataRowStyle-CssClass="error" EmptyDataText="No Transaction Found" >
    <MasterTableView ClientDataKeyNames="InvoiceNumber,TotalAmount"  DataKeyNames="TransactionType,TotalAmount,ApprovalCode,TransactionID,AmountRefunded,CommissionPaidYN" GroupsDefaultExpanded="true" >
                    <GroupHeaderTemplate>
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td><button id="btnRefund" tag='<%# Eval("TransactionID") %>' onclick="javascript:btnRefund_OnClick(this)">Refund</button></td>
                            </tr>
                        </table>
                    </GroupHeaderTemplate>
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="TransactionID" FieldName="TransactionID" HeaderText="Transaction ID" HeaderValueSeparator=": " />
                                <telerik:GridGroupByField FieldAlias="TotalTransactionAmount" FieldName="TotalTransactionAmount" HeaderText="Amount" FormatString="{0:c}" HeaderValueSeparator=": " />
                                <telerik:GridGroupByField FieldAlias="ApprovalCode" FieldName="ApprovalCode" HeaderText="Approval Code" HeaderValueSeparator=": " />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="TransactionID" />
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn DataField="TransactionType" HeaderText="Type" ReadOnly="True" HeaderStyle-Width="25px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"   />
                        <telerik:GridBoundColumn DataField="InvoiceNumber" UniqueName="InvoiceNumber" HeaderText="Invoice" ReadOnly="True" HeaderStyle-Width="25px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                        <telerik:GridBoundColumn DataField="CreateDate" HeaderText="Date" ReadOnly="True" HeaderStyle-Width="25px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataType="System.DateTime" UniqueName="CreateDate" DataFormatString="{0:M/d/yyyy}" HtmlEncode="false"/>
                        <telerik:GridBoundColumn DataField="TotalAmount" HeaderText="Amount" ReadOnly="True" HeaderStyle-Width="25px" HeaderStyle-HorizontalAlign="Right"  DataFormatString="{0:c}" HtmlEncode="False" ItemStyle-HorizontalAlign="Right" />
                        <telerik:GridTemplateColumn HeaderText="Select" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="35px" ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:CheckBox ID="chkSelect" runat="server" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
    <telerik:RadGrid ID="gvTransactions" runat="server" AutoGenerateColumns="false" EmptyDataRowStyle-CssClass="error" EmptyDataText="No Transaction Found" >
    <MasterTableView ClientDataKeyNames="InvoiceNumber,TotalAmount"  DataKeyNames="TransactionType,TotalAmount,ApprovalCode,TransactionID,AmountRefunded,CommissionPaidYN" GroupsDefaultExpanded="true" >
                    <GroupHeaderTemplate>
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td><button id="btnRefund" tag='<%# Eval("TransactionID") %>' onclick="javascript:btnRefund_OnClick(this)">Refund</button></td>
                            </tr>
                        </table>
                    </GroupHeaderTemplate>
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField FieldAlias="TransactionID" FieldName="TransactionID" HeaderText="Transaction ID" HeaderValueSeparator=": " />
                                <telerik:GridGroupByField FieldAlias="TotalTransactionAmount" FieldName="TotalTransactionAmount" HeaderText="Amount" FormatString="{0:c}" HeaderValueSeparator=": " />
                                <telerik:GridGroupByField FieldAlias="ApprovalCode" FieldName="ApprovalCode" HeaderText="Approval Code" HeaderValueSeparator=": " />
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="TransactionID" />
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
                    <Columns>
                        <telerik:GridBoundColumn DataField="TransactionType" HeaderText="Type"  />
                        <telerik:GridBoundColumn DataField="InvoiceNumber" UniqueName="InvoiceNumber" HeaderText="Invoice" ReadOnly="True"/>
                        <telerik:GridBoundColumn DataField="CreateDate" HeaderText="Date" ReadOnly="True"/>
                        <telerik:GridBoundColumn DataField="TotalAmount" HeaderText="Amount" />
                        <telerik:GridTemplateColumn HeaderText="Select"">
                            <ItemTemplate>
                                <asp:CheckBox ID="chkSelect" runat="server" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 01 Jul 2015 Link to this post

    Hi Steve,

    To achieve the desired functionality you can try using the client data key names collection. For example:
    <MasterTableView ClientDataKeyNames="Id,Name" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">

    To associate html row with grid data row item on the client you can use the id of the html row and compare it with the id of the data items:
    ...
    var items = ($find(gridClientID).get_masterTableView().get_dataItems();
    if (items[i].get_element().id === allItems[j].id)
    {
        var id = items[i].dataKeyValue("Id");
    }
    ...

    I hope this helps.

    Regards,
    Radoslav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top