Need an example

[Jose Monzon]

Just upgraded to 17.1.0.38, ASP.Net Core 2.0 and the Grid control.  Before that I was developing on JS 1 v 16.2.0.48 with the grid.

2 Questions (both for ASP.Net core Essential JS1 17.1.0.38):

#1:

In JS I was able to use the grid with foreign keys like so:

with an example of a working foreign field:

Works perfectly but now that I migrated to ASP.Net Core and 17.1.0.38, I have not been able to do migrate the same grid.

Please I need a working Project example of any grid wih the same functionality as my 16.2.0.48 version, but in ASP.NET Core (Essential JS1) 17.1.0.38.

Attached are the original portions in version in 16.2.0.48 and the incomplete 17.1.0.38 version in ASP.Net Core.

#2:

In grid version 16.2.0.48 editmode "Dialog" I can customize the dialog's title, but not in 17.1.0.38. In 17.1.0.38 I can change the language, i.e.: "Editing Record 1" -> "Editar Registro #1", but I need it without the record's Id, just :Editar Registro".  How is it done now?  I've tried some examples from forum and help sections but they don't work.

Attachment: Documents_ba5e8e13.rar

[Vignesh Natarajan]

Hi Jose,  

 

Thanks for contacting Syncfusion forums. 

 

Query1: “Works perfectly but now that I migrated to ASP.Net Core and 17.1.0.38, I have not been able to do migrate the same grid.” 

 

From your query, we understand that you are facing issue while binding rendering the foreignkey column using ASP.NET Core tag helpers. We have rendered the Grid using remoteSaveAdaptor and bounded the foreignkey column using WebAPI Adaptor.  Kindly refer the below code example for your reference 

 

<ej-grid id="FlatGrid" 

         allow-sorting="true" 

         allow-paging="true" 

         allow-filtering="true" 

         allow-searching="true" 

         locale="es-GT" 

         is-responsive="true" 

         enable-responsive-row="true" 

         action-complete="complete" 

         action-failure="OnGridActionFailure" 

         allow-resize-to-fit="true" 

         allow-scrolling="true" 

         load="onGridLoad"> 

    <e-scroll-settings width=@("100%") 

                       height=@("100%")> 

    </e-scroll-settings> 

    <e-filter-settings filter-type="Excel" 

                       max-filter-choices="100" 

                       enable-case-sensitivity="false"> 

    </e-filter-settings> 

    <e-datamanager json="ViewBag.dataSource" insert-url="UrlInsert" update-url="UrlUpdate" remove-url="UrlDelete" adaptor="remoteSaveAdaptor"></e-datamanager> 

    <e-edit-settings allow-adding="true" 

                     allow-editing="true" 

                     allow-deleting="true" edit-mode="DialogTemplate" dialog-editor-template-id="#template"> 

    </e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" 

                        toolbar-items='@new List<string> {"add","edit","delete","update","cancel","search"}'> 

    </e-toolbar-settings> 

    <e-context-menu-settings enable-context-menu="true"> 

    </e-context-menu-settings> 

    <e-columns> 

        <e-column field="OrderID" header-text="Order ID" is-primary-key="true" text-align="Right" validation-rules='new Dictionary<string, object>() { {"required",true}, {"number",true} }' width="75"></e-column> 

        <e-column field="CustomerID" header-text="Customer ID" validation-rules='new Dictionary<string, object>() { {"required",true}, {"minlength",3} }' width="80"></e-column> 

        <e-column field="EmployeeID" foreign-key-field="EmployeeID" foreign-key-value="FirstName" header-text="Employee ID" datasource="ViewBag.columnData" text-align="Right" edit-type="@(EditingType.DropdownEdit)" width="75"></e-column> 

        <e-column field="Freight" header-text="Freight" format="{0:C}" numeric-edit-options="@new EditorProperties(){ DecimalPlaces = 2}" validation-rules='new Dictionary<string, object>() { {"required",true}, {"range","[0,1000]"} }' edit-type="@(EditingType.NumericEdit)" text-align=Right width="75"></e-column> 

        <e-column field="ShipCity" header-text="Ship City" width="110" text-align="Left"></e-column> 

    </e-columns> 

</ej-grid> 

<script type="text/javascript"> 

    function complete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") 

            $("#" + this._id + "_dialogEdit").ejDialog({ title: "Customize Edit form title" }); // to customize the edit dialog title 

        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 

            if (args.requestType == "beginedit") $("#OrderID").attr("disabled", "disabled"); 

            $("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "34px", decimalPlaces: 2 }); 

            $("#OrderDate").ejDatePicker(); 

            // define dataSource for dropdownlist while editing a foreignkey 

            $("#EmployeeID").ejDropDownList({ 

                width: '116px', dataSource: ej.DataManager({ 

                    url: "/api/Orders", 

                    adaptor: new ej.WebApiAdaptor() 

                }), fields: { text: "FirstName", value: "EmployeeID" } 

            }); 

        } 

    } 

