Editing Using Template

[Aravind Ashokkumar]

Hi ,

Could you please let me know if we can use two different types of templates for Grid Editing. 

There is requirement to have one template for editing and one for adding new records. Currently when I use an external form template, If I trigger Editing or Adding, both open the same templates.

https://help.syncfusion.com/aspnetmvc/grid/editing#external-template-form

Is there an option to hold Multiple External Templates for one grid, and switch between them for Editing & Adding new records.?

Regards,

Aravind

[Prasanna Kumar Viswanathan]

Hi Aravind, 

Thanks for contacting Syncfusion support. 

If you need multiple external templates for adding and editing in one grid, we suggest you to change the templateID in actionBegin event of ejGrid. The actionBegin event will be triggered for every grid action before its starts. In this event we need to check the requestType and change the templateID using set model. 

 

Find the code example, screenshot and sample:  

 

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

  .Datasource((IEnumerable<object>)ViewBag.datasource) 

  .AllowPaging() 

  .Columns(col => 

  { 

      ----------------------------------------------------- 

 }); 

  .ClientSideEvents(eve => { eve.ActionBegin("begin"); }) 

 

 ) 

 

<script> 

    function begin(args) { 

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

            $("#FlatGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#template2" } }); 

        } 

        else if (args.requestType == "beginedit") { 

            $("#FlatGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#template" } }); 

        } 

    } 

</script> 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                ------------------------------------ 

            </tr>        

        </table> 

    </script> 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                ---------------------------------- 

            <tr>   

        </table> 

    </script> 

Screenshots:  

Adding : 

 

Editing:  

 

Sample: http://www.syncfusion.com/downloads/support/forum/127969/ze/Sample142103871339294 

Regards, 

Prasanna Kumar N.S.V 

[Aravind Ashokkumar]

Hi

Thank you for the response, it was really helpful. 

I would also like to know if there was any way that we could set the styling for the input text boxes of the external templates (apart from using the inline styles).

Regards,

Aravind

[Thavasianand Sankaranarayanan]

Hi Aravind, 

Query: Can we set the styling for the input text boxes of the external template? 

Yes, we can style the input text boxes of the external template without using the inline style. First, we need to add a class for the input element and follow the below steps.  

Adding class to the input text box element: 

                

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

             

                   ----------------- 

 

                   <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid fortemplate e-disable" 

                        style="text-align: right; width: 116px; height: 28px" />  /* Adding formtemplate class to the input text box element */ 

                 

                   ------------------ 

 

                   <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext fortemplate valid" 

                        style="width: 116px; height: 28px" />  /* Adding formtemplate class to the input text box element */ 

 

                   -------------------                       

 

                    <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" class="e-field e-ejinputtext fortemplate valid" 

                        style="width: 116px; height: 28px" />   /* Adding formtemplate class to the input text box element */ 

 

        </table> 

    </script> 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

             

 

 

                   <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid fortemplate2 e-disable" 

                        style="text-align: right; width: 116px; height: 28px" />  /* Adding formtemplate2 class to the input text box element */ 

                 

                     --------------------- 

 

                   <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext fortemplate2 valid" 

                        style="width: 116px; height: 28px" /> /* Adding formtemplate2 class to the input text box element */ 

             

                    ----------------------- 

 

                   <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" class="e-field e-ejinputtext fortemplate2 valid" 

                        style="width: 116px; height: 28px" />  /* Adding formtemplate2 class to the input text box element */ 

                 

                    ------------------ 

 

                   <input id="Freight" name="Freight" value="{{: Freight}}" class="e-field e-ejinputtext fortemplate2 valid" 

                        style="width: 116px; height: 28px" />  /* Adding formtemplate2 class to the input text box element */ 

                 

 

        </table> 

    </script> 

We can apply the style for the input element of the external template by creating a style tag in the view page 

 

 

<style type="text/css"> 

    .e-grid .e-ejinputtext.fortemplate {  /* class of the input text box in the template */ 

        border-color:aquamarine;           /* applying border color of text box in the external template  */ 

    } 

    .e-grid .e-ejinputtext.fortemplate2 {  /* class of the input text box in the template2 */ 

        background-color:antiquewhite;     /* applying border color of text box in the external template */ 

    } 

</style> 

 

 

For your convenience we have prepared sample and it will be downloaded from the below location 

Sample: http://www.syncfusion.com/downloads/support/forum/127969/ze/Sample1421031885881005 

Regards, 

Thavasianand S. 

[Aravind Ashokkumar]

Hi Aravind, 

Thanks for contacting Syncfusion support. 

If you need multiple external templates for adding and editing in one grid, we suggest you to change the templateID in actionBegin event of ejGrid. The actionBegin event will be triggered for every grid action before its starts. In this event we need to check the requestType and change the templateID using set model. 

 

Find the code example, screenshot and sample:  

 

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

  .Datasource((IEnumerable<object>)ViewBag.datasource) 

  .AllowPaging() 

  .Columns(col => 

  { 

      ----------------------------------------------------- 

 }); 

  .ClientSideEvents(eve => { eve.ActionBegin("begin"); }) 

 

 ) 

 

<script> 

    function begin(args) { 

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

            $("#FlatGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#template2" } }); 

        } 

        else if (args.requestType == "beginedit") { 

            $("#FlatGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#template" } }); 

        } 

    } 

</script> 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                ------------------------------------ 

            </tr>        

        </table> 

    </script> 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

            <tr> 

                ---------------------------------- 

            <tr>   

        </table> 

    </script> 

Screenshots:  

Adding : 

 

Editing:  

 

Sample: http://www.syncfusion.com/downloads/support/forum/127969/ze/Sample142103871339294 

Regards, 

Prasanna Kumar N.S.V 

Hi Team,

When I use the method for switching between the templates

 $("#FlatGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#template1" } }); 

The first time if i open the default template then it opens the template with no issues. 

But when I try to open the template2 the grid refreshes and does not open the template; but it opens the template only on the second click. 

This happens everytime when switching between the different templates.

[Aravind Ashokkumar]

Hi Aravind, 

Query: Can we set the styling for the input text boxes of the external template? 

Yes, we can style the input text boxes of the external template without using the inline style. First, we need to add a class for the input element and follow the below steps.  

Adding class to the input text box element: 

                

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

             

                   ----------------- 

 

                   <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid fortemplate e-disable" 

                        style="text-align: right; width: 116px; height: 28px" />  /* Adding formtemplate class to the input text box element */ 

                 

                   ------------------ 

 

                   <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext fortemplate valid" 

                        style="width: 116px; height: 28px" />  /* Adding formtemplate class to the input text box element */ 

 

                   -------------------                       

 

                    <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" class="e-field e-ejinputtext fortemplate valid" 

                        style="width: 116px; height: 28px" />   /* Adding formtemplate class to the input text box element */ 

 

        </table> 

    </script> 

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

        <b>Order Details</b> 

        <table cellspacing="10"> 

             

 

 

                   <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid fortemplate2 e-disable" 

                        style="text-align: right; width: 116px; height: 28px" />  /* Adding formtemplate2 class to the input text box element */ 

                 

                     --------------------- 

 

                   <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext fortemplate2 valid" 

                        style="width: 116px; height: 28px" /> /* Adding formtemplate2 class to the input text box element */ 

             

                    ----------------------- 

 

                   <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" class="e-field e-ejinputtext fortemplate2 valid" 

                        style="width: 116px; height: 28px" />  /* Adding formtemplate2 class to the input text box element */ 

                 

                    ------------------ 

 

                   <input id="Freight" name="Freight" value="{{: Freight}}" class="e-field e-ejinputtext fortemplate2 valid" 

                        style="width: 116px; height: 28px" />  /* Adding formtemplate2 class to the input text box element */ 

                 

 

        </table> 

    </script> 

We can apply the style for the input element of the external template by creating a style tag in the view page 

 

 

<style type="text/css"> 

    .e-grid .e-ejinputtext.fortemplate {  /* class of the input text box in the template */ 

        border-color:aquamarine;           /* applying border color of text box in the external template  */ 

    } 

    .e-grid .e-ejinputtext.fortemplate2 {  /* class of the input text box in the template2 */ 

        background-color:antiquewhite;     /* applying border color of text box in the external template */ 

    } 

</style> 

 

 

For your convenience we have prepared sample and it will be downloaded from the below location 

Sample: http://www.syncfusion.com/downloads/support/forum/127969/ze/Sample1421031885881005 

Regards, 

Thavasianand S. 

Hi Team,

Thanks for the suggestion to apply classes. 

I have tried but I am having no success, since the grid is automatically adding inline styles. I am unsure from where the inline styles are originating.

Form edit Template has the element : 

<input type="text" class="e-field e-ejinputtext addTemplate" name="XXXXXXXXX" placeholder="XXXXXXXXX">

But on the html output when loaded on the page it becomes:

<input type="text" class="e-field e-ejinputtext addTemplate" name="XXXXXXXXX" placeholder="XXXXXXXXX" style="text-align: right;height: 70px;">

Regards,

Aravind

[Thavasianand Sankaranarayanan]

Hi Aravind, 

Queries	Response
“Grid automatically adding inline styles for input element of edit template.”	When we use edit template in Grid, it is necessary to set CSS styles for the corresponding template elements based on your template customization or else the default CSS settings has been applied for that corresponding column by in-built. So we suggest you to override the default styles by using the  actionComplete event of ejGrid.  Refer the below code example  @(Html.EJ().Grid<object>("FlatGrid")                 ---------------------------     .Columns(col =>    {                   ------------------------     })            .ClientSideEvents(eve => { eve.ActionBegin("begin"); eve.ActionComplete("complete"); })    )    <script>      function begin(args) {                        --------------------       }      function complete(args) {          if (args.requestType == "add") {              $(".e-grid .e-ejinputtext.fortemplate2").css("text-align", "left");  // set the width for the input element while adding record                $(".e-grid .e-ejinputtext.fortemplate2").css("height", "28");  // set the height for the input element while adding record            }          if (args.requestType == "beginedit") {              $(".e-grid .e-ejinputtext.fortemplate").css("text-align", "left"); // set the text-align for the input element while editing record                $(".e-grid .e-ejinputtext.fortemplate").css("height", "28");  // set the height property for the input element while adding record            }        }  </script>  We have prepared a sample for your convenience and it will be downloaded from the below location  Sample: http://www.syncfusion.com/downloads/support/forum/127969/ze/Sample142103-122891309  Refer the below documentation link for handling actionComplete event  Link: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete
“But when I try to open the template2 the grid refreshes and does not open the template; but it opens the template only on the second click.”	According to your requirement, you have mentioned that you want different templates for adding and editing the records. So, we suggest you to change the templateID in the actionBegin event of ejGrid.   In the attached sample we used “#template” for editing and “#template2” for adding.   To find out the root cause of the issue, we need the following details.  1. You have mentioned that when you try open the template2 the grid refreshes. So, are you mentioning while adding new records the grid gets refreshing?.  2. You also mentioned in second click it opens the template. So, are you mentioning when you click add button for second time the grid opens the template?.  3. Are you using any adaptors like Url Adaptor, remoteSave adaptor in the sample?.  4. Code example of a Grid.   5. Ensure that you used proper templateID in the method for switching between the templates.  6. Essential Studio Version details.

 

 

Regards, 

Thavasianand S. 

[Aravind Ashokkumar]

Please find my answers below in red.

“But when I try to open the template2 the grid refreshes and does not open the template; but it opens the template only on the second click.”

According to your requirement, you have mentioned that you want different templates for adding and editing the records. So, we suggest you to change the templateID in the actionBegin event of ejGrid.   Yes I am calling in the action Begin like this : if (args.requestType == "add") { $("#eventClassifyGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#AddTemplate" } }); //Addtemplate is for new record creation } else if (args.requestType == "add") { $("#eventClassifyGrid").ejGrid("option", { "editSettings": { externalFormTemplateID: "#detailsTemplate" } }); //DetailsTemplate is for obtaining the details of the current grid record. } In the attached sample we used “#template” for editing and “#template2” for adding.   To find out the root cause of the issue, we need the following details.  1. You have mentioned that when you try open the template2 the grid refreshes. So, are you mentioning while adding new records the grid gets refreshing?.  The grid refreshes even before the template has opened (while trying to switch between the templates). There are two buttons, one for 'details' and another for 'add' new record. The default template is for the details, i.e. "#detailstemplate".  If the user clicks on the button for details the template loads immediately. Assume if the user wants to add new record, then he clicks on the add button. Now the template opens and closes automatically.(I am unsure which templates opens and I assume this is because the grid changes the template and closes) But if the click on the same add button again, now the 'AddTemplate' will open successfully. 2. You also mentioned in second click it opens the template. So, are you mentioning when you click add button for second time the grid opens the template?.  Yes 3. Are you using any adaptors like Url Adaptor, remoteSave adaptor in the sample?.  I am using a WebAPIAdaptor for fetching the data. 4. Code example of a Grid.   5. Ensure that you used proper templateID in the method for switching between the templates.  I am using the proper names since the template opens after the second click. 6. Essential Studio Version details.   Essential Studio Version 14.3.0.49

[Prasanna Kumar Viswanathan]

Hi Aravind, 

The mentioned issue has been reproduced when we use webAPIAdaptor in our sample. To avoid the mentioned issue, use addExternalDialogEditingTemplate method of ejGrid. In this sample we use addExternalDialogEditingTemplate in actionBegin event to switch between the templates.  

 

Find the code example and sample:  

 

 

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

    .Datasource(ds => ds.URL("/api/Orders").Adaptor(AdaptorType.WebApiAdaptor)) 

    .AllowPaging() 

    ---------------------------- 

   .Columns(col => 

    { 

     -------------------------- 

    }); 

    .ClientSideEvents(eve => { eve.ActionBegin("begin"); }) 

) 

 

<script> 

    function begin(args) { 

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

            this.model.editSettings.externalFormTemplateID = "#template2"; 

            this.addExternalDialogEditingTemplate(); 

        } 

        else if (args.requestType == "beginedit") { 

            this.model.editSettings.externalFormTemplateID = "#template"; 

            this.addExternalDialogEditingTemplate(); 

        } 

    } 

</script> 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/127969/ze/WebApiEF-19073075161150896017 

Regards, 

Prasanna Kumar N.S.V 

 

[Aravind Ashokkumar]

Hi Prasanna,

Thank you so much. This solution works well for me. 

If you could add this to the documentation part it will be useful for others too.

Regards,

Aravind

[Prasanna Kumar Viswanathan]

Hi Aravind, 

 

We are happy to hear that the provided solution working fine at your end. 

 

It is an unique requirement so it will not be included in UG documentation part. According to your request, we will consider this as a Knowledge Base documentation for this requirement and it will be published in online as early as possible.  

 

Regards, 

Prasanna Kumar N.S.V