I am in the Process of updating to the latest Kendo version in our Asp core project.
Our previous version was 2023.1.117. I wanted to update to 2023.2.829.
Previosly all grid Command buttons where just the default grey in the bootstrap 4 theme.
Now the edit buttons have the primary style.
Since our product allows the user to change some colors the blue doesnt fit all the time.
Is there a way to change the primary styling at runtime?`
Maybe globally, because some other smaller compoents have the primary too but those blue accents where not that intrusive.
2 Answers, 1 is accepted
Hi Maik,
Thank you for sharing such exhaustive details in regard to the observed behavior before and after the upgrading endeavor you have embarked. I really appreciate it.
Generally, the most straightforward way of altering the existing themes would be to edit the existing theme file or induct the following set of rules in order to apply the gray styling to the buttons:
<style>
.k-button-solid-primary {
border-color: gray !important;
color: white;
background-color: gray !important;
}
.k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
border-color: gray !important;
background-color: #0069d9;
}
.k-button-solid-primary:focus, .k-button-solid-primary.k-focus {
box-shadow: 0 0 0px 0.25rem rgba(0, 123, 255, 0.5);
}
.k-button-solid-primary:active, .k-button-solid-primary.k-active {
border-color: #005cbf;
background-color: gray !important;
}
.k-button-solid-primary.k-selected {
border-color: #005cbf;
background-color: gray;
}
</style>This should then produce the following result:
Additionally, the SASS themes also rely on variables and you can customize them as well. You can review the relevant documentation on the following link where several mechanisms have been described in order to achieve the alteration of the themes on a more global scale:
Please, give these suggestions a try and let me know how it works out for you. If more assistance is required, I would be more than happy to help.
Kind Regards,
Alexander
Progress Telerik
Rank 1
Iron
I have a small question about this topic, since we are facing the same issue. Is there a way to remove the color from the edit button of the grid?
And i do not talk about changing the primary button style. I want a primary button to look like a primary button and the edit button in the kendo grid as normal button.
Best way for us would be some kind of sass variable we can set to accomplish this. Otherwise we have to overwrite the .k-grid-edit-command class
Hi Frank,
At this stage, the majority of pre-selected variables are outlined in the following section which you might find helpful in this regard:
Additionally, I have looked through the provided variables and did not manage to find an autonomous variable for the edit command in particular. Regardless, you can utilize the following appearance demo as an anchor point:
Observe the applied styles. You can then apply the styling options you find suitable into the ".k-grid-edit-command" class in order to alter its appearance.
Rank 2
Iron
Iron
Veteran
I plan on using the css above myself but you could also just remove the class with jquery.
Hi John,
Happy New Year! I wish all the best to you and your family. In fact, to everyone involved in this thread as well.
While you can programmatically, omit the utilized primary class for the edit command button, you should still be wary of scenarios where the Grid is placed into:
- Edit mode
- Cancelation mode
- Rebound
With that in mind, should you decide to proceed with such an approach, my recommendation would be to explicitly handle the DataBound, Cancel, and Edit events and employ the following logic:
.Events(events => events.DataBound("onDataBound").Cancel("onCancel").Edit("onEdit"))
<script type="text/javascript">
function onDataBound(e){
$(e.sender.element).find(".k-grid-edit-command").removeClass("k-button-solid-primary");
}
function onCancel(e){
setTimeout(function(){
$(e.sender.element).find(".k-grid-edit-command").removeClass("k-button-solid-primary");
})
}
function onEdit(e){
$(e.sender.element).find(".k-grid-save-command").removeClass("k-button-solid-primary");
}
</script>
This would then produce the following result:
For your convenience, here is a Telerik REPL example that showcases the abovementioned approach: