Declined
Last Updated: 06 Feb 2020 09:25 by ADMIN
Freenzy
Created on: 04 Feb 2020 20:32
Category: UI for Blazor
Type: Bug Report
0
Blazor Grid doesn't show checkboxes

Hi!

 

I want to create a grid with multiselect options (controlled by checkboxes in the first column). I have used code from https://demos.telerik.com/blazor-ui/grid/selection but when i try this code in my project there are no checkboxes in the first column, just empty cells. Am i the only one with this problem?  

 

 

7 comments
ADMIN
Marin Bratanov
Posted on: 06 Feb 2020 09:25

Hello,

You are correct - you can use it as a template, but you must build your own stylesheet to use in your app.

In the sample app, the sass compilation and the minification of the resulting styles (basically, the stylesheet build) happen on every build of the app, that's how I configured the gulp task. You can do this manually or when necessary, I just felt that it fits as a build task to ensure that a human does not have to remember to do it. In the general case, it is needed only when you modify the content of the SASS files. It would also be good to do it when you upgrade the Telerik package to ensure that you will get the latest Telerik theme in there too.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Freenzy
Posted on: 05 Feb 2020 18:52

Thanky you for the clearification! I follow these steps https://github.com/telerik/blazor-dashboard/blob/master/README.md which gave me the newly generated styles.css and now checkboxes works like a charm So if i understood you correctly i am safe to use  dashboard sample app as a base app as long i build my own css file? Do I need to generate a new css everytime i change anything in application or only when i change scss files? I know these questions are not directly related to Telerik Blazor components, but I would really appreciate any help.

Thank you!

ADMIN
Marin Bratanov
Posted on: 05 Feb 2020 15:45

Hello,

The app-specific stylesheets in the dashboard sample app are the following SASS files: https://github.com/telerik/blazor-dashboard/tree/master/BlazorDashboard/sass. They do not contain these rules. In this app, these SASS files are combined with the Bootstrap SASS files and with the Telerik Bootstrap Theme SASS file to generate only one stylesheet for the entire app.

You must not use this stylesheet in a different app as-is, because it is customized for this particular app. If you want to achieve similar output (a single minified file), you can follow the information and guidance from the readme file: https://github.com/telerik/blazor-dashboard/blob/master/README.md and mimic a similar project setup in your app so you can build your own file.

The current styles from our bootstrap theme for the .k-checkbox class are quite more involved than that and if you want to use them, I advise that you follow this guidance instead of copying pieces of app styles: https://docs.telerik.com/blazor-ui/themes/form-elements#checkboxes

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Freenzy
Posted on: 05 Feb 2020 11:09

More specifically if i comment out section:

 

/*.k-checkbox {
    margin: 0;
    padding: 0;
    clip: rect(0,0,0,0);
    overflow: hidden;
    position: absolute;
    opacity: 0;
    -webkit-appearance: none;
    pointer-events: none
}*/

 

from styles.css checkboxes works. Do you have any idea what impact would this have? Sorry, i'm really bad at CSS.

Freenzy
Posted on: 05 Feb 2020 10:57
Do you have any idea what in styles.css could break checkboxes in datagrid?
Freenzy
Posted on: 05 Feb 2020 10:56

I figured it out. I use https://demos.telerik.com/blazor-dashboard-app/ DEMO project as a base project. When i comment out 

<link href="css/styles.css" rel="stylesheet" /> in _Host.cshtml, checkbox in datagrid starts working. 

ADMIN
Marin Bratanov
Posted on: 05 Feb 2020 10:42

Hi,

I am attaching here a sample project based on the demo that works fine for me and shows the checkboxes. Could you compare against it and see what is the difference causing the problem? Perhaps the theme registered in your project uses a specific version (not the latest) and that version is too old?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Attached Files: