Data binding to syncfusion grid using custom service not working

[Gomtesh]

I have used syncfusion grid and i want to bind data to syncfusion grid from API but data binding to syncfusion grid is not working

here is html code for grid

<div ng-controller="ContactsController as contact">
   <div id="Grid" ej-grid e-datasource="contact.Cdata"  e-columns="contact.columns" e-toolbarsettings='contact.tools' e-toolbarclick="contact.toolbarHandler"
   e-editsettings="contact.edittsetings" e-allowsorting="contact.allowsorting" e-sortsettings="contact.sortsettings" e-actionbegin="contact.actionBegin" e-allowpaging="contact.allowpaging"
e-pagesettings="contact.pagesettings" e-editsettings="contact.editsettings" e-allowreordering="contact.allowReordering" e-allowresizing="contact.allowResizing">
  </div>
</div>

Here is Controller method::

function ContactsController(CommonService) {


this.Cdata = [];

var d = CommonService.getCantactList();

d.then(function (response) {

    ContactsController.prototype.Cdata = response.data.Items;;
    console.log("success");
}, function (error) {
    console.log("error");
});

}

and the commonService is

this.getCantactList = function () {

            return $http.get("http://localhost:63138/api/Contact/GetContactsbyClientId?clientId=1", { cache: true });

}

And the API method is::

    public object GetContactsbyClientId(int clientId)
    {
        try
        {
            //return (ContactService.GetListByClientId(clientId));
            return new { Items = ContactService.GetListByClientId(clientId) };
        }
        catch (Exception)
        {
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError)
            {
                Content = new StringContent("An error occurred, please try again or contact the administrator."),
                ReasonPhrase = "Critical Exception"
            });
        }
    }

[Sellappandi Ramu]

Hi Gomtesh Hatgine,

Thanks for using Syncfusion products.

You have used “this.Cdata” in ContactsController provided code, which is the cause of the issue. We need to use the parameter name (CommonService) instead of “this”. Please refer the following example code.

<div ng-controller="ContactsController as contact">

        <div id="Grid" ej-grid e-datasource="contact.Cdata" e-toolbarsettings='contact.tools' e-columns="contact.columns" e-allowsorting="true" e-allowpaging="true"

             e-editsettings-allowadding="true" e-editsettings-allowediting="true" e-allowreordering="true" e-allowresizing="true">

        </div>

    </div>

    <script>

        angular.module('listCtrl', ['ejangular'])

        .controller('ContactsController', function ($scope, $http, $q) {

            this.columns = [

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

                      { field: "EmployeeName", headerText: 'Employee Name', width: 100 },

                      { field: "Country", headerText: 'Country', width: 110 },

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

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

            ]

            this.tools = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

            ContactsController(this);

            function ContactsController(CommonService) {

                CommonService.Cdata = [];

                var d = $http.get("/api/Values/GetContactsbyClientId?clientId=1", { cache: true });

                d.then(function (response) {

                    CommonService.Cdata = response.data.Items;

                    console.log("success");

                }, function (error) {

                    console.log("error");

                });

            }

        });
    </script>

We have created a sample by using WebAPI with Angular and it can be downloaded from following link:

Sample Link: https://www.syncfusion.com/downloads/support/forum/119575/ze/EJGrid_119575356619335

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

Regards,
Sellappandi R

[Gomtesh]

Thanks for reply But I think you not understand me properly

I have changed code for convenience.


  <div id="Grid" ej-grid e-datasource="group.data" e-query="group.query" e-columns="group.columns" e-editsettings="group.edittsetings" e-allowsorting="group.allowsorting" e-sortsettings="group.sortsettings" e-editsettings="group.editsettings" e-actioncomplete="group.complete" e-enablerowhover="false" e-enableautosaveonselectionchange="false"></div>
         
               

in controller::

var newColumns = [
                            { field: "Id", headerText: "ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "ClientID", headerText: "ClientID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75, visible: false },

                            { field: "Name", headerText: "Group Name", width: 90 },

                            {
                                headerText: "",
                                commands: [
                                    { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                                    { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                                    { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                                    { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
                                ],
                                isUnbound: true, width: 130, textAlign: ej.TextAlign.Right
                            }
    ];

     this.columns = newColumns;

initially i have initialize grid with empty data

     this.data = [];


And after getting data from service then bind it to grid::

 var d = $http.get("http://localhost:63138/api/Group/GetGroupListByClientId?accessid&clientId=1", { cache: true });

    d.then(function (response) {
        console.log(response.data)
        this.data = response.data.result;
        console.log("success");
    }, function (error) {
        console.log("error");
    });

data is getting into  response.data.result; but it is not binding to grid




Also Can you tell me about how to use user defined buttons instead of default buttons in place of Save, Cancel, Edit and Delete buttons

[Balaji Marimuthu]

Hi Gomtesh,

Sorry about the inconvenience caused.

Query:#1 initially i have initialize grid with empty data, And after getting data from service then bind it to grid:: data is getting into  response.data.result; but it is not binding to grid

Based on your requirement we have modified the sample and the same can be downloaded from following link.
Sample: EJGrid

In http promise function, the value of this is specified “window” and not the ContactsController. So we suggest you to store the value of this into a variable (ex: proxy)and bind the result to the proxy.Cdata instead of binding this.Cdata. Please refer the code example below.

  angular.module('listCtrl', ['ejangular'])

        .service('CommonService', ['$http', function ($http) {

            this.getCantactList = function () {

                return $http.get("/api/Values/GetContactsbyClientId?clientId=1", { cache: true });

            }

        }])

    .controller('ContactsController', ["CommonService", function (CommonService) {

        this.Cdata = [];

        this.columns = [

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

                  { field: "EmployeeName", headerText: 'Employee Name', width: 100 },

                  { field: "Country", headerText: 'Country', width: 110 },

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

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

        ];

        this.tools = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };

        var d = CommonService.getCantactList();

        proxy = this;

        d.then(function (response) {

            proxy.Cdata = response.data.Items;

            console.log("success");

        }, function (error) {

            console.log("error");

        });

    }]);
   

Query:#2  Also Can you tell me about how to use user defined buttons instead of default buttons in place of Save, Cancel, Edit and Delete buttons

If you want to use user defined buttons in column, instead of default buttons you can use the template column in Grid. By using the template column, we can render the button in column.

columns: [

            . . . .

            { headerText: "Employee Image", template: true, templateID: "#columnTemplate", textAlign: "center", width: 110 },

        ]

Please refer the online demo and documentation for use the template column in Grid.
Demo: https://js.syncfusion.com/demos/jquery/#!/azure/grid/Columns/ColumnTemplate
Documentation: https://help.syncfusion.com/api/js/ejgrid#members:columns-template
                        https://help.syncfusion.com/api/js/ejgrid#members:columns-templateid


Also, If you want to customize the default buttons, we suggest you to use the htmlAttributes in Grid. Please refer the code example below.

{

                      headerText: "Employee Details",

                      commands: [

                      {

                          type: "details",

                          buttonOptions: {

                              htmlAttributes: { id: "CustomButton", class: "btn-primary", style: "height: 28px; width: 100px;" },

                              text: "Details",

                              click: "onClick"

                          }

                      }

                      ],

                      isUnbound: true,

                      textAlign: ej.TextAlign.Center,

                      width: 150
                  }

Please refer the documentation for more information to customize the buttons.
https://www.syncfusion.com/kb/5173/how-to-add-custom-html-attributes-to-buttons-in-the-command-column
https://www.syncfusion.com/kb/4104/how-to-place-icons-in-command-column-buttons-instead-of-text

Please try using the above code examples. If the above solution doesn’t meet your requirement, or we misunderstood your requirement kindly provide more information regarding this issue.

Please let us know if you have any queries.

Regards,
Balaji Marimuthu

[Gomtesh]

I have make changes according to your suggestions but its not working i.e data not bind to grid.

I getting data,  array of rows in response.Items

So, i have assigned like,

proxy.data = response.result;

but its not working and when i checked data by console.log(response.Items) then it is getting in console.log but not binding to grid

[Gomtesh]

I have make changes according to your suggestions but its not working i.e data not bind to grid.

I getting data,  array of rows in response.Items

So, i have assigned like,

proxy.data = response.result;

but its not working and when i checked data by console.log(response.Items) then it is getting in console.log but not binding to grid

I have make changes according to your suggestions but its not working i.e data not bind to grid.

I getting data,  array of rows in response.Items

So, i have assigned like,

proxy.data = response.Items;

but its not working and when i checked data by console.log(response.Items) then it is getting in console.log but not binding to grid

[Sellappandi Ramu]

Hi Gomtesh,

We regret to let you know that, we are unable to reproduce the reported issue. Could you please share the following information to us to sort out the cause of the issue and provide the prompt solution?

1. Please check whether you have getting value in “response.Items” or “response.Result”. Because you have used “console.log(response.Items)” for getting value, but used “proxy.data = response.result;” to bound the value.

2. Please check the “response.Items” which you got the value as object data or string data. Please refer the following screen shot.

3. Kindly provide the issue reproducing sample to us. It will help us to sort out the cause of issue and provide the solution at the earliest.

Please get back to us with mentioned details.

Regards,
Sellappandi R