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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Text Aligned Center in Inline Form Template

Thread ID:

Created:

Updated:

Platform:

Replies:

128546 Jan 27,2017 02:59 PM UTC Feb 6,2017 10:20 AM UTC JavaScript 3
loading
Tags: ejGrid
Matt Abercrombie
Asked On January 27, 2017 02:59 PM UTC

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 [Syncfusion]
Replied On January 30, 2017 01:22 PM UTC

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:- 



Regards, 

Farveen sulthana T. 


Matt Abercrombie
Replied On February 3, 2017 04:46 PM UTC

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 [Syncfusion]
Replied On February 6, 2017 10:20 AM UTC

Hi Matt, 

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


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. 


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

;