This is a migrated thread and some comments may be shown as answers.

Get all the items in RadGrid Gouping client side

3 Answers 493 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 02 Sep 2012, 08:31 AM
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/ 

3 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 06 Sep 2012, 07:11 AM
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.
0
Steve
Top achievements
Rank 1
answered on 26 Jun 2015, 05:36 PM

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>

0
Radoslav
Telerik team
answered on 01 Jul 2015, 08:08 AM
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
Tags
Grid
Asked by
Ali
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Steve
Top achievements
Rank 1
Share this question
or