Grid Edit button suddenly gets primary styles

2 Answers 73 Views
Grid Styling
Maik
Top achievements
Rank 1
Maik asked on 08 Sep 2023, 07:36 AM | edited on 11 Sep 2023, 06:18 AM

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

Sort by
0
Accepted
Alexander
Telerik team
answered on 13 Sep 2023, 05:54 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Frank
Top achievements
Rank 1
Iron
commented on 07 Dec 2023, 07:51 AM

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

Alexander
Telerik team
commented on 08 Dec 2023, 05:12 PM

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.


 

0
John
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 29 Dec 2023, 04:51 PM

I plan on using the css above myself but you could also just remove the class with jquery.

 

Alexander
Telerik team
commented on 02 Jan 2024, 01:38 PM

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:

Tags
Grid Styling
Asked by
Maik
Top achievements
Rank 1
Answers by
Alexander
Telerik team
John
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or