Problem with Master Detail Grids

[Andrea Perazzolo]

Hi,

I have a page with some grids, the first is a Master table and the others are detail.

All these use the ODataV4DataAdaptor for the Datamanagers.

The Detail grid has a field that has the Foreign Key Data attached so the edit is done from a list of values.

I have 2 problems:

1) The list of values is about 1500 items and using the load from odata is a very long operation that freezes the page for some time. I tried to resolve using the datamanager to load the Json Data and binding that on the Foreign key field column. Even with this change, the edit operation starts after some time on Internet Explorer (is a little faster on other browsers)., while the add operation starts faster than edit.

2) At this time, when the Grid is Empty, the Add operation throws an error :

Impossibile recuperare la proprietà 'filter' di un riferimento nullo o non definito

I think the error appears for the Foreign key column presence, because other grids does not give me problems, and the same grid, when there is data present, execute the add operation correctly.

3) There is a way to customize the properties of the Dropdown that appear in the edit operation inline? or do I need to do the edit operation in a dialog maybe?

I am using the controls 14.2.0.26, and have not yet installed the .28 Service pack.

I have attached the page I am using for your reference

    Thanks in advance

Andrea Perazzolo

Attachment: Index_229915d4.zip

[Andrea Perazzolo]

I don't know where I am doing wrong, but when I add a record in a grid using

$(function () {
    var dataManager = ej.DataManager({
        url: "@(AppSettings.Value.BaseDataUrl)/odata/Vassoi",
        adaptor: new ej.ODataV4Adaptor()
    });
 
    $("#Grid").ejGrid({
        dataSource: dataManager,
        allowPaging: true,
 
        toolbarSettings: {
            showToolbar: true,
            //toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]
            toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]
},
        editSettings: { allowEditing: true, allowAdding: true },
 
        allowFiltering: true,
        allowSorting: true,
        showColumnChooser: true,
        allowScrolling: true,
        scrollSettings: { width: "auto" },
        locale: "it-IT",
        scrollSettings: { width: "30%" },
 
        columns: [
            { field: "IdVassoio", headerText: "Id", isPrimaryKey: true, isIdentity: true, type: "number", textAlign: "right", headerTextAlign: "right", width: 80, visible: false },
            { field: "Codice", headerText: "Codice", type: "string", allowEditing: true, width:150 },
            { field: "TassoScarto", headerText: "Tasso Scarto", type: "number", allowEditing: true, allowFiltering:false, width:100 },
            { field: "GiacenzaMinima", headerText: "Giacenza Minima", type: "number", allowEditing: true, width: 120, allowFiltering:false  },
        ],
 
        actionBegin: function (args) {
            switch (args.requestType) {
                case "filtering":
                    if (args.currentFilterObject[0].operator == "startswith")
                        args.currentFilterObject[0].operator = "contains";
                    break;
            }
        }
    });
 
});

The record is correctly inserted in the database and the OData returns the Status Code 201 Created, but there is a javascript error

Impossibile recuperare la proprietà 'firstChild' di un riferimento nullo o non definito

This behavior is not present in the Details Grids I attached on the other post of this Thread.

I don't know how to resolve this.

Thanks in advance

     Andrea Perazzolo

[Andrea Perazzolo]

HI,

I fond a possible explanation for the last question.

The problem seems to be the allowPaging settings, together with the Adding operation and the OData Adaptor.

The exception is sent when the grid tries to redraw the data, but the added record is not present in the page.

If I remove the paging or if I go to the Last Page and add a new record, the refresh is done correctly.

This for me is a very blocking problem, and I ask if there is a workaround.

     Thanks in advance

    Andrea Perazzolo

P.S. I tried to use even the Service Pack but the problem is still present

[Karthick Kuppusamy]

Hi Andrea, 

Thanks for Contacting Syncfusion support. 

Please find the response for your queries. 

Query #1: The exception is sent when the grid tries to redraw the data, but the added record is not present in the page.If I remove the paging or if I go to the Last Page and add a new record, the refresh is done correctly. 

                  

                 The new record added based on odataService.ejGrid is not handling this operation this is default behavior. So based on your service data will be added in last page  

              

Query #2: The list of values is about 1500 items and using the load from odata is a very long operation that freezes the page for some time. I tried to resolve using the datamanager to load the Json Data and binding that on the Foreign key field column. Even with this change, the edit operation starts after some time on Internet Explorer (is a little faster on other browsers)., while the add operation starts faster than edit.  

             The data fetched based on your internet connection speed.  

Note : if we misunderstood can you please explain about your requirement.      

        

 We have created a sample for your requirement masterdetail using the foriegnkey column  and the grid have 830 records. 

Please find the code example. 

 

