Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andrew Soldan
175
how access igGrid dataSource after REST bind?
posted

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

Parents
No Data
Reply
  • 1080
    Offline posted

    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.

Children