how access igGrid dataSource after REST bind?

Hi,

I want use template for one igGrid column after it is filled with REST data

and somehow cannot access data loaded in the grid like below code,

dataSource = $(“#grid1”).igGrid(“option”, “dataSource”);  is empty…..

$(‘#grid1’).igGrid({
requestType: “POST”,
dataSource: ‘/Home/GridGetData’,
autoGenerateLayouts: false,
autoGenerateColumns: false,
mergeUnboundColumns: false,
responseDataKey: ‘Records’,
generateCompactJSONResponse: false,

rendered: function (evt, ui) {
tmpl = “<div id=grdlist_${ProductID}></div>”;
$(‘#grid1’).igGrid(‘setColumnTemplate’, ‘Name’, tmpl);

},
columns: [
{  key: ‘ProductID’, dataType: ‘number’, headerText: ‘ID’, width: ‘116px’},
{  key: ‘Name’, dataType: ‘string’, headerText: ‘Name’, width: ‘117px’   },
{  key: ‘ListPrice’, dataType: ‘number’, headerText: ‘Price’, width: ‘117px’ },
{  key: ‘ModifiedDate’, dataType: ‘date’, headerText: ‘Date’, width: ‘116px’ }
],
features: [
{
name: ‘Paging’,
recordCountKey: ‘TotalRecordsCount’,
pageIndexUrlKey: ‘page’,
pageSizeUrlKey: ‘pageSize’,
pageSize: 10,
type: ‘remote’,
pageIndexChanging: function (evt, ui) {
var ds = $(“#grid1”).data(‘igGrid’).dataSource;
ds.settings.urlParamsEncoded = function (item, params) {
params.extraParams = {
input: “text here”
};
};
}
}],
height: ‘500px’,
width: ‘100%’,
localSchemaTransform: true
});

/////////////////////////////////////////////

//ds is empty

dataSource = $(“#grid1”).igGrid(“option”, “dataSource”);
$.each(dataSource, function (index, row) {

…………………………………….
});
});

why?

thanks

Hello,

Thank you for posting in our community.

The syntax for getting the data source in the provided code snippet will return the original data source used when initializing the grid which will be empty since the request is not finished by the time the grid is initialized. To get the igDataSource instance use the following syntax:

var igDs = $(".selector").data("igGrid").dataSource;

My suggestion is to use the dataBound event to retrieve the data when it is returned from the server after the POST request.

thanks, started using dataBound event as suggested and dataSource is not null anymore,  with local data no problem but with POST  when I use your syntax: dataSource = $("#grid1").data("igGrid").dataSource; I'm getting null in row enumeration, although there is data now there in dataSource._data:

  $.each(dataSource, function (index, row) {
                $("#grdlist_" + row.ProductID).CustomList({

error: can't read property ProducID of null

when I use this statement:  dataSource = $("#grid1").igGrid("option", "dataSource"); which works with local data I got error: cannot use 'in' operator in search for length

what am I doing wrong here?

Hello,

By using this syntax the igDataSource instance is retrieved. To iterate over the data, you have to call the data function:

var ds = $("#grid1").data('igGrid').dataSource.data();

I have created and attached a sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach in in this case.

Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.

Thank you for your cooperation.

Attachments:

1. 1411.Sample.zip