hi,
can you please tell me how to apply bootstrap table style,i.e table-primary,table-secondary...,please see the below：
<table class="table-primary">...</table>
<table class="table-secondary">...</table> <table class="table-success">...</table> <table class="table-danger">...</table> <table class="table-warning">...</table> <table class="table-info">...</table> <table class="table-light">...</table> <table class="table-dark">...</table>
the grid i am using is descripted as below web page:https://www.telerik.com/kendo-angular-ui/components/grid
thank you.
david
2 Answers, 1 is accepted
Hi David,
The developer can directly add the mentioned bootstrap contextual classes to the Grid rows by implementing the approach from the following article that suggests using the rowClass function:
Here is also a StackBlitz example demonstrating the results from the above suggestion:
In this line of thought, I want to mention that since the built-in styling of the Grid comes from our Kendo Themes, we provide a Bootstrap theme that matches the Bootstrap 4 styling. In addition, all Kendo Themes can be customized per the developer's preference, including the colors.
So, instead of manually setting classes that apply certain colors like the mentioned ones (which in turn will override the built-in colors), the developer can customize the colors of the theme globally by modifying the corresponding color variables. More information about customizing the Kendo UI Bootstrap theme can be found in the below article from our Design System documentation:
I hope the provided information is helpful.
Regards,
Zornitsa
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi David,
When I open the linked example, the suggested styling for the Grid rows is applied as expected on my side. Here is a screenshot for reference:
With the above being said, please ensure that the Bootstrap CDN is contained in the index.html file and is correctly loaded in the example since it is needed to recognize the applied contextual classes:
<head>
<title>Kendo UI for Angular Example Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-main.css"></link>
</head>
<body>
<my-app>
<span class="k-icon k-i-loading" style="color: #ff6358"></span>
</my-app>
</body>You can also verify if the Bootstrap CSS file was successfully loaded in the Network tab of the browser's Developer Tools and inspect the network requests:
Please check out the above suggestions and let me know how it goes.
Regards,
Zornitsa
Progress Telerik
Rank 1
Iron
hi Zornitsa,
following your suggestion, changed my index.html here:
then rowClass works fine.
i changed the bootstrap version to 5.3.3:
the issue came out again.
i think it should be bootstrop version.
i am using kendo ui 16.11.0 vs bootstrap 5.3.3.
can you please tell me which bootstrap version should i use?
thank you very much.
Rank 1
Iron
let me upload my package.json,angular.json and style.scss
thank you .
Rank 1
Iron
hi
please any update on this issue?
Hi David,
Thank you for the additional clarifications provided.
Indeed, when adding the mentioned classes with Bootstrap v5.3.3, the respective colors are not applied to the Grid rows as in the scenario using the previous version.
On that note, it seems that the issue is caused due to some significant changes in how the classes are being handled in Bootstrap 5. What I mean is that according to the documentation of Bootstrap v5.3.x, the contextual classes will correctly apply the associated colors to the table rows only when the <tr> elements are contained in a <table> parent element that has the `.table` class set:
With the above being said, in order for the `.table-primary` and `.table-success` Bootstrap contextual classes to actually have an effect on the Grid rows in the current scenario, the developer can manually add the `.table` class to the internal <table> element of the Grid:
public ngAfterViewInit(): void {
const gridTable = document.querySelector(".k-grid-content table");
if (gridTable) {
gridTable.classList.add("table");
}
}For demonstration, here is a StackBlitz example using Bootstrap v5.3.3, in which the above suggestion is implemented and the respective colors are applied to the Grid rows as expected:
Alternatively, a more straightforward approach that I would recommend for this particular case is for the developer to add custom classes to the Grid rows and apply the desired background colors with some custom CSS declarations, instead of relying on the Bootstrap contextual classes:
public rowCallback = (context: RowClassArgs) => {
if (context.dataItem.UnitPrice <= 0) {
return 'my-table-primary'
} else {
return 'my-table-success'
}
};#my-grid .my-table-primary{
background-color: #cfe2ff;
}
#my-grid .my-table-success{
background-color: #d1e7dd;
}Below is a StackBlitz example, illustrating the results from the second approach as well:
I hope the provided information sheds some light on the matter.
Regards,
Zornitsa
Progress Telerik
Rank 1
Iron
hi Zornitsa
the below codes worked very well:
public ngAfterViewInit(): void {
const gridTable = document.querySelector(".k-grid-content table");
if (gridTable) {
gridTable.classList.add("table");
}
}
but i have another qurestion,how to set the table border?
i used the below codes .it does not work.
gridTable.classList.add("table");
gridTable.classList.add('table-hover');
gridTable.classList.add('table-bordered');
gridTable.classList.add('border-primary');
please have a look.
btw,i feel it is hard to control genrated html table class (including table ,thead,tbody,tr td...).
it would be better to provide some apis to let me control the css name s(or css styles )directly?
thank you.
Hi David,
You are correct, it is indeed a bit complicated to style the Grid rows by manually applying Bootstrap contextual classes since they are provided by an external framework and are not native to the Grid component.
In this line of thought, what we recommend for styling the rows of the Grid is utilizing the built-in rowClass functional callback of the component, which allows the developer to add custom CSS classes for the rows as preferred. The defined custom classes can then be used in suitable selectors for applying the desired CSS declarations to the Grid rows, e.g. setting specific color, background color, border, padding, and others.
For more details about the recommended approach for styling the rows of the Grid and how to use the rowClass function, please refer to the following article from our documentation:
Here is also a StackBlitz example that demonstrates how to apply some CSS customizations to the Grid rows by using the custom classes defined through the rowClass function:
For further reference, the Grid component also provides various other built-in approaches for styling individual cells and columns that can be utilized appropriately as per the requirements of the application:
- https://www.telerik.com/kendo-angular-ui/components/grid/styling/columns
- https://www.telerik.com/kendo-angular-ui/components/grid/styling/columns
I hope the provided information is helpful.
Regards,Zornitsa
Progress Telerik
Rank 1
Iron
hi Zronitsa,
the issue was reslvoed, thank you very much.
br
David