how to refresh only single row in a grid

[Shalini]

I'm trying to refresh only single row in a grid which has a child grid with n no of records.

I'm trying to add one more record to the child grid and it has to refresh the child grid and add that record.

But its not working.

I have attached the picture below for clarity.

this is the javascript for child grid which I'm calling through angularjs

$scope.getQuestions = function () {

var child=e;
child.detailsElement.find('#gridTab').ejGrid({
dataSource: revqlist,

columns: [

{ template: "#questions",width: "95%", },

{ template: "#ColumnaddTemplate",width: "5%", },
],
create: function create(args) {

this.getHeaderContent().hide()

},

});
child.detailsElement.find(".tabcontrol").ejTab();
catid = null;

}).catch(function (response) {
Console.log(response.data.Message);
});

}

this is main ejgrid

$("#Grid").ejGrid({
dataSource: obj,
allowTextWrap: true,

allowSorting: false,
detailsTemplate: "#tabGridContents",
detailsDataBound: "detailGridData",
columns: [
{field:"categoryName" ,width:"89%"},
{ template: "#addq", width: "5%" },
{ template: "#ColumnEditTemplate", textAlign: "center", width: "10%"}
],

});

function detailGridData(e) {

catid = e.data["id"];//category i
// revid = e.data["id"];
child = e;
$("#hideappData").click();

}

HTML Code

Thanks

Attachment: syncfusion_expansion_a4612c9f.rar

[Kuralarasan Muthusamy]

Hi Shalini, 

Thanks for contacting Syncfusion support. 

We have analyzed you query and we found that you have used detailsTemplate to create the child grid. We suspect that you want to save the child grid record after editing the child Grid. If you use child grid, then you need to use assign the parent grid primaryKeyField to child Grid. Because child grid always depends on the parent grid. While using the parent grid primaryKeyField in child grid, then you need to set defaultValue to this field in child Grid. Because, then only it will go to correct table while editing the grid. Also you need to use unique id for all the child grid. Please refer the following code example: 

<div> 

    <div ng-app="GridCtrl"> 

        <div ng-controller="bodyCtrl"> 

            <div ej-grid id="Grid" e-datasource="data e-detailstemplate="#tabGridContents" e-detailsdatabound="detailGridData"> 

                <div e-columns> 

                    <div e-column e-field="EmployeeID" e-headertext="EmployeeID" e-isprimarykey="true"></div> 

                </div> 

            </div> 

        </div> 

    </div> 

</div> 

 

<script> 

    function detailGridData(e) { 

        var filteredData = e.data["EmployeeID"]; 

        e.detailsElement.find("#detailGrid" + e.data.EmployeeID).ejGrid({ 

             

            columns: [ 

                { field: "EmployeeID", allowEditing: false, visible: false, defaultValue: filteredData, width: 80, textAlign: ej.TextAlign.Right }, 

                { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right }, 

 

                                    ..... 

                 

            ] 

        }); 

    } </script> 

 

<script id="tabGridContents" type="text/x-jsrender"> 

            <div id="detailGrid{{:EmployeeID}}"/> 

</script> 

In this code we have used parent Grid primaryKeyField (i.e EmployeeID) in child grid. Also we have set the defaultValue to this EmployeeID field in child Grid by using defaultValue property of the grid. We have used unique ID for all the Child Grid. We have created this unique ID by using the EmployeeID field value of the Grid. 

We have also created the sample with your requirement and that sample can be downloadable from the below link, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/F137943-41304633.zip 

Please refer the following link to know about defaultValue property of the Grid: 

https://help.syncfusion.com/api/js/ejgrid#members:columns-defaultvalue 

Regards, 

Kuralarasan M.