ejGrid Angular webApi example

[Alberto Reyes]

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]

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

[Default]

<div>

       <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>

                    </div>

                </div>

            </div>

        </div>

    </div>

<script>

    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"];

        });

</script>

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

[OrdersController]

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

            });

            db.SubmitChanges();

        }

        // 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;

            db.SubmitChanges();

        }

        // DELETE api/<controller>/5

        public void Delete(int id)

        {

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

            db.EmployeePhotos.DeleteOnSubmit(emp);

            db.SubmitChanges();
        }

Please refer the documentation in following link:
http://helpjs.syncfusion.com/js/datamanager/data-adaptors#webapi-adaptor

Please let us know if you have any queries.

Regards,
Balaji Mairmuthu