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

How to add dinamically rows to grid from javascript

2 Answers 89 Views

Grid

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

Pedro asked on 27 Aug 2010, 04:05 PM

Hi I'm using JSON for recovery data from the WebMethod but I wanna add telerik:rowbound for each item in the list...

The grid is empty, no have neither columns and rows, I assign the columns on the pageload, then recovery the data on the cliente side and I add rows to the grid for javascript something like this:

function CargarParametrosSuccess(resultado) {

var parametros = (typeof resultado.d) == 'string' ?

eval('(' + resultado.d + ')') :

resultado.d;

for (var i = 0; i < parametros.length; i++) {

//TODO: crear Fila en grid

var parametro = parametros[i];

var tabla = document.getElementById("rgvParametros_ctl00");

var fila = tabla.insertRow();

var celda = fila.insertCell();

var newImage = document.createElement('input');

newImage.type = 'image';

newImage.src = 'Imagenes/seleccionar.png';

celda.width = 20;

celda.appendChild(newImage);

celda = fila.insertCell();

celda.width = 80;

celda.innerHTML = parametro.Codigo;

celda = fila.insertCell();

celda.innerHTML = parametro.Nombre;

celda = fila.insertCell();

celda.innerHTML = parametro.Descripcion;

celda = fila.insertCell();

celda.innerHTML = parametro.Valor;

celda = fila.insertCell();

celda.innerHTML = parametro.Estado;

}}

But the rows is added under the pagination buttons...

Thanks a lot for your responses.

2 Answers, 1 is accepted

answered on 02 Sep 2010, 09:06 AM

Hello Pedro,

To achieve the desired functionality and insert the rows on the client side into the MasterTableView of the RadGrid you could try inserting the rows into the tbody of the rendered table:

var tabla = document.getElementById("RadGrid1_ctl00");

var fila = tabla.tBodies[0].insertRow();

var celda = fila.insertCell();

Also please note that by default the RadGrid does not support the desired functionality. Generally the RadGrid is databound control and it works as expected only when it is bound to all data from the datasource. The RadGrid does not support out of the box databinding. So inserting rows on the client with javascript is some kind of hack and the major functionalities as sorting, paging, filtering will not work for the new inserted rows.

Additionally please check out the following online resources which demonstrates client side binding of the RadGrid:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/aspajaxgridapplication/defaultcs.aspx?product=grid

I hope this helps.

Sincerely yours,
Radoslav
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items