InlineFormTemplate Grid Template Override styles

[Nestor Ochoa]

Hi There.

Just following the examples that you can find on the grid for .NET web forms. I just find out that when you use inline form templates, the library sets some styles overriding the stylesheet. as style="text-align: center; width: 100%; height: 32px;"

   <script id="templateVehicle" type="text/template">

        <div class="main-container inside">

            

                <div class="s-block-w">

                    <div class="fieldEj">

                        <span class="lbl">Make & Model:</span>

                        <input type="text" class="textbox" style="width:auto" />

                    </div>

               </div>

     </div>

</script>

<ej:Grid ID="GridVehicles" runat="server"  AllowResizeToFit="true" SelectionType ="Single" >

                <EditSettings AllowAdding="true" EditMode="InlineFormTemplate"  InlineFormTemplateID="#templateVehicle" />

                <ClientSideEvents RowSelected="vehicle_selected" ActionComplete ="complete"/>

                <ToolbarSettings  ShowToolbar="true" ToolbarItems="add,cancel" ></ToolbarSettings>

                <Columns>

                    <ej:Column  Field="VehicleCode" Visible="false"></ej:Column>

                    

                </Columns>

            </ej:Grid>

How can I remove or not allow this style sets on my form when I'm trying to add an element.

Thanks in advance.

Nestor Ochoa

[Vignesh Natarajan]

Hi Nestor, 

 

Thanks for using Syncfusion support. 

 

Query: “How can I remove or not allow this style sets on my form when I'm trying to add an element.”  

 

From your query, we understand that you are facing issue with the style applied to input element in inlineformtemplate. We are able to reproduce the reported behavior at our end. To overcome the reported query, we suggest you to remove the style applied to input element in the ActionComplete event of ejGrid.  

 

Refer the below code example 

 

<ej:Grid ID="GridVehicles" runat="server"  AllowResizeToFit="true" SelectionType ="Single" > 

                <EditSettings AllowAdding="true" EditMode="InlineFormTemplate"  InlineFormTemplateID="#templateVehicle" /> 

                <ClientSideEvents RowSelected="vehicle_selected" ActionComplete ="complete"/> 

                <ToolbarSettings  ShowToolbar="true" ToolbarItems="add,cancel" ></ToolbarSettings> 

                <Columns> 

                    <ej:Column  Field="OrderID" IsPrimaryKey="true" Visible="false"></ej:Column> 

                     <ej:Column  Field="EmployeeID"></ej:Column> 

                     

                </Columns> 

            </ej:Grid> 

    <script type="text/javascript"> 

        function complete(args){ 

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

            this.getContentTable().find(".gridform").find("input").removeAttr("style"); 

} 

        } 

    </script> 

 

Note: after removing the pre-applied styles you can apply style to input element in ActionComplete event of you own. 

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

https://help.syncfusion.com/api/js/ejgrid#methods:getcontenttable  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan