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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejGrid Angular webApi example

Thread ID:





119696 Jul 22,2015 11:56 AM UTC Jul 23,2015 11:13 AM UTC JavaScript 1
Tags: ejGrid
Alberto Reyes
Asked On July 22, 2015 11:56 AM UTC

Good afternoon

I am making an angular application / Asp.net WebAPI in which try to upload a ejGrid unsuccessful. I can not find documentation. Could you give me an example?

Thank you!

Balaji Marimuthu [Syncfusion]
Replied On July 23, 2015 11:13 AM UTC

Hi Alberto,

Thanks for using Syncfusion Products.

We have created a sample using angular with ASP.NET WebAPI. Please refer the sample and code example below.
Sample: WebApplication7



       <div ng-app="GridCtrl">

            <div ng-controller="bodyCtrl">

                <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-pagesettings-pagesize="3"  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="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textalign="right"></div>

                        <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div>







    angular.module("GridCtrl", ["ejangular"])

        .controller("bodyCtrl", function ($scope) {

            //Provide the datasource to the grid. Here the WebApiAdaptor is used.

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

            $scope.tools = ["add", "edit", "delete", "update", "cancel"];



By using the WebApiAdaptor we can perform the server side operation using WebAPI controller.


NorthwindDataContext db = new NorthwindDataContext();

        // GET api/<controller>      

        public PageResult<EmployeePhoto> Get(ODataQueryOptions opts)


            List<EmployeePhoto> emp = db.EmployeePhotos.ToList();

            return new PageResult<EmployeePhoto>(opts.ApplyTo(emp.AsQueryable()) as IEnumerable<EmployeePhoto>, null, emp.Count);


        // GET api/<controller>/

        public string Get(int id)


            return "value";


        // POST api/<controller>

        public void Post(EmployeePhoto employee)


            NorthwindDataContext db = new NorthwindDataContext();

            db.EmployeePhotos.InsertOnSubmit(new EmployeePhoto()


                EmployeeID = employee.EmployeeID,

                Name = employee.Name




        // PUT api/<controller>/5

        public void Put(EmployeePhoto employee)


            EmployeePhoto emp = (EmployeePhoto)db.EmployeePhotos.Single(s => s.EmployeeID == employee.EmployeeID);

            emp.EmployeeID = employee.EmployeeID;

            emp.Name = employee.Name;



        // DELETE api/<controller>/5

        public void Delete(int id)


            EmployeePhoto emp = (EmployeePhoto)db.EmployeePhotos.Single(s => s.EmployeeID == id);



Please refer the documentation in following link:

Please let us know if you have any queries.

Balaji Mairmuthu


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon