Modify Edit Dialog Style

[R Klein]

How can I change the style of the edit dialog? Currently the styles are being overwritten with inline styles. The really strange thing is that some input fields have the text-align property set to "left" and some are set to "center" even though the input fields are configured the same within the template.

Here is the html that goes with the elements shown in the attached image:

This input field: <input id="MAIL_ADDRE" name="MAIL_ADDRE" value="{{:MAIL_ADDRE}}" class="e-field e-ejinputtext" style="width: 210px; height: 28px" /> get's an inline style of text-align: left;

And this field: <input id="EMER_CONT" name="EMER_CONT" value="{{:EMER_CONT}}" class="e-field e-ejinputtext" style="width: 210px; height: 28px" /> get's an inline style of text-align: center;

Thank you in advance!

Attachment: Capture_7cb78847.7z

[Seeni Sakthi Kumar Seeni Raj]

Hi Klein,  

 

Thanks for contacting Syncfusion Support.  

 

We are able to reproduce the problem at our end. By default, the fields in the Edit form (dialog/dialog template), will be aligned based on the TextAlign property of the Grid Columns. If you have assigned ‘Center’ to the TextAlign property of the respective column, the same has been applied to the EditForms of the Grid.  

 

If you would like to change the alignment for the Editing fields alone, you can change the text-align property of the respective column in ActionComplete event of the Grid. Refer to the following code example. 

 

 

@{Html.EJ().Grid<object>("Grid") 

            .Datasource((IEnumerable<MVCSampleBrowser.Models.EditableOrder>)Model) 

            .EditSettings(edit => 

            { 

                edit.AllowAdding() 

                    .AllowDeleting() 

                    .AllowEditing() 

                    .EditMode(EditMode.DialogTemplate) 

                    .DialogEditorTemplateID("#template"); 

            }) 

 

            .Columns(col => 

            { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add(); 

                //Frieght column aligned center 

                //Likewise Editform field also 

                col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Center).Add(); 

            }) 

            .ClientSideEvents(events => events.ActionComplete("complete")) 

        .Render(); 

} 

 

<script> 

    function complete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            if (args.requestType == "beginedit") 

                $("#OrderID").attr("disabled", "disabled"); 

            $("#Freight").css("text-align", "left")//align the fields; 

        } 

    } 

</script 

 

We have prepared a sample that can be referred from the following jsPlayground. 

 

http://jsplayground.syncfusion.com/jssvmwh0 

 

Regards,  

Seeni Sakthi Kumar S.