Is customizing the Grid edit dialog template supported?

[Islam yahia]

Hi,

I was looking for custom editor dialog template and I need to know if it's supported in the latest release or not yet. Please provide a sample or update the documentation.

Kind Regards,

Islam

[Vignesh Natarajan]

Hi Islam Yahia,  

Thanks for contacting Syncfusion support.  

Query: “I was looking for custom editor dialog template and I need to know if it's supported in the latest release or not yet” 

In our 17.2.28 Nuget release we have provided the support for templates in Blazor components. Dialog Editing was also included in that release. You can achieve your requirement by defining the Template (as below) in the GridEditSettings. So kindly upgrade to our latest Nuget release (17.2.29) to achieve your requirement (Dialog Template) 

 

Refer the below code example  

<EjsGrid id="Grid" @ref="@grid" ModelType="@model" AllowPaging="true" DataSource="@data" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"> 

        <Template> 

            @{ 

                var employee = (context as Orders); 

                <table class="e-table e-inline-edit" cellspacing="0.25"> 

                    <colgroup> 

                        <col style="width: 120px;"> 

                        <col style="width: 120px;"> 

                    </colgroup> 

                    <tbody> 

                        <tr> 

                            <td style="text-align: right" class='e-rowcell'> 

                                <input class="e-input e-field" name='Freight' value="@employee.Freight" required type="text" /> 

                            </td> 

                            <td class='e-rowcell'> 

                                <div class="e-input-group"> 

                                    <input class="e-input e-field" name='CustomerID' value="@employee.CustomerID" required type="text" /> 

                                </div> 

                            </td> 

                        </tr> 

                    </tbody> 

                </table> 

            } 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@Syncfusion.EJ2.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn> 

        <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="90"></GridColumn> 

        <GridColumn Field="EmployeeID" HeaderText="Employee ID" Width="90"></GridColumn> 

        <GridColumn Field="Freight" HeaderText="Freight" Width="90"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

 

…………………………. 

 

 

List<Orders> data; 

 

    private EjsGrid grid; 

    public List<Orders> order = new List<Orders>(); 

    public Orders model = new Orders(); 

 

…………………………… 

Refer the below screenshot for the output 

 

For your convenience we have prepared a sample using latest Nuget package (17.2.29). 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/145744/ze/DialogTemplate-1291209271  

Refer our release notes for your reference 

https://ej2.syncfusion.com/aspnet-core-blazor/documentation/release-notes/17.2.28/ 

Please find the latest version script from below link  

[host.cshtml] in case of Server Application 

<environment include="Development"> 

        <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 

        <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.29/fabric.css" rel="stylesheet" /> 

        <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ej2.min.js"></script> 

        <script src="https://cdn.syncfusion.com/ej2/17.2.29/dist/ejs.interop.min.js"></script> 

    </environment> 

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Islam yahia]

Hi Vignesh Natarajan,

Thanks for your detailed answer. I have other three queries:

Query 1:  The custom edit template throws .NET type conversion errors when the model properties are either of type byte[] or a nullable DateTimeOffset (nullable value types in general) and I think it\s a bug which needs to be addressed.

Query 2: When editing an existing record twice, the second time the dialog displays empty input elements, is this another bug or it's just in my code?

Query 3: How to distinguish whether the operation is an Add or Edit?

[Vignesh Natarajan]

Hi Islam Yahia,  

Thanks for the update.  

Query1: “ The custom edit template throws .NET type conversion errors ” 

From your query we suspect that you are facing issue while using cell edit template in Grid. If yes, currently we are implementing this feature at our end. This feature will be included in our subsequent NuGet release which is scheduled to be rolled out on or before 15^th July 2019.  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

https://www.syncfusion.com/feedback/7328/need-to-provide-cell-edit-template-support-for-blazor  

Once the release is rolled out successfully, you will be able to achieve your requirement. If cell edit template is not the one you are using. Kindly share more detail about the issue you are facing.   

Query2: “When editing an existing record twice, the second time the dialog displays empty input elements, is this another bug or it's just in my code?” 

 

From your query we understand that you are facing issue while editing the same edited record for second time. We are able to reproduce the reported issue at our end while saving the records without any changes. We have considered the reported issue “Dialog template is not working properly during the second time editing” as a bug. Fix for the issue will be included in our subsequent NuGet release which is scheduled to be rolled out on or before 15^th July 2019. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

https://www.syncfusion.com/feedback/7353/dialog-template-is-not-working-properly-while-editing-a-record-for-second-time  

 

Till then we appreciate your patience.  

 

Query3: “ How to distinguish whether the operation is an Add or Edit?”  

 

You can achieve your requirement using OnActionComplete and OnActionBegin events. OnActionComplete event will be triggered when certain action is completed. Similarly OnActionBegin event will be triggered when any Grid action begin.  

So while editing, these events will be triggered and from its arguments we can get the requestType as Add or BeginEdit. Refer the below code example and screenshot for the output 

<EjsGrid id="Grid" @ref="@grid" ModelType="@model" AllowPaging="true" DataSource="@data" OnActionBegin="onBegin" OnActionComplete="onComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

……………………………………………………………….. 

</EjsGrid> 

 

………………………………………… 

 

  public void onBegin(object args) 

    { 

          If(args.requestType == “Add”) 

         { 

                    //perform your action here while adding a record 

         } 

          If(args.requestType == “BeginEdit”) 

         { 

               //perform your action here while editing a record 

          } 

} 

 

Note: We are facing some issue with strongly typed argument while using this (OnActionBegin and OnActionComplete) event in Blazor, and it will be resolved in our subsequest Nuget release which is expected to roll out on or before 15^th July.  

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

 

https://www.syncfusion.com/feedback/7298/onactioncomplete-and-onactionbegin-events-arguments-are-not-proper-while-editing-a-record  

 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan. 

[Islam yahia]

Hi Vignesh Natarajan,

Thanks again for your detailed reply.

Is there a way to know if it\s an Add or an Edit method inside the template itself (e.g. by using a template directive).

Kind Regards,

Islam

[Vignesh Natarajan]

Hi Islam,  

Thanks for the update.  

Query: “Is there a way to know if it\s an Add or an Edit method inside the template itself (e.g. by using a template directive). “ 

By default you cannot determine whether it is Add or Edit method inside the Dialog Template. But you can achieve your requirement using the value inside the template model. (i.e) There must be one column in dataSource which take boolean value (isAdd). In OnActionBegin event based on the RequestType argument value (Add or BeginEdit) we can change the value of Boolean property (isAdd) in the event arguments.  

So that based on the isAdd property you can differentiate the Add or Edit inside the Dialog Template. But as mentioned in the previous update we have some issues with Strongly Typed arguments with OnActionBegin event. Once the Nuget release is successfully roll out you can achieve your requirement using below code example  

<EjsGrid id="Grid" @ref="@grid" ModelType="@model" AllowPaging="true" DataSource="@data" OnActionBegin="onBegin" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"> 

        <Template> 

            @{ 

                var employee = (context as Orders); 

                @if (@employee.IsAdd.ToString() == "true") {  

 

                    <table class="e-table e-inline-edit" cellspacing="0.25"> 

                        <colgroup> 

                            <col style="width: 120px;"> 

                            <col style="width: 120px;"> 

                        </colgroup> 

                        <tbody> 

                            <tr> 

………………………………………………… 

                            </tr> 

                        </tbody> 

                    </table> 

                    } 

                    else 

                    { 

                      <table class="e-table e-inline-edit" cellspacing="0.25"> 

                        <colgroup> 

                            <col style="width: 120px;"> 

                            <col style="width: 120px;"> 

                        </colgroup> 

                        <tbody> 

                            <tr> 

………………………………………………… 

                            </tr> 

                        </tbody> 

                    </table> 

                    } 

            } 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

…………………………………………. 

    </GridColumns> 

</EjsGrid> 

 

……………………………………………………….. 

 

 

   public void onBegin(ActionEventArgs args) 

    { 

        if(args.RequestType.ToString() == "Add") 

        { 

            var obj = JsonConvert.DeserializeObject<Orders>(JsonConvert.SerializeObject(args.RowData)); 

            obj.IsAdd = true; 

        } 

    } 

Till then we appreciate your patience.  

   

Regards, 

Vignesh Natarajan. 

[Manuel Reinacher]

Hello ;)

I downloaded the provided Sample:  https://www.syncfusion.com/downloads/support/directtrac/145744/ze/DialogTemplate-1291209271  

Updated Syncfusion.EJ2.Blazor to 17.2.0.40-beta with nuget,

private EjsGrid grid; -> private EjsGrid<Orders> grid;

Updated Scripts in _Host.cshtml

Everything ok.

Then I changed the Type of OrderID to Guid.

The Dialog does no longer work and "Newtonsoft.Json.JsonReaderException: Input string '0e7da30d-5726-4dfe-aa3e-a3c1d2ecc7a6' is not a valid number" error is in the console.

Is the "issue with strongly typed argument" already fixed in 17.2.0.40-beta?

I'm very new to syncfusion and blazor. Maybe I missed somthing, too ;)

Regards, Manuel

[Vignesh Natarajan]

Hi Manuel,  

  

Greetings from Syncfusion support.  

  

Query: “The Dialog does no longer work and "Newtonsoft.Json.JsonReaderException: Input string '0e7da30d-5726-4dfe-aa3e-a3c1d2ecc7a6' is not a valid number" error is in the console. &&  &&” 

  

We are able to reproduce the reported issue at our end and we have confirmed it is bug from our side. We have logged defect “dialog template editing is not working properly with Guid value as primarykey column” report for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our next Nuget release which is expected to be roll out on or before August 31^st 2019. 

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

  

https://www.syncfusion.com/feedback/8091/dialog-template-editing-is-not-working-properly-with-guid-value-as-primarykey-column  

  

Till then we appreciate your patience. 

  

Query: “Is the "issue with strongly typed argument" already fixed in 17.2.0.40-beta?” && “I'm very new to syncfusion and blazor. Maybe I missed somthing,” 

  

Yes. Issue with strongly typed argument was fixed and included in our latest Nuget release (17.2.0.40). Kindly refer our UG and online sample browser for your reference 

  

UG: https://ej2.syncfusion.com/blazor/documentation/grid/getting-started/?no-cache=1  

  

Online Demo: https://ej2.syncfusion.com/blazor/Grid/DefaultFunctionalities  

  

Kindly refer the latest of scripts and css from below  

. 

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.40/fabric.css" rel="stylesheet" /> 

   <script src="https://cdn.syncfusion.com/ej2/17.2.40/dist/ej2.min.js"></script> 

    <script src="https://cdn.syncfusion.com/ej2/17.2.40/dist/ejs.interop.min.js"></script> 

 

Please let us know if you have any further queries. 

  

Regards, 

Vignesh Natarajan. 

[Manuel Reinacher]

Hello Vignesh Natarajan,

Thank you very much for your help. 

It's awesome that it will be fixed in the next version!

I'm very happy to use this controls and it's great that I can report issues.

Btw I'm getting a "Page Not Found" error when I click on your url   

https://www.syncfusion.com/feedback/8091/dialog-template-editing-is-not-working-properly-with-guid-value-as-primarykey-column

 

Thank you very much!

regards, Manuel

[Vignesh Natarajan]

Hi Manuel,  

Thanks for your appreciation.   

Query: “Btw I'm getting a "Page Not Found" error when I click on your url” 

We have validated the reported query and since the feedback is in review stage it is not visible to you. Now the feedback is reviewed. Kindly logout and login in again into your account to resolve the issue. 

Please get back to us if you have any queries.   

Regards, 

Vignesh Natarajan.