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

How to add dinamically rows to grid from javascript

2 Answers 64 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pedro
Top achievements
Rank 1
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

Sort by
0
Radoslav
Telerik team
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
0
Pedro
Top achievements
Rank 1
answered on 02 Sep 2010, 03:59 PM
Hi admin,
Thanks a lot.
Tags
Grid
Asked by
Pedro
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Pedro
Top achievements
Rank 1
Share this question
or