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

"Select" column appearing in header, but NOT in rows

11 Answers 463 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ACE
Top achievements
Rank 1
ACE asked on 22 Aug 2017, 09:15 AM

Hi,

I have a very simple grid that binds to a object List collection property of my model:

@(Html.Kendo().Grid<ObjectBO>()
.Name("ObjectGrid")
.BindTo(Model.ObjectBOList)
.Columns(columns =>
{
columns.Select().Width(40);
columns.Bound(obj => obj.Id).Hidden();
columns.Bound(obj => obj.Description);
})

Whilst it displays and binds fine, the SELECT column only shows the "SELECT" checkbox in the column header (i.e. to select all rows) it does not show the individual checkboxes on the rows themselves against the items.

It works fine if I use the datasource property of the grid (rather than "BindTo")and get the same data via a datasource request, but this isn't really my preferred method because it will involve another DB call. I'd rather use the model collection,

Any ideas why this is happening?

Not sure if it's relevant, but the grid is displayed inside a Kendo Window shown modally.

Many thanks!

 

11 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 23 Aug 2017, 12:29 PM
Hello Ace,

This is, unfortunately, a known issue in the Grid, which is logged here:
Select column does not render checkbox for Server-bound Grid

You can follow the GitHub issue to see when it gets scheduled for implementation. In the meantime, you could try achieving this using a template to display checkboxes and do manual selection when they are toggled.

Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
ACE
Top achievements
Rank 1
answered on 23 Aug 2017, 12:59 PM
Great thanks for the info. Just out of interest, is there a similar issue with the NO RECORDS template message not displaying on a server bound collection? I am also encountering this too.

Have had to resort to using razor with the model and some UX to sort these elements as the Grid can't give me what I need which is disappointing!
0
Tsvetina
Telerik team
answered on 25 Aug 2017, 09:57 AM
Hi Adam,

Yes, this is a limitation of the NoRecords template. It is is processed after dataSource.read() call but when server binding is applied, the read() method is not called and the template is not rendered. Currently the NoRecords is supported with Ajax binding for the Grid only.

It is possible to show a message using CSS like this:
<style>
    #Grid .k-no-data td:before {
    content: 'No data to display.';
    display: table-cell;
    padding: 0.5em;
}
</style>


Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kevin
Top achievements
Rank 1
answered on 03 Dec 2018, 12:36 PM

Hello,

Has there been any progress on this issue?

0
Tsvetina
Telerik team
answered on 05 Dec 2018, 11:32 AM
Hi Kevin,

The select column works as expected in recent versions of Kendo UI. The issue has been fixed at the end of 2017, so you should be able to use a select column in a server-bound Grid with any of the 2018 releases.

Regards,
Tsvetina
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
Guillaume
Top achievements
Rank 1
answered on 25 May 2020, 01:55 PM

Hello,

I have this very same issue after upgrading from 2019 to 2020 R2. I'm really not sure what created this change. I am simply using column.Select()

When I debug the HTML in Chrome, I see there is an input with id + label when using the old version. With the new version there is only an input, no id.

0
Tsvetomir
Telerik team
answered on 27 May 2020, 09:13 AM

Hello Guillaume,

It is correct that the checkbox rendering has been changed with the recent versions. This is due to the fact that until recently the browsers did not allow for modifying the appearance of the checkbox elements and we used a label with hidden input to provide a good looking checkbox. Since the browsers support customizations now, we migrated and only a checkbox is used. 

What I can recommend is that you ensure that all of the styles and scripts versions are updated to the latest version. It is mandatory for the checkbox to have the latest styles otherwise it will remain hidden.

Let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Guillaume
Top achievements
Rank 1
answered on 27 May 2020, 01:31 PM

Hi Tsvetomir,

Thanks for your reply. I think I fixed all the kendo styles now and the checkboxes do appear in Edge, but in Chrome they are displaying strangely. When I debug it seems that the width:auto from our Bootstrap.css wins and causes the problem. If I deactivate it, they appear correctly. I might have to do a custom override, unless you have another suggestion?

Thanks again,

-Guillaume

 

0
Tsvetomir
Telerik team
answered on 29 May 2020, 11:48 AM

Hi Guillaume,

Based on the provided information, I cannot be sure what might be causing the issue as I do not know the CSS specificity for each of the two styles. Furthermore, the appearance of the checkbox elements should be the same across all browsers. What I can recommend is that you manually clear the cache of Chrome (ctrl + F5 or incognito not always work out).

Contact me if the issue is present. 

 

Kind regards,
Tsvetomir
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Elvis
Top achievements
Rank 1
answered on 30 Oct 2020, 10:11 AM

Hello, 

I also facing the same issue. The checkbox is invisible. Only header can see the checkbox

.Columns(a =>
{
    a.Select().Width(50);

}

0
Tsvetomir
Telerik team
answered on 02 Nov 2020, 02:41 PM

Hi Elvis,

Thank you for the provided screenshots. Can you confirm that the version of the styles and the scripts is the latest one? Also, after upgrading the version, remove the cache of the browser and perform a full refresh with the ctrl + F5 combination.

In our live demo, it can be observed that the checkbox column should be visible:

https://demos.telerik.com/aspnet-core/grid/checkbox-selection

Contact me if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Stephen
Top achievements
Rank 1
commented on 21 Dec 2021, 08:45 PM

I'm having the same issue Elvis was experiencing, where I can see the header checkbox, but I don't see each row's checkbox while in Chrome. (998185 (100×443) (telerik.com))

Has there been a solution for this issue since they last asked?

NOTE: I'm currently on Telerik version 2021 R2.

Tsvetomir
Telerik team
commented on 23 Dec 2021, 08:08 AM

Could you ensure that the client-side resources of the project are update to R2 2021 as well? The CSS and JavaScript resources are usually configured in the _Layout file. After ensure that they are up-to-date, make sure that the browser has not cached any CSS/JavaScript files and refresh the page. 

Let me know if the issue persists.

Tags
Grid
Asked by
ACE
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
ACE
Top achievements
Rank 1
Kevin
Top achievements
Rank 1
Guillaume
Top achievements
Rank 1
Tsvetomir
Telerik team
Elvis
Top achievements
Rank 1
Share this question
or