</script> 

 

////////////////////////////////// 

 

  public ActionResult Index() 

        { 

            if (orddata.Count() == 0) 

                BindData(); 

            ViewBag.dataSource = orddata; 

            // dataSource for foreignkeey column  

            ViewBag.columnData = new DataSource() { URL = "/api/Orders", Adaptor = "WebApiAdaptor" };            

            return View(); 

        } 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/144412/ze/WebApplication_-_editing-2050857057  

 

Query2: “but I need it without the record's Id, just :Editar Registro".  How is it done now?” 

 

From your query, we understand that you need to customize the edit dialog box title. We have already discussed this topic in our knowledge base document section. Kindly refer the below link for the knowledge base document.  

 

KB:  https://www.syncfusion.com/kb/7484/how-to-customize-the-edit-form-title-of-the-grid  

 

As per your requirement, we suggest you use the first solution provided in the knowledge base document.  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Jose Monzon]

Hello. Thanks for the quick response but still having problems:

 

1. The provided project does not work:

2. The controller is sending data back to the view(see below image of the corresponding Network-Response):

IMPORTANT: please take note that property names in the response magically change to camel-case notation!!! I didn't to this.
I've had this problem before and fixed it by matching the grid field names with those names in the response.

I ask myself: Am I missing something or perhaps it's a Syncfusion/VStutio glitch?

3. Nothing happens when attempting to add a new record. Console output of the error is:

4. Examining ViewBag.dataSource in the controller yields:

Here you can see 45 records are returned, but dataSource seem NOT MATCH those in the Network-Response shown above in #2. Perhaps an error with serialization or grid configuration. I don't see the names of the Orders Table in the Network-Response, only those of the employees. The grid in the Index View has fields configured for Orders which match those in the ViewBag.dataSource.

BOTTOM LINE: I would like for the Project you provide, to work, so I can see what I need to implement per my original request.

And last, regarding the title of the Edit dialog, I was looking to avoid using "DialogTemplate". No problem if I have to use "DialogTemplate" but, do you have an example with edit-mode="Dialog" where the Title of the Dialog can be customized, that is, to NOT display the Id? 

Thanks again!!!

 

[Vignesh Natarajan]

Hi Jose, 

 

Query: “ please take note that property names in the response magically change to camel-case notation!!! I didn't to this.”  

 

Yes, you are facing Camel Case issue in ASP.NET Core. While using WebAPI Adaptor in Grid, dataSource must be returns in terms of Items and Count. But due to camel case issue, dataSource is returned as items and count. (i.e) small i and c. Hence the reported issue occur. Kindly refer the below knowledge base to resolve the camel case issue in ASP.NET Core.  

 

KB: https://www.syncfusion.com/kb/9004/how-to-resolve-the-issue-grid-rendered-with-blank-rows-and-correct-record-count  

 

Modify your startup.cs file as mentioned in the Knowledge base document to resolve the issues.  

 

Query: “ regarding the title of the Edit dialog, I was looking to avoid using "DialogTemplate".” 

 

As per your requirement we have modified the sample to use Edit mode as Dialog instead of DialogTemplate. Kindly refer the modified sample from below  

 

Sample: http://www.syncfusion.com/downloads/support/forum/144412/ze/WebApplication1240980111  

 

Note: after running our sample kindly navigate the sample to http://localhost:64859/Home/Index to render the Grid properly and perform CRUD action.  

 

Please get back to us if you have further queries.  

 

Regards 

Vignesh Natarajan. 

[Jose Monzon]

Hello. Just tried the Project you sent for Grid editmode Dialog. Doesn't work either, fails with errors.

When navigating to Home/Index no data is displayed and the error is as follows:

which basically translates to: Unable to get the 'helpers' property for a null or undefined reference.

When attempting to add a new record the new error can be seen:

2nd error translates basically to: Unable to get the 'FlatGrid_JSONDialogEditingTemplate' property for a null or undefined reference.  I think the 2nd error has to do something with the fact that 'helpers' are not loaded as the first error states.

Thanks again. Hope to hear soon from you.

[Vignesh Natarajan]

Hi Jose, 

Sorry for the inconvenience caused.  

The reported error is caused since the JS render script file is not referred properly in the sample. Please refer the below link for modified sample, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1640110656.zip  

Please let us know, if you need further assistance. We will be happy to assist you. 

Regards, 

Vignesh Natarajan.. 

 

[Jose Monzon]

Hi. The solution shown in the Project Works but it's not as short as I expected. The solution I am upgrading has 50 or so foreign dropdowns within grids. I think I will postpone the upgrade a few days.

I will let you know anything. Thans.

[Vignesh Natarajan]

Hi Jose,   

  

Thanks for the update.   

  

We will wait to hear from you.   

  

Regards,   

Vignesh Natarajan.