Recreate the grid on demand

[Dinesh]

Here is our scenario:
We have a tree view control on the left with the list of document types and a grid control on the right that will list the documents (based on document type selection) with both inside a splitter control.When the users clicks on the document type, we want to recreate the grid because based on the document type the columns will change. 

For Example:
Document Type A will have columns Name, Type, Create Date, Attribute1, Attribute 2
Document Type B will have columns Name, Type, Create Date, Attribute6, Attribute 7, Attribute 8, Attribute 9
Document Type C will have columns Name, Type, Create Date, Attribute5

Problem:
When we click on the document type, the old column still exists and the new columns are not created but the data gets refreshed.

Questions:
1) What is the best option for our scenario?
2) Is there a way to destroy and recreate grid on demand?
3) If we have to destroy and recreate every time the users click on the document type, will that impact performance?

Here is  the code to create grid:
@model System.Data.DataTable

@(Html.Kendo().Grid(Model)
    .Name("DocumentGrid")
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.ColumnName).Groupable(column.ColumnName != "Id").Title(column.Caption).Hidden(column.ColumnName == "Id");
        }
    })
    .Pageable()
    .Sortable()
    .Navigatable()
    //.Scrollable()
    .Filterable()
    .Groupable()
    .ColumnMenu()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    model.Field(column.ColumnName, column.DataType);
                }                
            })
        .Read(read => read.Action("GetDocuments", "Controller"))
        .PageSize(20)
    )
)

Here is the code the create the tree view:
@helper RenderTreeView()
{
    @(Html.Kendo()
          .TreeView()
          .ExpandAll(true)
          .Name("treeview")
          .DataTextField("Text")
          .Events(events => events
                                  .Select("onChange"))
          .BindTo(Model, mappings =>
          {
              mappings.For<Test.Models.AllDocumentType>(binding => binding
                                                                                     .ItemDataBound((item, AllDocumentType) =>
                                                                                     {
                                                                                         item.Id = AllDocumentType.Id;                                                     
                                                                                         item.Text = AllDocumentType.Text;                        
                                                                                     })
                                                                                     .Children(AllDocumentType => AllDocumentType.DocumentTypes));
              mappings.For<Test.Models.DocumentType>(binding => binding
                                                                                  .ItemDataBound((item, DocumentType) =>
                                                                                  {
                                                                                      item.Id = DocumentType.Id.ToString();
                                                                                      item.Text = DocumentType.Name;
                                                                                  }));
          })                     
    )
}

Here is the onchange event:
function onChange(e) {
        var data = treeview.dataItem(e.node);
        
        $.post('@Url.Action("DocumentGrid", "Collector")', {
            id: data.id
        }, function (data) {
            var grid = $("#DocumentGrid").data("kendoGrid");
            grid.dataSource.read();            
        });
    }; 

Thanks,

[Atanas Korchev]

Hello,

 The only option to recreate the grid is to do it on the client side:

1. Call the destroy method of the grid
2. Empty the grid element
3. Create a new grid

Here is a live demo: http://jsbin.com/iyukiv/1/edit

Greetings,
Atanas Korchev
the Telerik team

[Dinesh]

Hello Atanas,
Thank you for the information. I will try what you have suggested.
I just have one more question. Since i am using the splitter control, is there a way to refresh the right pane that contains the grid when user clicks the tree view on the left pane?

Thanks

[Atanas Korchev]

Hi,

 You can use the ajaxRequest method to reload a splitter pane.

Kind regards,
Atanas Korchev
the Telerik team

[Dinesh]

Thank you for the tip. The ajaxRequest method works. I was able to reload the pane with the grid so i didn't have to destroy and recreate the grid. The reload takes care of that.

[Bryan]

Atanas,

I work with Dinesh, so this is a follow-up question.  We are now trying to persist grid and column settings, and it seems that I cannot access the grid's datasource when it is in a separate partial view.  I tried to move the grid into the same view, but then there are many other problems with trying to destroy, recreate, and re-populate the grid and hide columns and whatnot, so I was curious if there is some way I am not aware of to access the grid's datasource (in a partial view) from the parent view to push it back to the controller.  Any ideas on how to accomplish this?

Thanks,
Bryan

[Atanas Korchev]

Hi,

 Why can't you access the grid data source? It is exposed via the dataSource field.

Regards,
Atanas Korchev
Telerik

[Bryan]

I can access the dataSource of the grid when it is in a partial view, but all the properties are always: 
page: 1, pageSize: 0, sort = null, group = null, filter = null.  

When I moved the grid back to the parent, I could see all of the real data in the datasource, but when it is in a partial, I get the above values.

The jquery/javascript is in the parent view (it doesn't seem to pick it up if it is in the partial).  

I don't see the actual page when I view the source from the browser.  It doesn't seem to inline it.

[Atanas Korchev]

Hello,

 I am not sure I understand what the exact problem is. Could you provide the code you are currently using? 

 The browser displays only the HTML rendered by the server. Any dynamic HTML is not shown. You need to use the developer tools of your browser to inspect the live DOM.

 On a side note the state of the datasource by default is page: 1, pageSize: 0, sort = null, group = null, filter = null.  

Regards,
Atanas Korchev
Telerik

[Bryan]

I will put something together.  Thanks!

[Bryan]

Here is a quick demo of what I am talking about.  The method on the HomeController is "SaveGridSettings".  

[Atanas Korchev]

Hello Bryan,

Your code looks correct (I couldn't test it though because it is not a complete application). What exactly happens when the document_gridOnDataBound function gets executed? Have you tried debugging it? Is the grid reference valid? You can check that using the debugger which is part of your browser's developer tools.

Regards,

Atanas Korchev
Telerik

[Bryan]

Ah,  found the "Pause on all exceptions" toggle.  It is failing in jquery.min.js somewhere.  I'm not really sure how to fix it, though:

"Error: An invalid or illegal string was specified.
    at Function.st [as find] (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:4:6060)
    at b.fn.extend.find (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:4:20941)
    at b.fn.b.init (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:1154)
    at b (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:206)
    at HTMLTableElement.b.event.handlers (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:28766)
    at HTMLTableElement.b.event.dispatch (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:28046)
    at HTMLTableElement.v.handle (http://localhost:34166/Scripts/kendo/2013.1.319/jquery.min.js:3:25042)"

[Atanas Korchev]

Hi,

 We are not sure how to fix this either. We recommend opening a support ticket and attaching a runnable version of your project which replicates the problem. Once we reproduce it locally we would get back with a solution.

Regards,
Atanas Korchev
Telerik