Master Details Grid and Complex binding

[Andrea Perazzolo]

HI,

Following your example on Master Details grid, I have changed a little to use the Datamanager with ODataV4Adaptor.

I have modified the RowSelected Event trying to change the model Query of the grid with the filter value

as in this code.

rowSelected: function (args) {
    var idEtichetta = args.data.IdEtichetta;
    idEtichettaSelected = idEtichetta;
    var gridObj = $("#GridDetail").data("ejGrid");
    gridObj.model.query = ej.Query().where("IdEtichetta", "equal", idEtichetta);
    gridObj.refreshContent();
},

It works fine, but if i try to use a complex binding (e.g a field on a navigation property of the Datasource of the details grid), the refreshed grid loses the Expand call on the Datamanager and it does not fill the data of the Navigation field columns.

So I have changed the code like this (is on another page)

rowSelected: function (args) {
    var idEtichetta = args.data.IdEtichetta;
    idEtichettaSelected = idEtichetta;
    var gridObj = $("#GridProdotti").data("ejGrid");
    var newDm = ej.DataManager({
        url: "@(AppSettings.Value.BaseDataUrl)/odata/EtichetteXProdotto",
        adaptor: new ej.ODataV4Adaptor()
    });
    var query = ej.Query().expand("Prodotto").where("IdEtichetta", "equal", idEtichetta);
    newDm.executeQuery(query)
            .done(function (e) {
                gridObj.dataSource(ej.DataManager(e.result));
                gridObj.refreshContent();
            });
},

and this works fine filling the data correctly.

The problem is when I have an editable Details grid, that with this workaround I will lose the functionality of sending the data on the Server, changing the Datasource on the fly with a local data one.

I don't know how to do this in a way that works in all cases: when need  master-details grids with editing on the details.

Could you provide me a working example of the grid details with Complex binding and data from remote.

     Thanks in advance

     Andrea Perazzolo

[Venkatesh Ayothi Raman]

Hi Andrea, 

We went through your code example and found that you are binding the JSON result as data source for Grid in row selected event. Here, JSON data source act as a local data source as well as local data source doesn’t send the data on server while editing. This is not a recommended way. 

We have achieved your requirement by modifying the Grid default commonQuery like as follows, 

Code example: 

<RowSelected Event> 

 

rowSelected: function (args) { 

                    this.element.ejWaitingPopup("show"); // Show the waiting popups 

                    var employeeID = args.data.EmployeeID;                     

                    var gridObj = $("#DetailGrid").ejGrid("instance"); 

                    gridObj.commonQuery.queries = []; 

                    gridObj.commonQuery.where("EmployeeID", 'equal', employeeID);// Modifying the query  

                    gridObj.refreshContent(); // refresh the Grid content 

                    this.element.ejWaitingPopup("hide");// hide the waiting popup after filter the data source 

                }, 

If you still face the same issue, then could you please provide more details about your requirement? 

Regards, 

Venkatesh Ayothiraman. 

[Andrea Perazzolo]

Hi,

thanks for the reply.

I have tried this solution, but in the process I will lose the complex binding properties that in the first time is binding correctly.

I have not shown in the original post, but I have 2 columns like these:

{ field: "Prodotto.Codice", headerText: "Codice", type: "string", width: 90, allowEditing: false, allowFiltering: true, headerTextAlign: "center" },
{ field: "Prodotto.Descrizione", headerText: "Descrizione", type: "string", width: 300, allowEditing: false, allowFiltering: true, headerTextAlign: "center" },

and if I use the method provided, the columns are blank, because it is lost the Expand call to the OData Query.

   Thanks in advance

    Andrea Perazzolo

[Venkatesh Ayothi Raman]

Hi Andrea, 

Thanks for the update. 

We are unable to reproduce the issue at our end and we have created a sample for your convenience. Please kindly check the sample from following link, 

Sample: http://jsplayground.syncfusion.com/mx4bsepd 

Regards, 

Venkatesh Ayothiraman.