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.
Unfortunately, activation email could not send to your email. Please try again.

Data binding to syncfusion grid using custom service not working

Thread ID:

Created:

Updated:

Platform:

Replies:

119575 Jul 10,2015 12:59 AM Jul 20,2015 08:50 AM JavaScript 6
loading
Tags: ejGrid
Gomtesh
Asked On July 10, 2015 12:59 AM



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 [Syncfusion]
Replied On July 13, 2015 08:47 AM

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: http://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
Replied On July 16, 2015 07:10 AM

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 [Syncfusion]
Replied On July 17, 2015 08:24 AM

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: http://js.syncfusion.com/demos/web/#!/azure/grid/Columns/ColumnTemplate
Documentation: http://helpjs.syncfusion.com/js/api/ejgrid#members:columns-template
                        http://helpjs.syncfusion.com/js/api/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.
http://www.syncfusion.com/kb/5173/
http://www.syncfusion.com/kb/4104

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
Replied On July 18, 2015 01:38 AM

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
Replied On July 18, 2015 01:39 AM

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 [Syncfusion]
Replied On July 20, 2015 08:50 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;