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?
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
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!
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
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.
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.
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