MVC Kendo UI Grid - 100 + columns - asp.net-mvc

Question

I have a Kendo UI GRID (MVC) with 100+ columns.
Not all the columns are visible on load. The default columns visible are 10.
There are checkboxes on the page, next to the grid, which list all the columns. If you click on a checkbox, depending on whether it is checked or unchecked, the column appears or is hidden.
The trouble is that the grid takes almost 20 seconds to render, when the number of rows is also huge (and the time increases).
What is the best way to handle a large number of columns?

Answer 1

I think that bring all the 100 columns for a record is not the best way to work. Maybe you must most important information (10 column at max) for all the records and have a detailed view (with the rest of the information for the specific record you want to inspect)
If you want to see a more detailed example take a look here
my approach is the following
#(Html.Kendo().Grid<YOURCLASS>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.imporantColumn1);
columns.Bound(e => e.imporantColumn2);
columns.Bound(e => e.imporantColumn3);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_theBasicData", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
and a detailed template
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("tabStrip_#=ID#")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("details").Content(#<text>
#(Html.Kendo().Grid<YOURCLASS>()
.Name("grid_#=ID#")
.Columns(columns =>
{
// the order columns
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_theRestOfInfo", "Grid", new { ID= "#=ID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
})
.ToClientTemplate())
</script>