how access igGrid dataSource after REST bind? | Infragistics Forums

State Not Answered
Replies 3 replies
Subscribers 13 subscribers
Views 1417 views
Users 0 members are here

175

how access igGrid dataSource after REST bind?

Andrew Soldan posted over 4 years ago

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

1080

Offline Martin Asenov posted over 4 years ago
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.
Cancel
Reply

Cancel
175

Offline Andrew Soldan posted over 4 years ago in reply to Martin Asenov

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?
Cancel
Reply

Cancel
1080

Offline Martin Asenov posted over 4 years ago in reply to Andrew Soldan
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.

1411.Sample.zip
Cancel
Reply

Cancel