Hi Miro,

I am trying to create the grid using extension methods on the server side

HtmlHelperExtensions.Infragistics(helper)

                    .Grid<IList>(emptyList)

                    .ID("xyz")

                    .AutoGenerateColumns(true)

                    .AutoGenerateLayouts(true)

                    .Virtualization(true)

                    .VirtualizationMode(VirtualizationMode.Continuous)

                    .Height("650px")

                    .Width("700px")

                    .DataSource(emptyList)

                    .FixedHeaders(true)

                    .DefaultColumnWidth("100px")

                    .DataBind()

                    .Render();

Then on the client side I try to bind this grid with a different data source.

$('#xyz').igGrid({

            dataSource: json,

            autoGenerateColumns: false,

            responseDataKey: 'Rows',

            columns: json.Columns,

            height: '500px'

        });

This throws a java script error. Length is null or 0. If I try to bind to the parent control (div) then I get 2 datagrids on the page (which makes sense).

Thanks.

Hi,

Ok, you have created the grid from the MVC and it is shown in the client side. So the next step is in some moment to data bind the grid. In your code I see you are re-creating the grid using javascript. I can show you a code snippet how to re-create the grid, and how to data bind it. Let's imaging you have a button and after clicking it you should databind the grid. Here is a sample:

var json = new Array();

              //json.push({ "Id": 1,  "UnitsInStock": "Unit 1" });

        $(function () {

                     $('#databindButton').bind({

                           click: function () {

                                  var $gridElement = $('#xyz);

                                  $gridElement.igGrid('option', 'dataSource', json);

                                  $gridElement.igGrid('dataBind');

                           }

                     });

              });

In this case you should not change the columns definition. But in your case you try to re-create the grid. So my advice is first to destroy it and after that to re-create it(with the new options). Here it is the sample(I have not set a new records in json array but you can populate it as you want - this is just an example):

var json = new Array();

              //json.push({ "Id": 1,  "UnitsInStock": "Unit 1" });

        $(function () {

                     $('#databindButton').bind({

                           click: function () {

                                  var $gridElement = $('#xyz);

                                  $gridElement.igGrid('destroy');

                                  $gridElement.igGrid({

                                         dataSource: json,

                                         autoGenerateColumns: true,

                                         responseDataKey: 'Rows',

                                         columns: [

                                                {headerText: "Id", key: "Id", dataType: "number" , width: "100px"},

                                                {headerText: "UnitsInStock", key: "UnitsInStock", dataType: "string" , width: "400px"}

                                         ],

                                         width: '500px',

                                         height: '500px'

                                  });

                           }

                     });

              });

In this case you can set the data source as you want and you can set different column definition. I hope this will help you.

Thanks,

Miro