[Solved] Hpw to iterate Telerik MVC Grid inside jQuery

[Ashok]

Here is the situation. We can't use Html.form. We have a page with Telerik Grid, telerik panel etc and few Button. All buttons are of type="button". We are using jQuery to fire button click event. Inside jQuery button click we need to access Telerik MVC Grid data (grab complete data of 2 columns out of 8) and pass it to controller action.

I can get handle to "Grid" by
grid = $('#GridName').data('tData');

I just can't figure out how to pull data from 2 columns and pass it to controller.

[Atanas Korchev]

Hi Tejas,

 You can iterate the grid as a regular HTML table:

$("#grid tr").each(function() {
   var tr = this;
   var cells = tr.cells;
   var firstCell = cells[0];
   var secondCell = cells[1];
});

Greetings,
Atanas Korchev
the Telerik team

[Ashok]

Hello Atanas,

Thanks for quick response.. however this solves only partial thing for me.

When I use the code,

$("#grid tr").each(function() {
   var tr = this;
   var cells = tr.cells;
   var firstCell = cells[0].innerHTML;
   var secondCell = cells[1].innerHTML;
});

I get all sorts of information (header with css, footer with css, sorting, paging with css etc along with data).

Here is my focus: We have grid with 6-7 columns. One of the column is "Id" column and other column is DropDownList column. Is there a way to get values of all "Id" columns and corresponding "Selected DropDownList Value", build an error and pass it to MVC Controller?

I tried playing with $("#grid tr").each(function() { }); but I couldn't eliminate header, footer, unwanted css etc.

Help is appreciated.

[Atanas Korchev]

Hello Tejas,

You can try this

$("#grid tbody > tr") if your grid is NOT scrollable or

$("#grid .t-grid-content tbody > tr") if your grid is scrollable.

Those would return only the data rows.

Regards,
Atanas Korchev
the Telerik team

[Ashok]

Thanks, but it solves most of the problem except DownDownList which is inside Telerik Grid. When I do alert (for testing) I get DropDownList as attached in file. How do I get value of SelectedItem,SelectedIndex of DropDownlist which is inside Telerik MVC Grid.

Is there another way of accessing all rows for a particular column?

[Atanas Korchev]

Hello Tejas,

 You should use the client-side API of the dropdownlist to get its value:

var dropdown = $(cell).find(".t-dropdown input").data("tDropDownList");

if (dropdown) {
   var value = dropdown.value();
}

Regards,
Atanas Korchev
the Telerik team

[Ashok]

Thanks. That helped.

[Ashok]

Is there a way I can make script robust by using both of this?

$("#grid tbody > tr") if your grid is NOT scrollable or

$("#grid .t-grid-content tbody > tr") if your grid is scrollable

I just spended couple of hours to figure out why my code stopped working as I switched from "Scrollable Grid" to Non-Scrollable Grid.

I forgot to change .js file code and my code stopped working.

Any idea?

[T. Tsonev]

Hi Tejas,

You can combine any number of selectors by using commas:

$("#grid tbody > tr, #grid .t-grid-content tbody > tr")

I hope this helps.

Best Regards,
Tsvetomir Tsonev
the Telerik team