This is a migrated thread and some comments may be shown as answers.

Recreate the grid on demand

13 Answers 454 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dinesh asked on 29 Apr 2013, 07:20 PM

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,

13 Answers, 1 is accepted

Accepted

answered on 29 May 2013, 02:51 PM

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

answered on 30 May 2013, 02:22 PM

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