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.

ejGrid Angular webApi example

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 07:13 AM

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

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.

;