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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is customizing the Grid edit dialog template supported?

Thread ID:

Created:

Updated:

Platform:

Replies:

145744 Jul 5,2019 08:59 PM UTC Aug 9,2019 06:56 AM UTC Blazor 9
loading
Tags: Grid
Islam yahia
Asked On July 5, 2019 08:59 PM UTC

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 [Syncfusion]
Replied On July 8, 2019 06:43 AM UTC

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). 


Refer our release notes for your reference 


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> 
    </environment> 

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


Islam yahia
Replied On July 8, 2019 08:56 PM UTC

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 [Syncfusion]
Replied On July 9, 2019 11:15 AM UTC

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 15th 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.  


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 15th 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.  

 
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 15th 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.  
 
 
Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan. 


Islam yahia
Replied On July 11, 2019 10:19 AM UTC

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 [Syncfusion]
Replied On July 12, 2019 12:18 PM UTC

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
Replied On August 7, 2019 06:07 PM UTC

Hello ;)
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 [Syncfusion]
Replied On August 8, 2019 11:25 AM UTC

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 31st 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. 
  
  
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 
  
  
  
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" /> 
 
Please let us know if you have any further queries. 
  
Regards, 
Vignesh Natarajan. 



Manuel Reinacher
Replied On August 8, 2019 04:34 PM UTC

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   
 
Thank you very much!

regards, Manuel





Vignesh Natarajan [Syncfusion]
Replied On August 9, 2019 06:56 AM UTC

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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon