Refresh grid after addition

[Bart Kappel]

We have been evaluating your angular controls and have ran into some problems. After some research on your site we found a way to make the grid editable and addible, the only problem we have is that after we add a record the datamanager reloads the data(with the added record) but the grid is not updated. How can we refresh the datagrid? Besides that problem we also face another problem, we are using angularjs and have some http inceptors to inject the auth token in all AJAX calls, our research indicated that you are using the jquery AJAX methods, we now have a workaround but ideally we would like to stick to the angularjs AJAX lib, is it possible to configure the datamanager to use angularjs without the need of for example these kind of solutions (http://www.syncfusion.com/kb/3781/grid-crud-operation-using-angular-ngresource-and-webapi-service & http://www.syncfusion.com/forums/119401/binding-grid-in-angular-on-user-driven-events).

To refresh the grid we tried the following code, but that didnt work:

<div id="Grid" ej-grid

             e-datasource="data"

             e-allowpaging="true"

             e-allowsorting="true"

             e-toolbarsettings="toolbarSettings"

             e-editsettings="editSettings"

             e-pagesettings="pageSettings"

             e-actioncomplete="actionComp"

             e-columns="empCols">

        </div>

$scope.editSettings = {

        allowEditing: true,

        allowAdding: true,

        allowDeleting: true,

        showAddNewRow: true,

        rowPosition: "bottom",

        editMode: ej.Grid.EditMode.Dialog

    };

$scope.actionComp = function (args) {

        if (args.requestType === 'save') {

            var grid = $("#Grid").ejGrid("instance");

            $('#Grid').refreshContent();

        }

    };

Thank you for your help

[Sellappandi Ramu]

Hi Bart Kappel,

Thanks for using Syncfusion products.

Query #1: The only problem we have is that after we add a record the datamanager reloads the data(with the added record) but the grid is not updated. How can we refresh the datagrid?

We have created and attached a sample for your requirement by using angular factory. Please refer the following code example.

    <div ng-controller="PhoneListCtrl">

        <div id="Grid" ej-grid

             e-datasource="data"

             e-allowpaging="true"

             e-allowsorting="true"

             e-toolbarsettings="toolbarSettings"

             e-editsettings="editSettings"

             e-allowpaging="true"

             e-actioncomplete="actionComp"

             e-columns="empCols">

        </div>

    </div>

</div>

<script>

    angular.module('listCtrl', ['ejangular', 'ngResource']).factory('Crud', function ($resource) {

        return $resource('/api/Values/:value', {}, {

            'update': { method: 'PUT' }

        });

    }).controller('PhoneListCtrl', function ($scope) {

        $scope.empCols = [

                  { field: "EmployeeID", width: 105, isPrimaryKey:true, textAlign: ej.TextAlign.Right, headerText: "Employee ID" },

                  { field: "FirstName", headerText: 'First Name', width: 100 },

                  { field: "LastName", headerText: 'Last Name', width: 110 },

                  { field: "City", headerText: 'City', width: 90 }

        ]

        $scope.data = ej.DataManager({ url: "/api/Values", adaptor: "WebApiAdaptor" });

        $scope.editSettings = {

            allowEditing: true,

            allowAdding: true,

            allowDeleting: true,

            showAddNewRow: true,

            rowPosition: "bottom",

            editMode: ej.Grid.EditMode.Dialog

        };

        $scope.toolbarSettings = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

        $scope.editHandler = function (args) {

            Crud.update(args.data)

        }

        $scope.addHandler = function (args) {

            Crud.save(args.data)

        }

        $scope.deleteHandler = function (args) {

            Crud.delete({ id: args.data.EmployeeID })

        }

    })

We have attached sample in below link:

Sample Link: http://www.syncfusion.com/downloads/support/forum/119445/ze/EJGrid_1194451227227133

Query #2: Besides that problem we also face another problem, we are using angularjs and have some http inceptors to inject the auth token in all AJAX calls, our research indicated that you are using the jquery AJAX methods, we now have a workaround but ideally we would like to stick to the angularjs AJAX lib, is it possible to configure the datamanager to use angularjs?

Could you please share the following details regarding your requirement? It will help us to provide the prompt solution.

1. What are the problems you have faced while using angularJS with ejDatamanager?

2. Please provide us clear information regarding your requirements. The information provided would be more helpful for us to analyze the issue and provide you the response as early as possible.

3. If you face any problems while using angular JS with ejGrid, please provide an issue reproducing sample, which will help us to provide the prompt solution.

Please try the above sample and get back to us with mentioned details.

Regards,
Sellappandi R

[Bart Kappel]

Hi Sellappandi Ramu,

Thank you for the example we figured out what we did wrong, with the sample you also kinda answered my second question. But just to clarify, we have an authentication system in place in angularjs which first authenticates the user and sends back an authentication token, this token is injected into all the ajax request that are made with angularjs via the $http module. We are now using a jquery ajax prefilter to do the same when using the ejGrid, but your example shows the use of ngResource so that is also an option we can consider.

Thank you for your support

[Sellappandi Ramu]

Hi Bart Kappel,

Thanks for the update.

We are also able to use the jQuery Ajax prefilter instead of ngResource to send authentication token. Please refer the following code example for more reference.

Also we have a default property called headers in ej.DataManager. By using this property, we can set request header when AJAX request post. So we are able to set authentication token using header property of ej.DataManager. We have created a sample by using headers property and it can be downloaded from following link location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119445/ze/EJGrid_119445(2)-1250104867

In the above sample, we have used actionBegin event to change the authentication before send it to server side. Please refer the following code example.

<script>

    angular.module('listCtrl', ['ejangular']).controller('PhoneListCtrl', function ($scope) {

        $scope.empCols = [

                  { field: "EmployeeID", width: 105, isPrimaryKey:true, textAlign: ej.TextAlign.Right, headerText: "Employee ID" },

                  { field: "FirstName", headerText: 'First Name', width: 100 },

                  { field: "LastName", headerText: 'Last Name', width: 110 },

                  { field: "City", headerText: 'City', width: 90 }

        ]

        $scope.data = ej.DataManager({ url: "/api/Values", adaptor: "WebApiAdaptor", headers: [{ "UserName": "Admin" }] });

        $scope.editSettings = {

            allowEditing: true,

            allowAdding: true,

            allowDeleting: true,

            showAddNewRow: true,

            rowPosition: "bottom",

            editMode: ej.Grid.EditMode.Dialog

        };

        $scope.begin = function (args) {

            this._dataManager.dataSource.headers.push({ "UserName": "Frank" })

        }

        $scope.toolbarSettings = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

    })
</script>

Please try the above sample and let us know if it helps. Or if we misunderstood your query, please provide us clear information regarding your requirements or issue reproducing sample. It will help us to provide the prompt solution.

Regards,
Sellappandi R

[Bart Kappel]

Hi Sellappandi Ramu,

The provided solution works for us.

Thank you for your help.

[Sellappandi Ramu]

Hi Bart Kappel,

Thanks for the update.

Please get back to us if you need any further assistance we are happy to assist you.

Regards,
Sellappandi R