We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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>

5 Replies

MS Madhu Sudhanan P Syncfusion Team December 7, 2015 12:18 PM UTC

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


JC James Choca December 7, 2015 08:17 PM UTC

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


SA Saravanan Arunachalam Syncfusion Team December 10, 2015 04:09 AM UTC

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.



JC James Choca December 10, 2015 04:31 PM UTC

Thank you, that works great!


SA Saravanan Arunachalam Syncfusion Team December 11, 2015 04:38 AM UTC

Hi James,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Saravanan A.


Loader.
Up arrow icon