Get selected items in a RadGrid client-side

Question

I want to get the values of the selected checkbox in a RadGrid. I have a radgrid, textbox and a button as follows:

this._RadAjaxPanel.Controls.Add(RadGrid1);
this._RadAjaxPanel.Controls.Add(TextBox1);
this._RadAjaxPanel.Controls.Add(Buton1);

The radgrid id is set to RadGrid1 and

Button1.OnClientClick = "GetSelectedItems("+ this._RadGrid1 +")";

On click of the button a javascript is called where I want to know which rows have been selected. The javascript function is as follows but it is not correct:

 function GetSelectedItems(grid) {           
    var selectedRows = grid.get_selectedItems();
    for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
        var cell = grid.getCellByColumnUniqueName(row, "CategoryID")
        //here cell.innerHTML holds the value of the cell    
    }
}

Please let me know how can I get the selected rows.

score 3 · Answer 1 · answered Jun 09 '14 at 19:17

3

Here is how to get whether or not a checkbox is selected. I am using a GridTemplateColumn with a CheckBox as the ItemTemplate, which Telerik always suggests using over the GridCheckBoxColumn.

The trick is to get the inner HTML in the cell, and parse out the name of the control. The cell value will be something like id=cbxRow where the CheckBox control's ID is cbxRow like in the below example.

JavaScript:

var grid = $find("RadGrid1");
var masterTableView = grid.get_masterTableView();
var selectedRows = masterTableView.get_selectedItems();

for (var i = 0; i < selectedRows.length; i++) {
    var cellCB = masterTableView.getCellByColumnUniqueName(row, "CB");
    var innerCB = cellCB.innerHTML;
    var locId = innerCB.indexOf("id=");
    var locIdEnd = innerCB.indexOf("\" ", locId);
    var idVal = innerCB.substr(locId + 4, locIdEnd - locId - 4);
    var cbx = document.getElementById(idVal);
    if (cbx.checked) {
        alert("The checkbox is checked!");
    }
    else {
        alert("The checkbox is not checked!");
    }
}

ASPX:

<telerik:GridTemplateColumn UniqueName="CB" ...>
    <ItemTemplate>
        <asp:CheckBox ID="cbxRow" runat="server">
    </ItemTemplate>
</telerik:GridTemplateColumn>

answered Jun 09 '14 at 19:17

DanM7

2,203
3
28
46

Thanks for the reply. Even I am using a GridTemplateColumn. But var grid = $find("RadGrid1") does not work. It is unable to find the grid, though my grid ID is set to RadGrid1. Is it because the button id not a part of the grid?The grid and button are separately placed in a RadAjaxPanel. – R B Jun 09 '14 at 20:09
The RadGrid's control ID might be nested inside of the page or panel. Try viewing the source to find it, or even better yet, view the control's Unique ID property server-side. Also, is this inside a user control? – DanM7 Jun 09 '14 at 20:34
Also try something like `var grid = $find("<%=RadGrid1.ClientID%>");` in your script. – DanM7 Jun 09 '14 at 20:52
The RadGrid is placed in a RadAjaxPanel. Which is then added to a Panel. RadGrid has GridTemplateColumn for checkboxes and some columns. Then I add a textbox to the RadAjaxPanel and then a button to the RadAjaxPanel. A value needs to be entered in the textbox and based on selections, on click of button, the value is added to all the rows. I checked the Unique ID on server side, and it looks good! var grid = $find("<%=RadGrid1.ClientID%>") returns null. – R B Jun 09 '14 at 21:08
Do you add the control to the panel before you set the ID? Is the Unique ID just `RadGrid1`? – DanM7 Jun 09 '14 at 23:13
@ DanM The UniqueID is just RadGrid1. The grid is added to the panel after setting all its properties including the ID. – R B Jun 10 '14 at 15:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55392/discussion-between-danm-and-r-b). – DanM7 Jun 10 '14 at 18:22

score 1 · Accepted Answer · edited Jun 11 '15 at 05:07

1

I have tried the following, which solved my issue:

this._Button1.Attributes.Add("OnClick", "GetSelectedItems('" + _RadGrid1.ClientID + "');return false;");

edited Jun 11 '15 at 05:07

Naveed Butt

2,861
6
32
55

answered Jun 12 '14 at 21:37

R B

413
3
8
19

Now I see what your issue is, and why you couldn't get my answer to work. Your ID is not `RadGrid1`, it is `_RadGrid1` with an underscore. Once you fix that, everything works. You should also edit your answer here to format the code properly. – DanM7 Jul 31 '14 at 18:50

Get selected items in a RadGrid client-side

2 Answers2