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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Modify Edit Dialog Style

Thread ID:

Created:

Updated:

Platform:

Replies:

129402 Mar 16,2017 03:33 AM UTC Mar 17,2017 10:58 AM UTC ASP.NET Web Forms 1
loading
Tags: Grid
R Klein
Asked On March 16, 2017 03:33 AM UTC

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 [Syncfusion]
Replied On March 17, 2017 10:58 AM UTC

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. 
 
 
Regards,  
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;