This is a migrated thread and some comments may be shown as answers.

Can't perform CRUD operations

3 Answers 25 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Han
Top achievements
Rank 1
Han asked on 14 Mar 2019, 05:17 PM

Hello,

I'm trying to use kendo grid with angularjs and webApI

From days of typing and searching I want to understand why when posting I get all field as null parameters

I'm still don't understand kendo grid very well

so, I appropriate any help..

 

Model:

    public class EmployeesInfo
    {
        public EmployeesInfo() { }

        //[Required]
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public int Phone { get; set; }
        public string Job { get; set; }
        public string Department { get; set; }
    }

 

View:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Try</title>
   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">

    <script src="http://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>

</head>
<body>
    <div id="example" ng-app="KendoDemos">
        <h3 style="font-style:italic;color:#F35800"> Information </h3>
        <br />

        <div ng-controller="MyCtrl">
            <kendo-grid
                k-options="mainGridOptions"
                k-data-source="DS"
                k-on-change="onChange(kendoEvent)"
                k-on-save="onSave(kendoEvent)"
                k-selectable="true">
            </kendo-grid>
            
        </div>
    </div>

<script>


        var app = angular.module("KendoDemos", ["kendo.directives"]);
        app.controller("MyCtrl",
            function($scope) {
                $scope.DS = new kendo.data.DataSource({
                    transport: {
                        contentType: "application/json",
                        read: {
                            url: "/api/EmployeesInfoes",
                            dataType: "json",
                            type: "GET"
                        },
                        update: {
                            url: "/api/EmployeesInfoes/PutEmployeesInfo",
                            dataType: "json",
                            type: "PUT"
                        },
                        destroy: {
                            url: "/api/EmployeesInfoes/DeleteEmployeesInfo",
                            dataType: "json",
                            type: "DELETE"

                        },
                        create: {
                            url: "/api/EmployeesInfoes/PostEmployeesInfo",
                            dataType: "json",
                            type: "POST"

                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read") {
                                console.log(kendo.stringify(options.models));
                                console.log(JSON.stringify(options.models));
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 8,
                   
                    schema: {
                        
                        model: {
                            id: "ID",
                            fields: {
                                ID: { editable: false, nullable: false, type: "number" },
                                Name: { editable: true, nullable: false,type: "string", validation: { required: true } },
                            }

                        }
                    }

                });

              //  $scope.onSave = function (e,) {

                    // Disable the editor of the "id" column when editing data items
                  //  console.log(e);

               // }

                //$scope.onChange = function(e) {
                 //   alert("on change");
                //};

                $scope.mainGridOptions = {
                    dataSource: $scope.DS,
                 //   dataBound:function(e){
                   //       $('.k-grid-add').unbind("click");
        
                     //     $('.k-grid-add').bind("click", function() {
                       //       console.log("Handle the add button click");

                         // });
                      //},
                    toolbar: ["create"],
                    columns: [
                        { field: "ID", title: "ID", width: "180px" },
                        { field: "Name", title: "Name", width: "180px" },
                        { field: "Age", title: "Age", width: "180px" },
                        { field: "Phone", title: "Phone", width: "180px" },
                        { field: "Job", title: "Job", width: "180px" },
                        { field: "Department", title: "Department", width: "180px" },
                        { command: ["edit", "destroy"], title: "Actions", width: "250px" }
                    ],
                    editable: "popup",
                    pageable: true,
                    filterable: { mode: "row" },


                };

            });


</script>
</body>
</html>  

 

 

 

Controller:

 public class EmployeesInfoesController : ApiController
    {
        private DetailGridContext db = new DetailGridContext();

        // GET: api/EmployeesInfoes
        
        public IQueryable<EmployeesInfo> GetEmployees() {
            return db.Employees;
        }

        // GET: api/EmployeesInfoes/5
        [ResponseType(typeof(EmployeesInfo))]
        public async Task<IHttpActionResult> GetEmployeesInfo(int id)
        {
            EmployeesInfo employeesInfo = await db.Employees.FindAsync(id);
            if (employeesInfo == null)
            {
                return NotFound();
            }

            return Ok(employeesInfo);
        }

        // PUT: api/EmployeesInfoes/5
        [ResponseType(typeof(void))]
        public async Task<IHttpActionResult> PutEmployeesInfo(int id, EmployeesInfo employeesInfo)
        {
            if (!ModelState.IsValid)
            {


                return BadRequest(ModelState);
            }

            if (id != employeesInfo.ID)
            {
                return BadRequest();
            }

            db.Entry(employeesInfo).State = EntityState.Modified;

            try
            {
                await db.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!EmployeesInfoExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/EmployeesInfoes
        [ResponseType(typeof(EmployeesInfo))]
        public async Task<IHttpActionResult> PostEmployeesInfo
            ([FromBody]EmployeesInfo employeesInfo) 
{
            if (!ModelState.IsValid) {

              return BadRequest(ModelState);

                

            }

            db.Employees.Add(employeesInfo);
            await db.SaveChangesAsync();
           
            return CreatedAtRoute("DefaultApi", new { id = employeesInfo.ID }, employeesInfo);
        }

        // DELETE: api/EmployeesInfoes/5
        [ResponseType(typeof(EmployeesInfo))]
        public async Task<IHttpActionResult> DeleteEmployeesInfo(int id)
        {
            EmployeesInfo employeesInfo = await db.Employees.FindAsync(id);
            if (employeesInfo == null)
            {
                return NotFound();
            }

            db.Employees.Remove(employeesInfo);
            await db.SaveChangesAsync();

            return Ok(employeesInfo);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool EmployeesInfoExists(int id)
        {
            return db.Employees.Count(e => e.ID == id) > 0;
        }
    }

 

3 Answers, 1 is accepted

Sort by
0
Han
Top achievements
Rank 1
answered on 14 Mar 2019, 06:06 PM

Note:

Read operation work with me.

When perform create Api receive null field.

0
Han
Top achievements
Rank 1
answered on 16 Mar 2019, 05:02 PM
No Response at all !
0
Alex Hajigeorgieva
Telerik team
answered on 18 Mar 2019, 03:56 PM
Hi, Han,

I am sorry to see that you are frustrated with the time that it took us to get back to you so below you can read more about the response time of the team.

The Kendo UI team handles the support tickets in the time that they are due.

The forums have a 48 hours response time - from Monday to Friday. So if a forum thread is submitted on Friday evening at 7 PM, it will be due on Tuesday by 7 PM.

On the other hand, private support tickets usually have 24 hours response time Monday through to Friday, unless it is trial account. The trial accounts have a 72 hours response time for private tickets so for you it is quicker to use the forums.

I have already responded to you in the other thread that you have posted. This one will be closed as it is a duplicated post.

In case you have further questions, I will be sure to answer them here:

https://www.telerik.com/forums/kendo-grid-returning-null-values-in-my-model-on-web-api-end#c4yq5jCfUEOXKb1CoX8myg

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Han
Top achievements
Rank 1
Answers by
Han
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or