We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom CSS on Edit Dialog

I have a simple edit dialog containing a dropdown menu and the Save and Cancel buttons. I am trying to change the color of the Save button to match the website's theme and also the blue shadow around the dropdown menu when it has focus. Following the documentation to customize the edit dialog I am able to change the header text and dialog height in the ActionComplete method like in the example but I haven't been able to find any documentation of other dialog elements. Which elements do I need to target to style the buttons and dropdown menu?


3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 19, 2019 05:24 AM

Hi Taylor, 

Thanks for contacting Syncfusion support. 

We have validated your requirement. You can customize the buttons and dropDownList using the below way. 
Please find the below code snippet for more information. 

Index.cshtml 
 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).ActionComplete("actionComplete").AllowPaging(true).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").EditType("dropdownedit").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "cancel"}).Render() 
 
<script> 
    function actionComplete(args) { 
        if (args.requestType === 'add' || args.requestType === 'beginEdit') { 
            var buttons = args.dialog.element.getElementsByTagName('button'); 
            buttons[1].style.color = 'Black'; 
            buttons[1].style.backgroundColor = 'White'; 
        } 
    } 
</script> 
 
<style> 
    .e-gridform .e-rowcell .e-float-input.e-input-focus 
    { 
        border-color: #b54545 !important; 
    } 
   .e-dropdownbase .e-list-item.e-active,.e-gridform .e-dropdownbase .e-list-item.e-active.e-hover { 
        background-color: #b54545 !important; 
    } 
</style> 

Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 



TT Taylor Tillman July 19, 2019 08:50 AM

Hi Thavasianand,

That worked for me. Thanks.

Taylor


TS Thavasianand Sankaranarayanan Syncfusion Team July 21, 2019 11:26 PM

Hi Taylor, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand S.  


Loader.
Live Chat Icon For mobile
Up arrow icon