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

columns.Select() not working well with filterable Grid

5 Answers 257 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 06 Aug 2018, 06:10 PM

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

Sort by
0
Preslav
Telerik team
answered on 07 Aug 2018, 09:57 AM
Hello Ryan,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ryan
Top achievements
Rank 1
answered on 07 Aug 2018, 04:52 PM

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>

0
Accepted
Preslav
Telerik team
answered on 08 Aug 2018, 11:19 AM
Hi Ryan,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ryan
Top achievements
Rank 1
answered on 08 Aug 2018, 03:20 PM

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

0
Preslav
Telerik team
answered on 09 Aug 2018, 07:20 AM
Hello 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Ryan
Top achievements
Rank 1
Share this question
or