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

Kendo UI Grid Not working for MVC ApiController

5 Answers 343 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ä m o l
Top achievements
Rank 2
Ä m o l asked on 25 Apr 2012, 04:34 PM
<script type="text/javascript">
    var crudServiceBaseUrl = "api/VMDWebAPI";
    var deferReasonGrid = $("#DeferReasonGrid");
    $(document).ready(function ()
    {
        var DeferReasonDS = new kendo.data.DataSource({
            transport: {
                read: {
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "GET",
                    complete: function (jqXHR, textStatus) { }
                }
                ,
                create: {
                    cache: false,
                    contentType: "application/json;charset=utf-8",
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "POST",

                    complete: function (jqXHR, textStatus)
                    {
                        deferReasonGrid.data("kendoGrid").dataSource.read();
                    }
                },
                update: {
                    cache: false,
                    contentType: "application/json;charset=utf-8",
                    url: crudServiceBaseUrl,
                    dataType: "json",
                    type: "PUT",

                    complete: function (jqXHR, textStatus)
                    {
                        deferReasonGrid.data("kendoGrid").dataSource.read();
                    }
                },
                destroy: {
                    url: crudServiceBaseUrl,

                    type: "DELETE",
                    complete: function (jqXHR, textStatus)
                    {

                        deferReasonGrid.data("kendoGrid").dataSource.read();
                    }

                },
                parameterMap: function (data, operation)
                {

                    if (operation == "update" || operation == "create") {
                        if (data.models[0].DeferReasonID == null && operation != "destroy") {
                            operation = "create";
                        }
                        else {
                            operation = "update";
                        }
                        return kendo.stringify({ DeferReason: data.models[0] });
                    }
                    else if (operation == "destroy") {

                        return kendo.stringify({ DeferReason: data.models[0] });
                    }
                }
            }
            ,
            batch: true,
            pageSize: 12,
            schema: {
                model: {
                    fields: {
                        DeferReasonID: { editable: false, nullable: true, defaultValue: '00000000-0000-0000-0000-000000000000' },
                        Description: { validation: { required: true, validationmessage: "Required:Description"} },
                        CreatedDate: { type: "date", editable: false, template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #' },
                        ModifiedDate: { type: "date", editable: false, template: '#= kendo.toString(CreatedDate,"MM/dd/yyyy") #' }
                    }
                }
            }
        });


        var DeferReasonGrid = deferReasonGrid.kendoGrid({
            dataSource: DeferReasonDS,
            pageable: false,
            navigatable: false,
            selectable: true,
            sortable: false,
            editable: { mode: "popup", destroy: "true", update: "true", confirmation: "Are you sure you want to remove this Defer Reason?" },
            toolbar:
                    [
                        "create"
                    ],
            columns:
                    [
                        {
                            field: "Description",
                            title: '<span style=\'text-align:left;\'>Description</span>',
                            width: "360px"
                        },

                        {
                            command: "destroy"
                        }
                    ]
        });
    });
</script>


Here is my API

public class VMDWebAPIController : ApiController
    {

        [HttpGet]
        public DeferReason[] GetAllDeferReason()
        {
            try
            {
                return DeferReasonDAL.GetAllDeferReasons().ToArray();
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        [HttpPost]
        public void InsertDeferReason(DeferReason DeferReason)
        {
            try
            {

                DeferReasonDAL.Insert(DeferReason);
             
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        [HttpPut]
        public void UpdateDeferReason(DeferReason DeferReason)
        {
            try
            {

                DeferReasonDAL.Update(DeferReason);
              
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        [HttpDelete]
        public void DeleteDeferReason(DeferReason DeferReason)
        {
            try
            {

                DeferReasonDAL.Remove(DeferReason.DeferReasonID);
               
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }


    }

5 Answers, 1 is accepted

Sort by
0
Vivek
Top achievements
Rank 1
answered on 27 Apr 2012, 09:00 AM
Thanks! I was facing a problem and this code helped me figure out how to map parameters when updating a datasource.
0
Ä m o l
Top achievements
Rank 2
answered on 27 Apr 2012, 02:54 PM
Hey Vivek!! its good that your problem is solved... but my issue regarding the CRUD is still not resolved......
0
Vivek
Top achievements
Rank 1
answered on 28 Apr 2012, 07:09 PM
Sorry buddy ... I'm just getting started with Kendo and only use PHP so I barely understand the code.
I just wanted to appreciate that I got a hint on how to resolve an issue I was facing.
0
Rajendra
Top achievements
Rank 1
answered on 08 Aug 2012, 06:07 AM
Hi Guys
You have any sample application of integration with wcf application for asp.net and i want to  create record from popupwindow how it is possible 
Please advice .

Thanks 
Rajendra  
0
Abhishek
Top achievements
Rank 1
answered on 29 Aug 2012, 04:29 AM
Hi Amol,
Try to add unique ID within the model of DataSource as mentioned below. As for UPDATE and DELETE operation you would need unique value to perform the operation at database.

model: {
id: "DeferReasonID",
fields: {
...
}

Many Thanks,
Abhishek
Tags
Grid
Asked by
Ä m o l
Top achievements
Rank 2
Answers by
Vivek
Top achievements
Rank 1
Ä m o l
Top achievements
Rank 2
Rajendra
Top achievements
Rank 1
Abhishek
Top achievements
Rank 1
Share this question
or