1. Home
  2. Forum
  3. jQuery
  4. Binding data to Grid causing problems.

Binding data to Grid causing problems.

Hi,I've a few doubts about ejGrid:

1)How to fill data in ejGrid in Angularjs controller when grid has child grid:
ex:

<script>
$(function(){
       $("#Grid").ejGrid({
                        allowTextWrap: true,
                        allowPaging: true,
                        detailsExpand: "expand",
                        pageSettings: {
                            pageSize: 20
                        },
                        create: "ReviewQuespager",
                        dataSource: folder,
                        columns: [
                            { field: "folderName", headerText: "Folder Name" },    
                            { template: "#FolderEditTemplate", textAlign: "center", width: 50 }
                        ],
                        childGrid: {
                            dataSource: obj,
                            queryString: "reviewQuestionFolderId",
                            allowTextWrap: true,                        
                            allowSorting: false,
                            detailsTemplate: "#tabGridContents",
                            detailsDataBound: "detailGridData",
                            columns: [                              
                                { field: "categoryName", headerText: "Category Name" },                             
                                { template: "#ColumnEditcatTemplate", textAlign: "center", width: 50 }
                            ]
                        }

                    });

})
</script>

above is a grid which i have to define in cshtml file.
previously for only one level of data I used to fill the data by defining the grid instance only once(at page load) and then pushing the data like: $("#Grid").ejGrid("dataSource", data);  in angularjs.



so how can I do the same but with child grid data as well as parent data ?


2) In the same grid the problem is that whenever I update any entry of the grid. the grid has to be refreshed fully in order to properly show the data. Cant it be just like to update the specific data (just like in angularjs) ?  The problem which I'm facing is there are 3 level of grid data in one grid(1 parent>1child(parent)>1 child) and i'm performing edit/delete for those data. How can i change the data in the grid as well without refreshing the page ?

3)this is the current scene: suppose i edit or delete any data in any layer then i have to refresh the grid. Bu the child grid collapses. Is it possible to refresh the grid and then open the child grid as well ?



3 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team August 1, 2018 12:25 PM UTC

Hi Raj,  
  
Query 1 : How to fill data in ejGrid in javascript file when grid has child grid?  
  
Initially when the dataSource is given for the parent grid and child grid then the data is loaded for the both parent and child grid as well. But if you want to refresh the data of the grid externally then the dataSource method of Grid can be used. If the newly given dataSource for the parent grid contains the same columns as the previous dataSource then the child grid data will be automatically updated based on the new querystring values.  
  
Query 2 : In the same grid the problem is that whenever I update any entry of the grid. the grid has to be refreshed totally in order to properly show the data.  
  
We suspect that the updated records are not updated properly because PrimaryKey column is not defined for the grid. For the editing operations of the Grid to work properly the PrimaryKey column must be defined. Please refer the below documentation for the details of PrimaryKey column and Editing.  
  
  
  
Query 3 : suppose i edit or delete any data in any layer then i have to refresh the grid. Bu the child grid collapses. Is it possible to refresh the grid and then open the child grid as well ?  
  
Please check whether the edit operation is working properly by defining the Primarykey column. If the edit operation works properly then there is no need to refresh the data and the child grid remains in the expanded state as well.  
  
We have prepared a sample with the given code example. Please refer the below link for the sample.  
  
  
If you still face the issues please share the following details.  
  
1.            Share the purpose of refreshing the data for both the parent grid and child grid externally.  
2.            If possible please provide a video demonstration of your issues.  
3.            If possible please try to reproduce the mentioned issues in the attached sample.  
  
Regards,  
Prasanna Kumar N.S.V  
 


RK Raj Kumar August 7, 2018 11:27 AM UTC

How to fill data in ejGrid in javascript file when grid has child grid? I meant how do we update the child grid data ? Like When I want to update main Grid data then all I do is bring the data in javascript and write this :   $("#Grid").ejGrid("dataSource", data);  How should I write the data if i want to update only the child data  of the grid ?? The childData and Grid data are coming separately. So i cannot just update only the main grid and leave child grid data to automatically adjust. what if i have 2 or more layers of child grid data then how to update one or each one of them without collapsing the child grid ?

The sample which you people have provide is not what i'm working on . I'm not directly editing in the grid. I working with data which is populating in the grid and using templates to edit(a dialog will open which will bring the required data from server and we can edit it in elements like textbox or checkbox etc then on button click we save the data and again the Grid data is fetched from server and populated in the Grid).

What if I have a column which I want to make as primarykey column but I do not want to show it in the grid then how should I do that ? even in child grid as well

PK Prasanna Kumar Viswanathan Syncfusion Team August 9, 2018 11:36 AM UTC

Hi RajKumar, 

Query 1 :  what if i have 2 or more layers of child grid data then how to update one or each one of them without collapsing the child grid ? 
 
We have achieved this requirement using expandCollapse method and detailsExpand , actionComplete events of ejGrid. Please refer the below code example. 

In the below code example we have  


$(function () { 
         
        $("#Grid").ejGrid({ 
            dataSource: data, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
            allowSorting: true, 
            actionComplete:"complete", 
            detailsExpand:"expand", 
            columns: [ 
                { field: "EmployeeID", headerText: 'Employee ID',isPrimaryKey:true, textAlign: ej.TextAlign.Right, width: 75 }, 
                { 
                    field: "FirstName", headerText: 'First Name', editTemplate: { 
                        create: function () { 
                            return "<input>"; 
                        }, 
                        read: function (args) { 
                            return args.ejMaskEdit("get_UnstrippedValue"); 
                        }, 
                        write: function (args) { 
                            args.element.ejMaskEdit({ 
                                value: args.rowdata["FirstName"] 
                            }); 
                        } 
                    }, textAlign: ej.TextAlign.Left, width: 100 }, 
                
            ], 
            childGrid: { 
                dataSource: dataManger2, 
                queryString: "EmployeeID", 
                allowPaging: true, 
                detailsExpand:"expand", 
                editSettings: {allowEditing:true,allowAdding:true,allowDeleting:true}, 
                detailsTemplate: "#tabGridContents", 
                detailsDataBound: "detailGridData", 
                columns: [ 
                    { field: "OrderID", headerText: 'Order ID',isPrimaryKey:true, textAlign: ej.TextAlign.Right, width: 75 }, 
                    { field: "EmployeeID", headerText: 'EmployeeID',textAlign: ej.TextAlign.Right, width: 75 }, 
                    { 
                        field: "ShipCity", headerText: 'Ship City', editTemplate: { 
                            create: function () { 
                                return "<input>"; 
                            }, 
                            read: function (args) { 
                                return args.ejMaskEdit("get_UnstrippedValue"); 
                            }, 
                            write: function (args) { 
                                args.element.ejMaskEdit({ 
                                    value: args.rowdata["ShipCity"] 
                                }); 
                            } 
                        }, textAlign: ej.TextAlign.Left, width: 100 }, 
                    
                ], 
                }, 
 
        }); 
    }); 
 
    
 
    var expanded = []; 
    var flag = true; 
 
    function expand(args) { 
        if (flag) { 
            expanded.push(args.masterRow[0].rowIndex); 
            flag = true; 
        } 
    } 
 
    function complete(args) { 
        if (args.requestType == "refresh") { 
            if (expanded.length != 0) { 
                flag = false; 
                for (var i = 0; i < expanded.length; i++) {                    
                    this.expandCollapse(this.getRowByIndex(expanded[i]).find("td.e-detailrowcollapse")); 
                } 
            } 
        } 
    } 
    function update() { 
        var obj = $("#Grid").ejGrid("instance"); 
        obj.model.childGrid.dataSource = data1;  //updating the dataSource of childgrid 
        $("#Grid").ejGrid("dataSource", newdata); //updating the dataSource of parent grid 
    } 

Query 2 : I working with data which is populating in the grid and using templates to edit(a dialog will open which will bring the required data from server and we can edit it in elements like textbox or checkbox etc then on button click we save the data and again the Grid data is fetched from server and populated in the Grid). 
 
According to this query we suspect that you are not using inbuilt Editing feature of grid to edit the records of grid. But, you are using your own dialog template to edit the records and fetching the data from the server side using an ajax post and in the success event you are updating the new set of data to the grid. So , we suggest you to use the above given solution to update the data to the grid and childgrid without collapsing the childgrid. 

Query 3 : What if I have a column which I want to make as primarykey column but I do not want to show it in the grid then how should I do that ? even in child grid as well 
 
To hide the column we suggest you to set the visible property as false for that column. Please refer the below documentation for more details of visible property. 


Please refer the below link for the sample. 


If you need any further assistance please get back to us. 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon