Angular ej-grid editing only shows the first row data, does not bind with Angular.

[James Choca]

I'm trying to add editing functionality to an ej-grid directive, but when I click the row to edit it, it shows the data for the first row, no matter which row I select.  Then when I save, it doesn't actually save. In any case, the data does not seem to bind with the scope variable.

I've replicated the issue here:

http://plnkr.co/edit/JAlu9gl83f9iLfTjsAkD?p=preview

The code I'm using looks like this:

 <div id="grid" ej-grid e-datasource="data"

            e-allowPaging="true"

            e-editSettings-allowAdding="true"

            e-editSettings-allowDeleting="true"

            e-editSettings-allowEditing="true"

            e-editSettings-showConfirmDialog="false"

            e-toolbarsettings-showtoolbar="true"

            e-toolbarsettings-toolbaritems="tools">

   <div e-columns>
       <div e-column e-field="id" e-textalign="center"></div>
       <div e-column e-field="desc" e-textalign="center"></div>
   </div>

</div>

[Madhu Sudhanan P]

Hi James,

Thanks for contacting Syncfusion support.

Query #1: “when I click the row to edit it, it shows the data for the first row, no matter which row I select.”

The cause of the issue is due to the missing of the primary key column in grid. To perform editing in grid, we need to specify a primary column in grid by setting the isPrimarKey property of the column as true.

<div id="grid" ej-grid e-datasource="data"

                       . . . . .

                     e-toolbarsettings-toolbaritems="tools">

                    <div e-columns>

                        <div e-column e-field="id" e-textalign="center" e-isprimarykey="true"></div>

                        <div e-column e-field="desc" e-textalign="center"></div>

                    </div>
                </div>

For more information please refer to the below help links.

http://www.syncfusion.com/kb/2675/cant-edit-any-row-except-the-first-row-in-grid

http://helpjs.syncfusion.com/js/api/ejgrid#members:columns-isprimarykey


Query #2: “when I save, it doesn't actually save. In any case, the data does not seem to bind with the scope variable”

We are currently validating this query and we will analyze and update you the response on December 9, 2015. Until then we appreciate your patience.

Regards,
Madhu Sudhanan. P

[James Choca]

Thank you! I will await your response for issue #2.

[Saravanan Arunachalam]

Hi James,

Query #2: When I save, it doesn't actually save. In any case, the data does not seem to bind with the scope variable.

We have achieved your requirement by initiating the digest cycle by explicitly calling scope.$digest in the actionComplete event of Grid control and refer to the below code example.

<div id="grid" ej-grid e-datasource="data"

                     e-actionComplete="complete"

                     . . .

</div>

<script>

        angular

  .module('myApp', [ 'ejangular'])

  .controller('myCtrl', MyCtrl);

        function MyCtrl($scope) {

            . . .

          $scope.complete = function(args){

                           if(args.requestType == "save" || args.requestType == "delete" )

                                  $scope.$digest();

                }

           

        }

    </script>

We have created a sample that can be download from the below link.

http://www.syncfusion.com/downloads/support/forum/121337/ze/F121337-2329735

Regards,

Saravanan A.

[James Choca]

Thank you, that works great!

[Saravanan Arunachalam]

Hi James,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Saravanan A.