1. Home
  2. Forum
  3. ASP.NET MVC
  4. Rebound Grid (Columns have changed)

Rebound Grid (Columns have changed)

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?

10 Replies
CR Catalin Radoi February 14, 2018 02:44 PM UTC

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'.

BM Balasubramanian Masilamani Syncfusion Team February 16, 2018 12:48 PM UTC

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. 


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

Regards, 
Balasubramanian Masilamani 



CR Catalin Radoi February 16, 2018 01:58 PM UTC

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)

CR Catalin Radoi February 19, 2018 09:21 AM UTC

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

VN Vignesh Natarajan Syncfusion Team February 19, 2018 12:44 PM UTC

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 
 
 
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 


CR Catalin Radoi February 19, 2018 02:09 PM UTC

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.



VN Vignesh Natarajan Syncfusion Team February 20, 2018 05:22 PM UTC

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 


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 


CR Catalin Radoi February 22, 2018 10:31 AM UTC

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
}

CR Catalin Radoi February 22, 2018 11:46 AM UTC

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........


VN Vignesh Natarajan Syncfusion Team February 23, 2018 04:59 PM UTC

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 
 
 
Regards, 
Vignesh Natarajan  


Loader.
Up arrow icon