Hi,
I am using columns.Select() in my grid template in order to be able to select multiple rows with the provided checkboxes. The checkbox in the header normally works well, allowing me to select or deselect all rows.
However, I have tried this same approach on a 'filterable' grid, and the column header checkbox no longer works. In this case, when I click on the checkbox, instead of toggling the selection, the grid attempts to filter on the 'select' column.
Is there anyway to turn off filtering for the select column only? I need filtering on the other columns, and I also need to be able to use the checkbox in the header of the 'select' column. Is this possible?
Thanks,
Ryan
5 Answers, 1 is accepted
I used the "Grid / Checkbox selection" demo as a base, and I added filtering to it:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>() .Name("Grid") .Columns(columns => { columns.Select().Width(50); columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Width(140); columns.Bound(p => p.UnitsInStock).Width(140); columns.Bound(p => p.Discontinued).Width(100); }) .Pageable() .Sortable() .Events(ev=>ev.Change("onChange")) .PersistSelection() .Filterable() .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.ProductID)) .Read(read => read.Action("Selection_Read", "Grid")) ))It seems that everything works okay on my side:
Having said that, could you please elaborate on the implementation of the Grid?
I look forward to hearing from you.
Regards,
Preslav
Progress Telerik
Rank 1
Hi Preslav,
Thanks for your response. Is it possible for me to use the same demo as a basis to do some experimenting? I have never created a dojo, and am assuming there must be a way to modify an existing baseline.
Anyway, please see my grid template below. A couple of differences between the demo and my code that may be affecting the behavior are:
- I have a nested grid to provide detail data for each row on the main grid.
- My grid is grouped using the hidden "Location" field.
Thanks,
Ryan
=========== Grid Template ============================
@(Html.Kendo().Grid<Level1VM>()
.Name("grid_level1")
.Filterable().Sortable().Scrollable()
.Pageable(pageable => pageable.PageSizes
(
new List<object> { 10, 20, 50, 100, 200, 500, "all" }).Refresh(true)
)
.Resizable(resizable => resizable.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(events =>
{
events.Edit("onEdit");
events.SaveChanges("onSaveChanges");
events.DataBound("onDataBound");
})
.Groupable()
.ToolBar(toolbar =>
{
toolbar.Save();
})
.ClientDetailTemplateId("level2")
.Columns(columns =>
{
columns.Select()
.Width(35);
columns.Bound(vm => vm.Location)
.Title("Joint")
.Hidden();
columns.Bound(vm => vm.Floor)
.Width(80)
.Title("Floor")
.HtmlAttributes(new { @class = "jdReadOnlyCell" });
columns.Bound(vm => vm.GridX)
.Width(80)
.Title("Grid X")
.HeaderHtmlAttributes(new { @class = "jdReadOnlyNumberHeader" })
.HtmlAttributes(new { @class = "jdReadOnlyNumberCell" });
columns.Bound(vm => vm.GridY)
.Width(80)
.Title("Grid Y")
.HeaderHtmlAttributes(new { @class = "jdReadOnlyNumberHeader" })
.HtmlAttributes(new { @class = "jdReadOnlyNumberCell" });
// additional columns removed for brevity
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Group(group => group.Add(e => e.Location))
.ServerOperation(true)
.Events(events => events.Error("onError"))
.Model(model =>
{
model.Id(vm => vm.LineID);
model.Field(vm => vm.Floor).Editable(false);
model.Field(vm => vm.GridX).Editable(false);
model.Field(vm => vm.GridY).Editable(false);
})
.Read("ReadLevel1", "LocationMngr", new { projectID = Model.ProjectID })
.Update("UpdateLevel1", "LocationMngr")
)
)
<script id="level2" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Level2VM>()
.Name("grid_level2_#=LineID#")
.HtmlAttributes(new { @class = "jdDetails" })
.Columns(columns =>
{
columns.Bound(vm => vm.LineName)
.Width(70)
.Title("Name")
.HtmlAttributes(new { @class = "jdReadOnlyCell" });
columns.Bound(vm => vm.Orientation_deg)
.Width(65)
.Title("Orient.")
.HeaderHtmlAttributes(new { @class = "jdReadOnlyNumberHeader" })
.HtmlAttributes(new { @class = "jdReadOnlyNumberCell" });
columns.Bound(vm => vm.Angle_deg)
.Width(55)
.Title("Angle<br />XY")
.HeaderHtmlAttributes(new { @class = "jdReadOnlyNumberHeader" })
.HtmlAttributes(new { @class = "jdReadOnlyNumberCell" });
columns.Bound(vm => vm.Slope_deg)
.Width(55)
.Title("Slope")
.HeaderHtmlAttributes(new { @class = "jdReadOnlyNumberHeader" })
.HtmlAttributes(new { @class = "jdReadOnlyNumberCell" });
// additional columns removed for brevity
})
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Model(model => model.Id(e => e.LineID))
.Read("ReadLevel2", "LocationMngr", new { lineID = "#=LineID#" })
)
.ToClientTemplate()
)
</script>
Thank you for elaborating on the exact implementation. I was able to replicate the issue.
To modify a demo, you will have to run our demos locally. To do that, follow these steps:
Further, about the issue, this is a bug, and I logged it here:
As a workaround, until the bug is fixed, recreate the thead on the client. For example, in the dataBound event handler:
.Events(e=>e.DataBound("onDataBound"))//...<script> function onDataBound(e) { e.sender.element.find("thead:first").html(''); e.sender._thead(); };</script>Finally, as a small token of gratitude for pointing us to the above bug, I updated your Telerik points.
Regards,
Preslav
Progress Telerik
Rank 1
Thank you, Preslav. I have added your workaround to my databound event, and it completely solves the issue.
BTW, would this bug be listed in the release notes for whatever release it is fixed in? I would like to remove the workaround once it is no longer needed.
Thanks again,
Ryan
I am glad to hear that the workaround worked.
About the issue, yes, it will be listed in the release notes. Besides, you could also subscribe to the GitHub issue from my last post. By doing this you will get a notification for any changes to the issue.
Regards,
Preslav
Progress Telerik