Hello, @anh34!
Yes, this approach is going to make it very heavy. Component columns works best with simple components or limited grids.
There are basically two approaches you can use to improve speed:
(1) Use an editor to show the components
(2) Paginate your grid to limit maximum number of components rendered at once.
There is a possible third I can think of, that's about limiting the buffered renderer to less components, but it will still be both very heavy to scroll around and in some circumstances you won't be getting the column components rendered at all, so better avoid this one. Actually, your grid has buffered renderer enabled by default, so if you give it a
.BufferedRenderer(false)
, you may see a performance increase for scrolling around big grids. But yet, that would be pretty far from best, as it would take a lot of resources to load the page alone.
I'll give you an example on how to get started with approach (1) above.
Just change each component column to simple
.Column()
, then the
.Editor()
will replace the
false value with whatever you defined within the
.Compoent()
part. And also, set up
RowEditor plug in in the grid.
As for one column example, this one:
cols.Columns.Add(Html.X().ComponentColumn().ID("BrithdayCol").Editor(true).Sortable(false).Width(125).DataIndex("Brithday").Text("Brithday").Component(
Html.X().DateField()));
Will become
cols.Columns.Add(Html.X().Column().ID("BrithdayCol").Sortable(false).Width(125).DataIndex("Brithday").Text("Brithday").Editor(
Html.X().DateField()));
And to the grid, you'll bind the RowEditor PlugIn:
.Plugins(Html.X().RowEditing())
You'll notice then your listener in view line 129 will no longer work. You'd have to move it within the RowEditing() plug in. Something like this should do, but it would become better to maintain if you define a funcion and use
ls.Edit.Fn = "myFunction" instead.
.Plugins(
Html.X().RowEditing()
.Listeners(ls => ls.Edit.Handler = @"var cb = item.cmp.getColumns().find(function(col) { return col.dataIndex == ""DepartmentId""; }).getEditor(); e.record.data.DepartmentName = cb.findRecordByValue(cb.getValue()).data.Name; e.view.refreshNode(e.record);")
)
As you can see, the one-liner above is very hard to read. Something like that would ease your life:
(...) in your page's <head /> section(...)
<script type="text/javascript">
var handleEdit = function (item, e) {
var cmp = item.cmp,
columns = cmp.getColumns(),
depCol = columns.find(function (col) { return col.dataIndex == "DepartmentId"; }),
depColCB = depCol.getEditor(),
view = e.view;
e.record.data.DepartmentName = depColCB.findRecordByValue(depColCB.getValue()).data.Name;
view.refreshNode(e.record);
}
</script>
(...) down to the listener in the RowEditor definition (...)
Html.X().RowEditing().Listeners(ls => ls.Edit.Fn = "handleEdit")
Click twice the row to start editing it. You can set it up for single click/tap.
This way you'll be benefiting your grid in two aspects:
- lighter and faster, as the components are drawn just when needed
- cleaner view, removing all the clutter of components frames, arrows, colors...
You will also need to adjust how the
Salary column is filled, but should not be too big an issue. Let us know if otherwise.
Well, I hope this helps!