$("#DetailGrid").ejGrid({ 

                dataSource: null, 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(10)), 

                isResponsive: true, 

                allowPaging: false, 

                columns: [ 

                              { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 125 }, 

                              { 

                                  field: "EmployeeID", width: 90, foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: ej.DataManager({ 

                                      url: "http://services.odata.org/V4/Northwind/Northwind.svc/Employees", 

                                      adaptor: new ej.ODataV4Adaptor() 

                                  }), headerText: "First Name"//foreignkeycolumn 

                              }, 

                              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 100, format: "{0:C}", priority: 2 }, 

                              { field: "ShipCity", headerText: "Ship City", width: 150, priority: 3 }, 

                              { field: "OrderDate", headerText: "Order Date", width: 100, textAlign: ej.TextAlign.Right, format: "{0:MM/dd/yyyy}", priority: 4 }, 

                              { field: "ShipCountry", headerText: "Ship Country", width: 100, priority: 4 } 

                ] 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Html_Encode_Feature-1042122529.zip. 

Query #3: At this time, when the Grid is Empty, the Add operation throws an error : 

I think the error appears for the Foreign key column presence, because other grids does not give me problems, and the same grid, when there is data present, execute the add operation correctly. 

 

                   Please share the screenshot of the issue and it will help us to find the prompt solution. 

 

Query4: ) There is a way to customize the properties of the Dropdown that appear in the edit operation inline? 

                

                Yes.We can able to customize the propertires of the dropdown using through  “editTemplate” feature of the ejGrid. 

Please find the help document for your reference. 

http://help.syncfusion.com/js/grid/editing#cell-edit-template. 

Please find the online demo link for your reference. 

http://js.syncfusion.com/demos/web/#!/azure/grid/editing/edittemplate. 

Regards, 

K.Karthick. 

 

 

 

[Andrea Perazzolo]

Regarding the Query 1) I'll attach a video that shows the problem.

When adding the item and I am positioned on a page taht is not the last, the "adding row" does not vanish afetr the save is completed, due to an exception in the code.

When I am on last page, the grid redraws correctly (only if the new record does not create a new page).

For the other queries I'll need further search

I'll appreciate if there is a way to resolve the redraw problem, even with a workaround.

    Thanks in advance

    Andrea Perazzolo

Attachment: 20160804_1544_34_eaa1f11a.zip

[Andrea Perazzolo]

I attached another video regarding the query #3.

When In the detail there is no data, adding a record throws an exception, but when at any time I show some data on any of the detail grids, the adding operation starts correctly.

There is an exception on some filter.

Scanning from the plain sources (not the minified) I found the line of error is the 4397 of the ej.grid.js file, where the datasource object of the foreign key data is undefined at that moment.

Hope it helps to reproduce the problem.

   Thanks in advance

    Andrea Perazzolo

Attachment: 20160804_1732_51_ed70dc1d.zip

[Karthick Kuppusamy]

Hi Andrea, 

Please find the response for your queries. 

Query #1: When adding the item and I am positioned on a page taht is not the last, the "adding row" does not vanish afetr the save is completed, due to an exception in the code. 

When I am on last page, the grid redraws correctly (only if the new record does not create a new page). 

 

 We have created a separate incident regarding this query.Please follow up the incident #161757. 

Query #3: When In the detail there is no data, adding a record throws an exception, but when at any time I show some data on any of the detail grids, the adding operation starts correctly. 

 

We have analyzed your requirement and we are unable to reproduce the issue at our end. 

In below screenshot we have bind the empty dataSource with foreignkey. 

Please find the snapshot before add. 

 

Please find the snapshot after click the add button. 

 

Note: Please ensure that the foreignkey field present in the both table and also foreign key field must be unique. 

Please share the following details to us it would be helpful for us to find the solution at earliest. 

1.Please share the full code snippet? 

2.Please share the sample if it is possible? 

3.Please share the screenshot about adding a new record in OdataController? 

Regards, 

K.Karthick. 

[Andrea Perazzolo]

In the last port of this thread, in the attachment, together with the video, I have added also the page that gives me the error.

The ODataController is a standard one, with the various GET/POST/PUT OPerations, written in MVC Web API OData.

The only operation I have done is that I loaded all the data in a Javascript variable and changed the datasource of the foreign key field to it.

 As I have written, I have found the line of code that throws the exception.

This exception is thrown only when there are not rows in the grid.

After I have binded at least one time a row, then from that point te add operation works correctly.

Maybe It's me that have messed up with the Datasources, but at the start, it is undefined.-

Hope it helps

      Andrea Perazzolo

[Karthick Kuppusamy]

Hi Andrea, 

 

We have created a support incident under your account to track  the issue(“When In the detail there is no data, adding a record throws an exception”). Please log on to our support website to check for further updates.   

  

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents. 

 

Regards, 

K.Karthick.