Rebound Grid (Columns have changed)

[Catalin Radoi]

Hi!

I have an MVC Grid that has no columns defined (dynamic columns, generated from the datasource)

 @(Html.EJ().Grid<object>("ResourcesGrid")

          .Datasource(ds => ds.URL(Url.Action("ResourcesDataSource")).Adaptor(AdaptorType.UrlAdaptor))

          .AllowFiltering()

          .AllowSorting()

          .AllowPaging()

          .AllowResizeToFit()

          .IsResponsive()

          .ClientSideEvents(eve => eve.ActionBegin("actionBegin"))

When I click some radios on the page, the datasource changes and all the columns should change (other columns). But the columns stay the same as from the first request.

$(function() {

    $("input[type=radio][name=resources]").change(function () {

        

        var grid = $("#ResourcesGrid").ejGrid("instance");

        grid.refreshContent();

    });

});

So basically, refreshContent doesn't update the columns as well :(

What should I use instead of refreshContent() to rebound the columns?

[Catalin Radoi]

I have also tried 

$(function() {

    $("input[type=radio][name=resources]").change(function () {

        

        //var grid = $("#ResourcesGrid").ejGrid("instance");

        var query = new ej.Query().addParams("resourceTypeId", this.id);

        var dm = ej.DataManager({ url: "Home/ResourcesDataSource", adaptor: new ej.UrlAdaptor() });

        var promise = dm.executeQuery(query);

        promise.done(function (e) {

            

            $("#ResourcesGrid").ejGrid("dataSource", e.result);

        });

    });

});

but now I get this error:

Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 2 is not of type 'Node'.

[Balasubramanian Masilamani]

Hi Catalin, 

We have created a sample with your code example and we unable to reproduce the mentioned issue in our sample. For your convenience we have attached the sample and please download the sample from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/135931/ze/Sample145862-264892618 

Please try the above sample and if possible please replicate the issue in the attached sample.  

Regards, 

Balasubramanian Masilamani 

[Catalin Radoi]

You did not understand, I believe.

Imagine I am binding a Grid with this columns:

Id     Column1     Column2

Then, on an ajax request (when switching between radio buttons, for example), I get A NEW datasource:

Id     ColumnX     ColY     ColZ     SomeOtherStuff

The grid doesn't rebound.

It gets the new rows, but it keeps the first columns (Id / Column1 / Column2)

[Catalin Radoi]

I cannot run your sample, as it gives me a compilation error (as all the samples provided on these forums).

So I've created a sample of my own to demonstrate the issue.

you can download it from here. (google drive)

Thanks

[Vignesh Natarajan]

Hi Catalin, 

 

Thanks for the update. 

 

We have analyzed the provided sample and we have achieved your requirement by destroying the old Grid and re-render the Grid with same model but with different DataSource. 

 

Refer the below code snippet 

 

  promise.done(function (e) { 

                var Obj = $("#ResourcesGrid").ejGrid("instance");  // get instance of the existing grid  

                Obj.model.columns = []; // remove the columns  

                Obj.model.dataSource = ej.parseJSON(e.result.result); // udpate the dataSource 

                var model = Obj.model;  

                $("#ResourcesGrid").ejGrid("destroy");  // destroy the existing Grid 

                $("#ResourcesGrid").ejGrid(model); // re render the Grid with new dataSource and old models. 

            }); 

 

Refer the below screenshot for output. 

 

 

We have prepared a sample for your convenience which can be downloaded from below link 

 

Sample:  https://www.syncfusion.com/downloads/support/forum/135931/ze/TwoDataSources1852442938.zip  

 

Note:  

1.       Previously you have given the wrong URL value while updating the dataSource in the radio button click. kindly ensure to give path of the dataSource  

2.       While updating the dataSource in promise.done, you returned the value in form of result and count. So use e.result.result to get the Items correctly. 

 

 

Regards, 

Vignesh Natarajan 

[Catalin Radoi]

Thanks, Vignesh, it works now.

There's still one problem, though. 

Initially, the data manager has a PageSize of 25, as stated in the grid (   .PageSettings(p => p.PageSize(25))), 

but after the new datamanager is created:

 var dm = ej.DataManager({ url: "Home/ResourcesDataSource", adaptor: new ej.UrlAdaptor() });

dm.Take is 0 now.

[Vignesh Natarajan]

Hi Catalin, 

Thanks for the update.  

We have analyzed your query and we have modified your sample to load more data on initial rendering. We are not able to reproduce the reported issue.  

Kindly download the sample from below link 

Sample:  https://www.syncfusion.com/downloads/support/forum/135931/ze/TwoDataSources_(2)-299600395  

Share the following details to reproduce the reported issue at our end. 

1.       Share the full grid rendering code (after modifying the dataSource) 

2.       How you have returned the values from the server. 

3.        Share the screenshot of the script error in the console window (if any) 

4.       If possible try to reproduce the reported issue in provided sample. 

Regards, 

Vignesh Natarajan 

[Catalin Radoi]

It is because I also have a databound event where I am hiding the Id Column:

eve => eve.DataBound("dataBound")

function dataBound() {

   var idColumn = this.getColumnByField("Id");

    idColumn.isPrimaryKey = true;

    idColumn.visible = false;

    this.columns(idColumn, "update");// ==> THIS LINE HERE is calling the "ResourcesDataSource" twice and second time with PageSize 0

}

[Catalin Radoi]

function dataBound() {

    this.hideColumns("Id");

}

now it is called only once. But I don't know how to declare the column Id as being PRIMARY KEY........

[Vignesh Natarajan]

Hi Catalin, 

 

Sorry for the inconvenience caused.  

 

Query: “THIS LINE HERE is calling the "ResourcesDataSource" twice and second time with PageSize 0” 

 

We are able to reproduce the reported issue in provided sample. The reported issue is due to when calling executeQuery method on radio button change event. You have passed only the additional parameter.  So in server side take value is zero for second time.  

 

Now we have modified the sample to pass the skip and take value to the server to fetch data from the server. 

 

Refer the below code snippet 

 

<script type="text/javascript"> 

    var flag; 

    function dataBound() { 

        this.hideColumns("Id"); 

    } 

    $(function() { 

        $("input[type=radio][name=resources]").change(function () { 

 

            //var grid = $("#ResourcesGrid").ejGrid("instance"); 

            var grid = $(".e-grid").ejGrid("instance"); 

            grid.commonQuery = ej.Query().addParams("resourceTypeId", this.id); 

            grid.refreshContent(); 

            flag = 0; 

            setTimeout(function () { 

                if (flag == "0") { 

                    var Obj = $("#ResourcesGrid").ejGrid("instance");  // get instance of the existing grid 

                    Obj.model.columns = []; // remove the columns 

                    var model = Obj.model; 

                    $("#ResourcesGrid").ejGrid("destroy");  // destroy the existing Grid 

                    $("#ResourcesGrid").ejGrid(model); // re render the Grid with new dataSource and old models. 

                    var grid = $(".e-grid").ejGrid("instance"); 

                    grid.refreshContent(); 

                    flag = 2; 

                } 

            },100) 

        }); 

    }); 

</script> 

 

 

Kindly download the modified sample from below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/135931/ze/TwoDataSources_(2)1852378806  

 

Regards, 

Vignesh Natarajan