[Solved] changing grid buttons css style in "inform" or "popup"

[mahmoud]

Dear Teleriks, 
Is there anyway to change the accept and reject buttons' style  in "inform" or "popup" mode?

[Dimo]

Hello Mahmoud,

The buttons in the Grid edit form can be customized with external CSS. The HTML output of the 3 types of edit forms is different, so you can use different CSS selectors to target the 3 cases:

inline

.t-grid .t-grid-edit-row td.t-edit-container .t-button { }


inform

.t-grid .t-grid-edit-row div.t-edit-form-container .t-button { }


popup

.t-window .t-edit-form-container .t-buton { }


Also take a look at the buttons help article:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-buttons.html


Best wishes,
Dimo
the Telerik team

[mahmoud]

Thanks but 2 problems,
I did like this :

.t-grid .t-grid-edit-row div.t-edit-form-container .t-button 
{
    float:left;
    display:inline-block;    
}

but it caused all other buttons inside the "inform" to be put in left side!
also how can I change the inner text? just jquery??
thanks in advance

[Dimo]

Hello Mahmoud,

Button's text can be changed manually with Javascript or by means of localization:

http://demos.telerik.com/aspnet-mvc/grid/localization

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-localization.html

As for the CSS question - t-button is the most general CSS class that is used by all buttons. Instead, you can use a more specific CSS class to target specific buttons, for example

t-grid-edit
t-grid-delete
t-grid-update
t-grid-cancel

The above classes are applied on the same element as t-button. Have you inspected the Grid HTML output with Firebug? It may provide a lot of relevant information how to construct your CSS rules.

All the best,
Dimo
the Telerik team

[mahmoud]

Thanks! It solved by your guidance :-)