Text Aligned Center in Inline Form Template

[Matt Abercrombie]

When using an inline form template, all of the text boxes are generated with a text-align value of center, which I cannot figure out a way to override.

Here is a simple example:

http://jsplayground.syncfusion.com/uueot2x0

Note how when inspecting the element, the "text-align: center" is set at the element level, along with a specified height. Please advise as to how to change the text alignment.

Thanks,

Matt

[Farveen Sulthana Thameeztheen Basha]

Hi Matt, 

Thanks for your interest in syncfusion support. 

You can override the editForm input type element’s text-Align  by using “actionComplete” event. In the actionComplete event, you can get the class of the input type element and apply  the textAlign property to that class.  

Please refer to the code example:- 

 

<div id="Grid"></div> 

     <script type="text/javascript"> 

        $(function () { 

            // the datasource "window.gridData" is referred from jsondata.min.js 

            var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)); 

            $("#Grid").ejGrid({ 

                dataSource: data, 

                allowPaging: true, 

                editSettings: { 

                allowAdding: true, allowEditing: true, editMode: ej.Grid.EditMode.InlineTemplateForm, inlineFormTemplateID: "#problemEntry" }, 

                actionComplete: 'complete', 

                columns: [ 

                         { field: "OrderID", headerText: "Order ID", width: 75 , textAlign: ej.TextAlign.Right }, 

                         { field: "CustomerID", headerText: "Customer ID", width: 80 }, 

                         { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right }, 

                          

                ], 

              actionComplete: function (args) { 

                $(".e-pagercontainer.e-template").css('border-style', 'none'); 

                $(".form").css('textAlign','left'); 

                } 

 

            });      

        }); 

       <script type="text/x-jsrender" id="problemEntry"> 

    <input type="text" class="form" /> 

   </script> 

Please refer to the modified sample:- 

http://jsplayground.syncfusion.com/t5fxlnj3 

Regards, 

Farveen sulthana T. 

[Matt Abercrombie]

That indeed works, but is there no way to avoid all template auto-styling / modifications? I would like to point to a template and have full control over styling and content, including my own submit/cancel buttons. I would like it if nothing was generated for me.

[Ragavee U S]

Hi Matt, 

We have achieved your requirement to render the user defined template as such in the grid edit form using JsRender.  

Demo Sample: http://jsplayground.syncfusion.com/nr3t5ceu 

In the above sample, using the actionComplete event of the Grid, we have rendered the explicit template and have replaced the default form template with that of the user defined template. Please refer to the below code example. 

<script type="text/javascript"> 

    var temp = $.templates(problemEntry); 

    $(function () { 

        // the datasource "window.gridData" is referred from jsondata.min.js 

        var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)); 

        $("#Grid").ejGrid({ 

            actionComplete: 'complete', 

            editSettings: { allowAdding: true, allowEditing: true, editMode: ej.Grid.EditMode.InlineForm }, 

            . . . 

            actionComplete: function (args) { 

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

                    var datarow = args.requestType == "add" ? args.data : args.rowData;//get the row data 

                    $("#GridEditForm").html(temp.render(datarow)); 

                    //$("#GridEditForm #test").ejNumericTextbox({ width: "116px", height:"34px", decimalPlaces: 2 });//rendering the input element to required control if needed 

                } 

            } 

        }); 

    }); 

</script> 

Regards, 

Ragavee U S.