RAD Grid control - get the selected rows

[Meenakshi Nagalingam]

Hi,

In RAD Grid Q3 2007 version, how to get all selected rows in the radgrid in javascript?

I tried the following code, but it returns only the count of the current DetailTableView only; where the page is a web user control.

function OnRowSelected()
{
    var noOfRowsSelected;
    noOfRowsSelected = this.SelectedRows.length
}

Here is the declaration of the grid control:

<MasterTableView

<MasterTableView

<MasterTableView

<rad:RadGrid ID="grdViewRegistries" runat="server" AutoGenerateColumns="False" GridLines="Vertical"

Height="220px" AllowPaging="false" AllowSorting="false" EnableAJAX="true" Skin="BlueCare"

OnItemDataBound="grdViewRegistries_ItemDataBound" HorizontalAlign="Center" AllowMultiRowSelection="true"

AllowMultiRowEdit="true" EnableOutsideScripts="true" EnableAJAXLoadingTemplate="true"

OnDetailTableDataBind="grdViewRegistries_DetailTableDataBind" OnItemCreated="grdViewRegistries_ItemCreated">

<ClientSettings ApplyStylesOnClient="true" AllowExpandCollapse="true" ClientEvents-OnRowCreated="onRowCreated">

<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />

<ClientEvents OnRowMouseOver="ChangeColor" OnRowMouseOut="RemoveColor" OnRowDeselected="RowSelectColor"

OnRowSelected="RowSelectColor" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="220px" />

</ClientSettings>  <MasterTableView> </MasterTableView>

</rad:RadGrid>

Please let me know.

Thanks

[Princy]

Hi Meenakshi,

Give a try with the following approach to get the total Selected row count  for the master table as well as detail table's on the client side.

JS:

<script type="text/javascript">

function RowSelected()
{
    if(this.Name=="Master")
    {
     var noOfRowsSelected;
     noOfRowsSelected = this.SelectedRows.length ;
     alert("noOfRowsSelected:" + noOfRowsSelected)
     }

     if((this.OwnerID=="RadGrid1")&&(this.Name=="Detail"))
     {
      var SelectedRowsInMaster= this.Owner.MasterTableView.SelectedRows.length;
      alert("Selected Master Table Rows: " + SelectedRowsInMaster);
      var SelectedRowsInDetail=this.SelectedRows.length;
      alert("Selected Detail Table Rows: " + SelectedRowsInDetail)
      var TotalSelectedRows=SelectedRowsInDetail + SelectedRowsInMaster;
      alert("Total selected rows:" + TotalSelectedRows )
    }


}
</script>

Note: Set the Name property for the Detail and Master table.

Thanks
Princy

[Andrey]

Hello.
I used script written above.
But it generate this error: "RowsSelected is not defined"

I want to get the number of selected rows in RadGrid on the client side.

If it is possible to lay out full page example of casual.

Thanks.
Sorry for my rude english

[Princy]

Hello Andrey,

Check whether you have defined the function "RowSelected". Here is the code that I tried which worked as expected.

aspx:

<telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="False">
    <MasterTableView CommandItemDisplay="Top"  Name="Master">
       <Columns>
          . . . .
       </Columns>
          <DetailTables>
              <telerik:GridTableView AutoGenerateColumns="false" CommandItemDisplay="Top"
                        Name="Detail" >
          </DetailTables>
     </MasterTableView>
            <ClientSettings Selecting-AllowRowSelect="true">
            <ClientEvents OnRowSelected="RowSelected" />
            </ClientSettings>
</telerik:RadGrid>

Javascript:

function RowSelected()
{
 //your function here
}

Thanks,
Princy.

[Iana Tsolova]

Hello Andrey,

You can try the below sample:

<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function getSelectedItems() {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var selectedItems = grid.get_masterTableView().get_selectedItems();
            alert(selectedItems.length);
        }
    </script>
</telerik:RadCodeBlock>
<div>
    <asp:Button ID="Button1" runat="server" Text="Get selected items" OnClientClick="getSelectedItems(); return false;" />
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="true">
        <MasterTableView>
            <Columns>
                <telerik:GridClientSelectColumn>
                </telerik:GridClientSelectColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
</div>
</form>

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
}

void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = new object[] { "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8" };
}

For more information on RadGrid for ASP.NET AJAX client-side API, please refer to the below topic and the topics from the Client-Side Programming section of the control documentation:
http://www.telerik.com/help/aspnet-ajax/grid-getting-familiar-with-client-side-api.html

I hope this helps.

Regards,
Iana
the Telerik team

[Andrey]

Princy, thank for reply.

when I insert your code, I get the following error:
Content('</DetailTables>') does not match any properties within a 'Telerik.Web.UI.GridTableView', make sure it is well-formed.

When I remove following code:

<DetailTables>
<telerik:GridTableView AutoGenerateColumns="false" CommandItemDisplay="Top" Name="Detail" >
</DetailTables>

project compiles but throws following error:
Could not get property value "MasterTableView": the value of the object is NULL or not specified.

Here is my code:

<script type="text/javascript">
    function RowSelected()
    {
            var SelectedRowsInMaster = this.Owner.MasterTableView.SelectedRows.length;
            alert("Selected Rows: " + SelectedRows);
    }
    </script>



<telerik:RadGrid ID="MyGrid" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False">
<MasterTableView CommandItemDisplay="Top"  Name="Master" DataSourceID="SqlDataSource1">
    <Columns>
//My columns
    </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>
        <ClientSettings Selecting-AllowRowSelect="true">
        <ClientEvents OnRowSelected="RowSelected" />
        </ClientSettings>
</telerik:RadGrid>

I hope for your help.

[Andrey]

Thank you very much, Admin. Everything work.