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

Need an example

Thread ID:

Created:

Updated:

Platform:

Replies:

144412 May 6,2019 04:14 AM UTC May 16,2019 11:16 AM UTC ASP.NET Core 7
loading
Tags: Grid
Jose Monzon
Asked On May 6, 2019 04:14 AM UTC

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 [Syncfusion]
Replied On May 6, 2019 11:12 AM UTC

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 
 
 
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.  
 
 
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
Replied On May 6, 2019 05:33 PM UTC

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 [Syncfusion]
Replied On May 7, 2019 04:42 AM UTC

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.  
 
 
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  
 
 
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
Replied On May 8, 2019 10:40 AM UTC

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

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, 


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

Regards, 
Vignesh Natarajan.. 
 


Jose Monzon
Replied On May 16, 2019 03:52 AM UTC

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 [Syncfusion]
Replied On May 16, 2019 11:16 AM UTC

Hi Jose,   
  
Thanks for the update.   
  
We will wait to hear from you.   
  
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