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. Image for the cookie policy date

ejGrid Angular webApi example

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!


1 Reply

BM Balaji Marimuthu Syncfusion Team 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

[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

Loader.
Up arrow icon