Custom CSS on Edit Dialog

[Taylor Tillman]

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?

[Thavasianand Sankaranarayanan]

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. 

[Taylor Tillman]

Hi Thavasianand,

That worked for me. Thanks.

Taylor

[Thavasianand Sankaranarayanan]

Hi Taylor, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.