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

Kendo grid with WebApi Crud

8 Answers 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Palanisamy
Top achievements
Rank 1
Palanisamy asked on 16 Sep 2015, 02:27 PM

Hi am trying to do crud operation using javascript kendo grid with webapi. But one issue am facing here is that,even for update and delete also,post method only hitting. Kindly help me out. Below is my code 

JS

-----

@{
    ViewBag.Title = "KendoGrid";
}

<html>
<head>

    <title></title>
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }

        html {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .k-grid tbody .k-button {
            width: 81px !important;
            height: 25px;
            font-size: small;
        }

        #grid .k-grid-header .k-header {
            background-color: white;
            font-weight: bold;
        }

        .k-tooltip {
            background-color: orange !important;
            width: 300px;
            height: 60px;
        }

        .k-tooltip-content {
            vertical-align: middle;
        }

            .k-tooltip-content p {
                float: left;
            }

            .k-tooltip-content p {
                font-size: 1.4em;
                padding: 20px;
                width: 160px;
                text-align: left;
            }

        .k-grid-content > table > tbody > tr {
            /*background-color: white;*/
            background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
            background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            padding: 20px;
        }



        .k-grid-content > table > tbody > .k-alt {
            /*background-color: lightgray !important;*/
            background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
            background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
        }

        .k-master-row {
            background-color: white;
        }


        .k-grid tbody tr {
            height: 10px !important;
        }


            .k-grid tbody tr td {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 10px !important;
            }

        .k-grid .k-alt {
            background-color: lightgoldenrodyellow;
        }
        /*selection*/

        .k-grid table tr.k-state-selected {
            background: #f99;
            color: #fff;
        }

        .highlightedRow {
            background-color: yellow !important;
        }

        .k-grid {
            font-family: "DejaVu Sans", "Arial", sans-serif;
        }

        /* Hide the Grid header and pager during export */
        .k-pdf-export .k-grid-toolbar,
        .k-pdf-export .k-pager-wrap,
        .k-pdf-export a.k-button.k-button-icontext,
        .k-pdf-export .k-filter-row,
        .k-pdf-export .k-grouping-header,
        .k-pdf-export .k-grid tr td:last-child {
            display: none !important;
        }
    </style>
    <link href="~/Content/KendoStyles/kendo.common-material.min.css" rel="stylesheet" />
    <link href="~/Content/KendoStyles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/KendoStyles/kendo.default.min.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/Jszip.js"></script>
    <script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
    <script type="text/x-kendo-template" id="windowTemplate">
        Delete this client
        <strong>#= MasterName #</strong>?
        <br />
        <br />
        <button class="k-button" id="yesButton">Yes</button>
        <button class="k-button" id="noButton"> No</button>
    </script>
    <script>
        kendo.pdf.defineFont({
            "DejaVu Sans": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        });
    </script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/pako_deflate.min.js"></script>
</head>
<body>


    <div id="window"></div>
    <div id="example">
        <button id="show_col" class="k-button">Show Master Name</button>
        <button id="hide_col" class="k-button">Hide Master Name</button>
        <div id="grid"></div>
        @*<div id="sample"></div>
        <br /> <br />
        <div id="child"></div>*@
        <script>
            var hide = false;

            var ClientMaster = [
                        { "ClientID": 1, "ClientName": "Verizon Consumer", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "ClientID": 2, "ClientName": "Fiserv Securities Inc - 8137", "AppDesc": "*** ALL ***", "WC3ClientKey": "22-33" },
                        { "ClientID": 3, "ClientName": "Kaiser Permanente - Colorado (8079)", "AppDesc": "Statements-Statements", "WC3ClientKey": "29-58" },
                        { "ClientID": 4, "ClientName": "Kaiser Permanente - Georgia (1381)", "AppDesc": "*** ALL ***", "WC3ClientKey": "29-56" },
                        { "ClientID": 5, "ClientName": "United Concordia - 8025", "AppDesc": "CARDS-Cards", "WC3ClientKey": "35-77" },
                        { "ClientID": 6, "ClientName": "AAA Colorado - 1439", "AppDesc": "Cards-AAA Colorado Cards", "WC3ClientKey": "39-69" },
                        { "ClientID": 7, "ClientName": "Empire BCBS National Accounts - 04270", "AppDesc": "Digital-DC5 Digital Cards", "WC3ClientKey": "52-92" },
                        { "ClientID": 8, "ClientName": "CapitalOne - 4345", "AppDesc": "DC5E - T-Empire DC5E Test", "WC3ClientKey": "53-94" },
                        { "ClientID": 9, "ClientName": "BOA - 4270", "AppDesc": "No ClientApplication", "WC3ClientKey": "62-73" },
                        { "ClientID": 10, "ClientName": "Amazon - 2250", "AppDesc": "Card Only", "WC3ClientKey": "54-98" },
            { "ClientID": 111, "ClientName": "USAA", "AppDesc": "Electronic cards", "WC3ClientKey": "49-25" },
            { "ClientID": 112, "ClientName": "POC Demo", "AppDesc": "Demo cards", "WC3ClientKey": "87-96" },
            { "ClientID": 113, "ClientName": "Reliant Invoices", "AppDesc": "Emails", "WC3ClientKey": "14-82" },
            { "ClientID": 114, "ClientName": "Fiserv Atlanta - 20000", "AppDesc": "Emails", "WC3ClientKey": "54-21" },
            { "ClientID": 115, "ClientName": "Berkshire - 04730", "AppDesc": "Emails", "WC3ClientKey": "67-11" }

            ];


            var ClientDetails1 = [
                        { "MasterClientID": 1, "ClientID": 11, "ClientName": "Tier 1 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 12, "ClientName": "Tier 1 Verizon Consumer - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 13, "ClientName": "Tier 1 Verizon Consumer - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 14, "ClientName": "Tier 1 Verizon Consumer - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 15, "ClientName": "Tier 1 Verizon Consumer - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 16, "ClientName": "Tier 1 Verizon Consumer - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 17, "ClientName": "Tier 1 Verizon Consumer - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 18, "ClientName": "Tier 1 Verizon Consumer - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 19, "ClientName": "Tier 1 Verizon Consumer - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 20, "ClientName": "Tier 1 Verizon Consumer - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },

            { "MasterClientID": 2, "ClientID": 21, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 22, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 23, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 24, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 25, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 26, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 27, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 28, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 29, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 30, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },

            { "MasterClientID": 5, "ClientID": 31, "ClientName": "Tier 1 United Concordia - 8025 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 32, "ClientName": "Tier 1 United Concordia - 8025 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 33, "ClientName": "Tier 1 United Concordia - 8025 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 34, "ClientName": "Tier 1 United Concordia - 8025 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 35, "ClientName": "Tier 1 United Concordia - 8025 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 36, "ClientName": "Tier 1 United Concordia - 8025 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 37, "ClientName": "Tier 1 United Concordia - 8025 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 38, "ClientName": "Tier 1 United Concordia - 8025 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 39, "ClientName": "Tier 1 United Concordia - 8025 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 40, "ClientName": "Tier 1 United Concordia - 8025 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" }

            ];

            var clientDetails2 = [
                                                            { "MasterClientID": 11, "ClientID": 211, "ClientName": "Tier 2 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 212, "ClientName": "Tier 2 Verizon Consumer - Virginia - Fairfax", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 213, "ClientName": "Tier 2 Verizon Consumer - Virginia - Chantilly", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 214, "ClientName": "Tier 2 Verizon Consumer - Virginia - Beach", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 215, "ClientName": "Tier 2 Verizon Consumer - Virginia - Loudon", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 216, "ClientName": "Tier 2 Verizon Consumer - Virginia - Centreville", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 217, "ClientName": "Tier 2 Verizon Consumer - Virginia - Potomac", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 218, "ClientName": "Tier 2 Verizon Consumer - Virginia - Leesburg", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 219, "ClientName": "Tier 2 Verizon Consumer - Virginia - Reston", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 220, "ClientName": "Tier 2 Verizon Consumer - Virginia - winfield", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" }
            ]

            var clientMasterID = ClientMaster.length + 1;
            var selected = [];
            var uids = [];
            var gridElement;

            function getIndexById(id) {
                var idx,
                    l = ClientMaster.length;

                for (var j; j < l; j++) {
                    if (ClientMaster[j].ClientID == id) {
                        return j;
                    }
                }
                return null;
            }

            //var testJson = [{ "MasterClientID": 0, "MasterName": "TestFOS", "MasterControlID": null, "Description": null, "StatusInd": null, "ActiveInd": false, "LastUpdateOn": "2015-08-25T10:35:40.74", "LastUpdateBy": "TESTCOG1", "BusinessVertical": null }];
            var windowTemplate = kendo.template($("#windowTemplate").html());
            $(document).ready(function () {

                var crudServiceBaseUrl = "";

                var tblMasterClient = [];

                    var tblMasterClientsDataSource = new kendo.data.DataSource({
                        //batch: false,
                        //transport: {
                        //read: {
                        //    url: "/Home/MsgDetails_Read",
                        //    contentType: "application/json; charset=utf-8",
                        //    type: "GET"
                        //},
                        //read: function (e) {
                        //    e.success(ClientMaster);
                        //},
                        //create: {
                        //    //e.data.ClientID = clientMasterID++;
                        //    //ClientMaster.push(e.data);
                        //    //e.success(e.data);
                        //    url: "/api/tblMasterClients",
                        //    contentType: "application/json",
                        //    type: "POST"
                        //},
                        //    read:
                        //        {
                        //            url: "/api/tblMasterClients",

                        //        },
                        //    update: {
                        //        ClientMaster[getIndexById(e.data.ClientID)] = e.data;
                        //        e.success();
                        //        url: "/api/tblMasterClients",    
                        //        type: "PUT" 
                        //    },
                        //    destroy: function (e) {
                        //    destroy: {
                        //        ClientMaster.splice(getIndexById(e.data.ClientID), 1);
                        //        e.success();
                        //        url: "/api/tblMasterClients",    
                        //        type: "DELETE"    
                        //    },
                        //    update: {
                        //        url: function (tblMasterClient) {
                        //            return "api/tblMasterClients/" + tblMasterClient.MasterClientID;
                        //        },
                        //        contentType: "application/json",
                        //        type: "PUT"
                        //    },
                        //    destroy: {
                        //        url: function (tblMasterClient) {
                        //            return "api/products/" + tblMasterClient.MasterClientID;
                        //        },
                        //        contentType: "application/json",
                        //        type: "DELETE"
                        //    },
                        //    parameterMap: function (options, operation) {
                        //        if (operation !== "read" && options.models) {
                        //            return { models: kendo.stringify(options.models) };
                        //        }
                        //    },
                        //    error: function (e) {
                        //        alert("Status: " + e.status + "; Error message: " + e.errorThrown);
                        //    },
                        //    serverFiltering: true,
                        //},
                        //resizable: true,
                        //toolbar: ["pdf", "create"],
                        //pageSize: 10,
                        //schema: {
                        //    //data: "d",
                        //    //total: function (response) { // For grid item count botttom right of grid
                        //    //    return $(response.d).length;
                        //    //},
                        //    model: {
                        //        fields: {
                        //            MasterClientID: { editable: true, nullable: true, type: "number" },
                        //            MasterName: { validation: { required: true } }
                        //        }
                        //    }
                        //},
                        //serverPaging: true

                        transport: {
                            read: {
                                url: "/api/tblMasterClients",
                                type: "GET"
                            },
                                create:
                            {
                                    url:"/api/tblMasterClients",
                                    //data: JSON.stringify(testJson),
                                    //data: JSON.stringify({ 'tblMasterClient': $("#grid").data("kendoGrid").dataSource.view() }),
                                    //contentType: "application/json",
                                    dataType: "json",
                                    type: "POST"
                                },

                            update: {
                                url: "/api/tblMasterClients",
                                type: "Put",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json"

                            },
                            destroy: {
                                url: "/api/tblMasterClients",
                                type: "Delete",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json"
                            },
                            //parameterMap: function (options, operation) {
                            //    debugger;
                            //    //if (operation !== "read" && options.models) {
                            //    //if (operation !== "read") {
                            //    //    // return { models: kendo.stringify(options.models) };
                            //    //    return JSON.stringify(options);
                            //    //}
                            //    if (operation === "update") {
                            //        return { masterClientID: options.MasterClientID }
                            //    }
                            //    if (operation === "create") {
                            //        return JSON.stringify({ MasterName: options.MasterName });
                            //    }
                            //    if (operation === "destroy") {
                            //        return { masterClientID: options.MasterClientID }
                            //    }
                            //},
                            parameterMap: function (options, operation) {
                                //if (operation !== "read" && options.models) {
                                //    return { models: JSON.stringify(options.models) };
                                //}
                                if (operation !== "read") {
                                    //tblMasterClient.push({ 'tblMasterClient': JSON.stringify(options) })
                                    return options;

                                }
                            }
                        },
                        editable: { //disables the deletion functionality
                            update: true,
                            destroy: true
                        },
                        batch:false,
                        serverPaging: true,
                        schema: {
                            //data: "data", // records are returned in the "data" field of the response
                            //total: "total" // total number of records is in the "total" field of the response
                            id: "MasterClientID",
                            model: {

                                fields: {
                                    MasterClientID: { editable: false, nullable: true, type: "number" },
                                    MasterName: { validation: { required: true } }
                                }
                            }
                        },

                        pageSize: 20
                    });


                var element = $("#grid").kendoGrid({
                    dataSource: tblMasterClientsDataSource,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    height: 430,
                    scrollable: {
                        virtual: true
                    },
                    sortable: true,
                    resizable: true,

                    //pageable: {
                    //    pageSize: 10,
                    //    refresh: true,
                    //    pageSizes: true,
                    //    buttonCount: 5

                    //},
                    editable: "popup",
                    groupable: true,
                    selectable: "multiple",
                    reorderable: true,

                    dataBinding: function (e) {
                        //store the uids of selected rows
                        $("#grid .k-state-selected").each(function () {
                            uids.push($(this).data("uid"));
                        });
                    },
                    dataBound: function (e) {
                        if (uids.length != 0) {
                            for (var i = 0; i < uids.length; i++) {
                                var curr_uid = uids[i];
                                //find and reselect the rows via their uid attribute
                                this.tbody.find("tr[data-uid='" + curr_uid + "']").addClass("k-state-selected");
                            }
                        }
                    },

                    //detailInit: detailInit,
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                contains: "Contains",
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to",
                                endswith: "Ends with"
                            }
                        }
                    },
                    toolbar: ["pdf", "excel", "create"],
                    pdf: {
                        allPages: true,
                        fileName: "Kendo UI Grid Export.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    },
                    excel: {
                        fileName: "Kendo UI Grid Export.xlsx",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
                        filterable: true
                    },
                    columns: [
                        //{
                        //    field: "MsgNum",
                        //    title: "Message Number",
                        //    width: "200px",
                        //    filterable: {
                        //        ui: cardNameFilter
                        //    }
                        //},
                        //{
                        //    field: "MsgDesc",
                        //    title: "Message Description",
                        //    width: "200px",
                        //    filterable: {
                        //        ui: industryTypeFilter
                        //    }
                        //},
                                                {
                                                    field: "MasterClientID",
                                                    title: "Master Client ID",
                                                    width: "200px",
                                                    type:"number"
                                                },
                        {
                            field: "MasterName",
                            title: "Master Name",
                            width: "200px"
                        },
                        {

                            command: [
                              { name: "edit" },
                              {
                                  name: "Delete",
                                  click: function (e) {  //add a click event listener on the delete button
                                      var tr = $(e.target).closest("tr"); //get the row for deletion
                                      var dataItem = this.dataItem(tr); //get the row data so it can be referred later
                                      kendoWindow.content(windowTemplate(dataItem)); //send the row data object to the template and render it
                                      kendoWindow.open().center();

                                      $("#yesButton").click(function () {
                                          $("#grid").data('kendoGrid').dataSource.remove(dataItem);
                                          $("#grid").data('kendoGrid').dataSource.sync();
                                          kendoWindow.close();
                                      })
                                      $("#noButton").click(function () {
                                          kendoWindow.close();
                                      })
                                  }
                              }
                            ]
                        },
                    ]
                }).data("kendoGrid");

                var tooltip = $("#grid").kendoTooltip({
                    filter: "tr", //this filter selects the first column cells
                    position: "bottom",
                    content: function (e) {
                        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
                        var content = dataItem;
                        //var target = e.target; // element for which the tooltip is shown
                        //return $(target).text();
                        var masterClientID = dataItem.MasterClientID;
                        var masterClientName = dataItem.MasterName;
                        //var appDesc = dataItem.AppDesc;
                        //var wc3ClientKey = dataItem.WC3ClientKey;
                        //alert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <span style="text-decoration: underline;">underline</span>!');
                        var dataContent = ('Master Client  ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName);
                        //var dataContent = ('Master Client  ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName + '<br>' + 'App Description: ' + appDesc + '<br>' + 'Wc3ClientKey: ' + wc3ClientKey);
                        return dataContent;
                        //return content
                    }
                }).data("kendoTooltip");


                //$(element.tbody).on("click", "tr", function (e) {

                //    $(this).addClass("highlightedRow");
                //});

                $("#show_col").on("click", function () {
                    element.showColumn(1);
                });

                $("#hide_col").on("click", function () {
                    element.hideColumn(1);
                });

                $("#txtSearchString").keydown(function (event) {
                    onSearch();
                })



            });




            function SaveClientDetails() {

                var postUrl;
                var paramValue;

                var gridData = $("#grid").data("kendoGrid").dataSource.data();
                alert(gridData);
                postUrl = '@Url.Content("/api/tblMasterClients/")';
                paramValue = JSON.stringify({ 'tblMasterClients': gridData });


                $.ajax({
                    url: postUrl,
                    type: 'POST',
                    dataType: 'json',
                    data: paramValue,
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (objAjaxRequest, strError) {
                        var respText = objAjaxRequest.responseText;
                        console.log(respText);
                    }
                });

            }


            var kendoWindow = $("#window").kendoWindow({
                title: "Are you sure you want to delete this record?",
                visible: false, //the window will not appear before its .open method is called
                width: "360px",
                height: "100px"
            }).data("kendoWindow");


            function detailInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: ClientDetails1
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
                    ,
                    scrollable: false,
                    sortable: true,
                    resizable: true,
                    detailInit: detailInit1,
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                contains: "Contains",
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to",
                                endswith: "Ends with"
                            }
                        }
                    },
                    pageable: {
                        pageSize: 10,
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5

                    },
                    columns: [
                        { field: "ClientID", title: "Client ID", width: "80px", type: "number" },
                        { field: "ClientName", title: "Client Name", width: "150px" },
                        { field: "AppDesc", title: "App Description", width: "150px" },
                        { field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },

                    ],

                    editable: "popup"
                });

            }

            function detailInit1(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: clientDetails2
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
                    ,
                    scrollable: false,
                    sortable: true,
                    resizable: true,
                    pageable: {
                        pageSize: 10,
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5

                    },
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                contains: "Contains",
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to",
                                endswith: "Ends with"
                            }
                        }
                    },
                    columns: [
                        { field: "ClientID", title: "Client ID", width: "80px", type: "number" },
                        { field: "ClientName", title: "Client Name", width: "150px" },
                        { field: "AppDesc", title: "App Description", width: "150px" },
                        { field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },

                    ],
                    editable: "popup"
                });
            }

        </script>

    </div>


</body>
</html>

webapi

-----------------

 

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Mvc;

namespace KendoGridPOC
{
    public class tblMasterClientsController : ApiController
    {
        private WC3OnlineEntities db = new WC3OnlineEntities();

        // GET: api/tblMasterClients
        public IQueryable<tblMasterClient> GettblMasterClients()
        {
            return db.tblMasterClients;           

        }

        // GET: api/tblMasterClients/5
        [ResponseType(typeof(tblMasterClient))]
        public IHttpActionResult GettblMasterClient(int id)
        {
            tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
            if (tblMasterClient == null)
            {
                return NotFound();
            }

            return Ok(tblMasterClient);
        }

        // PUT: api/tblMasterClients/5
        [ResponseType(typeof(void))]
        [System.Web.Mvc.AcceptVerbs(HttpVerbs.Put)]
        public IHttpActionResult PuttblMasterClient(int id, tblMasterClient tblMasterClient)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != tblMasterClient.MasterClientID)
            {
                return BadRequest();
            }

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

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!tblMasterClientExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }


        // POST: api/tblMasterClients

          
        [ResponseType(typeof(tblMasterClient))]
         public IHttpActionResult PosttblMasterClient(tblMasterClient tblMasterClient)
        {
            //tblMasterClient tblMasterClient
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.tblMasterClients.Add(tblMasterClient);
            db.SaveChanges();

            //return null; 
                return CreatedAtRoute("DefaultApi", new { id = tblMasterClient.MasterClientID }, tblMasterClient);
        }


        // DELETE: api/tblMasterClients/5
        [ResponseType(typeof(tblMasterClient))]
         public IHttpActionResult DeletetblMasterClient(int id)
        {
            tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
            if (tblMasterClient == null)
            {
                return NotFound();
            }

            db.tblMasterClients.Remove(tblMasterClient);
            db.SaveChanges();

            return Ok(tblMasterClient);
        }

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

        private bool tblMasterClientExists(int id)
        {
            return db.tblMasterClients.Count(e => e.MasterClientID == id) > 0;
        }
    }
}​

8 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 18 Sep 2015, 08:22 AM
Hi Palanisamy,

In the grid settings you have explicitly set the content type of the POST payload to be application/json, however, the server is expecting form data. Hence, the POST requests that are made are unlikely to work.

Please remove the content-type application/json so that the Grid transport can serialize the payload as form value.

For reference, I am attaching a sample Kendo Grid +  WebAPI project here. I hope this can help you to get started.

Regards,
Genady Sergeev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Palanisamy
Top achievements
Rank 1
answered on 18 Sep 2015, 11:39 AM

please see my code. I have tried with your sample reference.But still am getting the same issue. Kindly see my cshtml and webapi code below.

cshtml code:

---------------------

@{
    ViewBag.Title = "KendoGrid";
}

<html>
<head>

    <title></title>
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }

        html {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .k-grid tbody .k-button {
            width: 81px !important;
            height: 25px;
            font-size: small;
        }

        #grid .k-grid-header .k-header {
            background-color: white;
            font-weight: bold;
        }

        .k-tooltip {
            background-color: orange !important;
            width: 300px;
            height: 60px;
        }

        .k-tooltip-content {
            vertical-align: middle;
        }

            .k-tooltip-content p {
                float: left;
            }

            .k-tooltip-content p {
                font-size: 1.4em;
                padding: 20px;
                width: 160px;
                text-align: left;
            }

        .k-grid-content > table > tbody > tr {
            /*background-color: white;*/
            background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
            background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
            padding: 20px;
        }



        .k-grid-content > table > tbody > .k-alt {
            /*background-color: lightgray !important;*/
            background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
            background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
        }

        .k-master-row {
            background-color: white;
        }


        .k-grid tbody tr {
            height: 10px !important;
        }


            .k-grid tbody tr td {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 10px !important;
            }

        .k-grid .k-alt {
            background-color: lightgoldenrodyellow;
        }
        /*selection*/

        .k-grid table tr.k-state-selected {
            background: #f99;
            color: #fff;
        }

        .highlightedRow {
            background-color: yellow !important;
        }

        .k-grid {
            font-family: "DejaVu Sans", "Arial", sans-serif;
        }

        /* Hide the Grid header and pager during export */
        .k-pdf-export .k-grid-toolbar,
        .k-pdf-export .k-pager-wrap,
        .k-pdf-export a.k-button.k-button-icontext,
        .k-pdf-export .k-filter-row,
        .k-pdf-export .k-grouping-header,
        .k-pdf-export .k-grid tr td:last-child {
            display: none !important;
        }
    </style>
    <link href="~/Content/KendoStyles/kendo.common-material.min.css" rel="stylesheet" />
    <link href="~/Content/KendoStyles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/KendoStyles/kendo.default.min.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/Jszip.js"></script>
    <script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
    <script type="text/x-kendo-template" id="windowTemplate">
        Delete this client
        <strong>#= MasterName #</strong>?
        <br />
        <br />
        <button class="k-button" id="yesButton">Yes</button>
        <button class="k-button" id="noButton"> No</button>
    </script>
    <script>
        kendo.pdf.defineFont({
            "DejaVu Sans": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic": "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        });
    </script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/pako_deflate.min.js"></script>
</head>
<body>


    <div id="window"></div>
    <div id="example">
        <button id="show_col" class="k-button">Show Master Name</button>
        <button id="hide_col" class="k-button">Hide Master Name</button>
        <div id="grid"></div>
        <div id="test"></div>
        @*<div id="sample"></div>
        <br /> <br />
        <div id="child"></div>*@
        <script>
            var hide = false;

            var ClientMaster = [
                        { "ClientID": 1, "ClientName": "Verizon Consumer", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "ClientID": 2, "ClientName": "Fiserv Securities Inc - 8137", "AppDesc": "*** ALL ***", "WC3ClientKey": "22-33" },
                        { "ClientID": 3, "ClientName": "Kaiser Permanente - Colorado (8079)", "AppDesc": "Statements-Statements", "WC3ClientKey": "29-58" },
                        { "ClientID": 4, "ClientName": "Kaiser Permanente - Georgia (1381)", "AppDesc": "*** ALL ***", "WC3ClientKey": "29-56" },
                        { "ClientID": 5, "ClientName": "United Concordia - 8025", "AppDesc": "CARDS-Cards", "WC3ClientKey": "35-77" },
                        { "ClientID": 6, "ClientName": "AAA Colorado - 1439", "AppDesc": "Cards-AAA Colorado Cards", "WC3ClientKey": "39-69" },
                        { "ClientID": 7, "ClientName": "Empire BCBS National Accounts - 04270", "AppDesc": "Digital-DC5 Digital Cards", "WC3ClientKey": "52-92" },
                        { "ClientID": 8, "ClientName": "CapitalOne - 4345", "AppDesc": "DC5E - T-Empire DC5E Test", "WC3ClientKey": "53-94" },
                        { "ClientID": 9, "ClientName": "BOA - 4270", "AppDesc": "No ClientApplication", "WC3ClientKey": "62-73" },
                        { "ClientID": 10, "ClientName": "Amazon - 2250", "AppDesc": "Card Only", "WC3ClientKey": "54-98" },
            { "ClientID": 111, "ClientName": "USAA", "AppDesc": "Electronic cards", "WC3ClientKey": "49-25" },
            { "ClientID": 112, "ClientName": "POC Demo", "AppDesc": "Demo cards", "WC3ClientKey": "87-96" },
            { "ClientID": 113, "ClientName": "Reliant Invoices", "AppDesc": "Emails", "WC3ClientKey": "14-82" },
            { "ClientID": 114, "ClientName": "Fiserv Atlanta - 20000", "AppDesc": "Emails", "WC3ClientKey": "54-21" },
            { "ClientID": 115, "ClientName": "Berkshire - 04730", "AppDesc": "Emails", "WC3ClientKey": "67-11" }

            ];


            var ClientDetails1 = [
                        { "MasterClientID": 1, "ClientID": 11, "ClientName": "Tier 1 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 12, "ClientName": "Tier 1 Verizon Consumer - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 13, "ClientName": "Tier 1 Verizon Consumer - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 14, "ClientName": "Tier 1 Verizon Consumer - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 15, "ClientName": "Tier 1 Verizon Consumer - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 16, "ClientName": "Tier 1 Verizon Consumer - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 17, "ClientName": "Tier 1 Verizon Consumer - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 18, "ClientName": "Tier 1 Verizon Consumer - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 19, "ClientName": "Tier 1 Verizon Consumer - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
                        { "MasterClientID": 1, "ClientID": 20, "ClientName": "Tier 1 Verizon Consumer - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },

            { "MasterClientID": 2, "ClientID": 21, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 22, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 23, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 24, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 25, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 26, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 27, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 28, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 29, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },
            { "MasterClientID": 2, "ClientID": 30, "ClientName": "Tier 1 Fiserv Securities Inc - 8137 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "22-33" },

            { "MasterClientID": 5, "ClientID": 31, "ClientName": "Tier 1 United Concordia - 8025 - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 32, "ClientName": "Tier 1 United Concordia - 8025 - Illinois", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 33, "ClientName": "Tier 1 United Concordia - 8025 - New Jersey", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 34, "ClientName": "Tier 1 United Concordia - 8025 - NewYork", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 35, "ClientName": "Tier 1 United Concordia - 8025 - Maryland", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 36, "ClientName": "Tier 1 United Concordia - 8025 - California", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 37, "ClientName": "Tier 1 United Concordia - 8025 - Florida", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 38, "ClientName": "Tier 1 United Concordia - 8025 - Texas", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 39, "ClientName": "Tier 1 United Concordia - 8025 - Washington", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" },
            { "MasterClientID": 5, "ClientID": 40, "ClientName": "Tier 1 United Concordia - 8025 - Missouri", "AppDesc": "No ClientApplication", "WC3ClientKey": "35-77" }

            ];

            var clientDetails2 = [
                                                            { "MasterClientID": 11, "ClientID": 211, "ClientName": "Tier 2 Verizon Consumer - Virginia", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 212, "ClientName": "Tier 2 Verizon Consumer - Virginia - Fairfax", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 213, "ClientName": "Tier 2 Verizon Consumer - Virginia - Chantilly", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 214, "ClientName": "Tier 2 Verizon Consumer - Virginia - Beach", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 215, "ClientName": "Tier 2 Verizon Consumer - Virginia - Loudon", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 216, "ClientName": "Tier 2 Verizon Consumer - Virginia - Centreville", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 217, "ClientName": "Tier 2 Verizon Consumer - Virginia - Potomac", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 218, "ClientName": "Tier 2 Verizon Consumer - Virginia - Leesburg", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 219, "ClientName": "Tier 2 Verizon Consumer - Virginia - Reston", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" },
{ "MasterClientID": 11, "ClientID": 220, "ClientName": "Tier 2 Verizon Consumer - Virginia - winfield", "AppDesc": "No ClientApplication", "WC3ClientKey": "14-22" }
            ]

            var clientMasterID = ClientMaster.length + 1;
            var selected = [];
            var uids = [];
            var gridElement;

            function getIndexById(id) {
                var idx,
                    l = ClientMaster.length;

                for (var j; j < l; j++) {
                    if (ClientMaster[j].ClientID == id) {
                        return j;
                    }
                }
                return null;
            }

            //var testJson = [{ "MasterClientID": 0, "MasterName": "TestFOS", "MasterControlID": null, "Description": null, "StatusInd": null, "ActiveInd": false, "LastUpdateOn": "2015-08-25T10:35:40.74", "LastUpdateBy": "TESTCOG1", "BusinessVertical": null }];
            var windowTemplate = kendo.template($("#windowTemplate").html());
            $(document).ready(function () {

                var crudServiceBaseUrl = "";

                var tblMasterClient = [];

                    var tblMasterClientsDataSource = new kendo.data.DataSource({
                        //batch: false,
                        //transport: {
                        //read: {
                        //    url: "/Home/MsgDetails_Read",
                        //    contentType: "application/json; charset=utf-8",
                        //    type: "GET"
                        //},
                        //read: function (e) {
                        //    e.success(ClientMaster);
                        //},
                        //create: {
                        //    //e.data.ClientID = clientMasterID++;
                        //    //ClientMaster.push(e.data);
                        //    //e.success(e.data);
                        //    url: "/api/tblMasterClients",
                        //    contentType: "application/json",
                        //    type: "POST"
                        //},
                        //    read:
                        //        {
                        //            url: "/api/tblMasterClients",

                        //        },
                        //    update: {
                        //        ClientMaster[getIndexById(e.data.ClientID)] = e.data;
                        //        e.success();
                        //        url: "/api/tblMasterClients",    
                        //        type: "PUT" 
                        //    },
                        //    destroy: function (e) {
                        //    destroy: {
                        //        ClientMaster.splice(getIndexById(e.data.ClientID), 1);
                        //        e.success();
                        //        url: "/api/tblMasterClients",    
                        //        type: "DELETE"    
                        //    },
                        //    update: {
                        //        url: function (tblMasterClient) {
                        //            return "api/tblMasterClients/" + tblMasterClient.MasterClientID;
                        //        },
                        //        contentType: "application/json",
                        //        type: "PUT"
                        //    },
                        //    destroy: {
                        //        url: function (tblMasterClient) {
                        //            return "api/products/" + tblMasterClient.MasterClientID;
                        //        },
                        //        contentType: "application/json",
                        //        type: "DELETE"
                        //    },
                        //    parameterMap: function (options, operation) {
                        //        if (operation !== "read" && options.models) {
                        //            return { models: kendo.stringify(options.models) };
                        //        }
                        //    },
                        //    error: function (e) {
                        //        alert("Status: " + e.status + "; Error message: " + e.errorThrown);
                        //    },
                        //    serverFiltering: true,
                        //},
                        //resizable: true,
                        //toolbar: ["pdf", "create"],
                        //pageSize: 10,
                        //schema: {
                        //    //data: "d",
                        //    //total: function (response) { // For grid item count botttom right of grid
                        //    //    return $(response.d).length;
                        //    //},
                        //    model: {
                        //        fields: {
                        //            MasterClientID: { editable: true, nullable: true, type: "number" },
                        //            MasterName: { validation: { required: true } }
                        //        }
                        //    }
                        //},
                        //serverPaging: true

                        transport: {
                            read: {
                                url: "/api/tblmasterclients",
                                type: "GET"
                            },
                                create:
                            {
                                url: "/api/tblmasterclients",
                                    //data: JSON.stringify(testJson),
                                    //data: JSON.stringify({ 'tblMasterClient': $("#grid").data("kendoGrid").dataSource.view() }),
                                    //contentType: "application/json",
                                    //dataType: "json",
                                    type: "POST"
                                },

                            update: {
                                url: "/api/tblmasterclients/puttblmasterclient",
                                type: "PUT",
                                //contentType: "application/json; charset=utf-8",
                                //dataType: "json"

                            },
                            destroy: 
                            {
                                url: "/api/tblmasterclients/deletetblmasterclient",
                                type: "DELETE",
                                //contentType: "application/json; charset=utf-8",
                                //dataType: "json"
                            },
                            schema: {
                              
                                model: {
                                    id: "MasterClientID",
                                    fields: {
                                        MasterClientID: { editable: false, nullable: false, type: "number" },
                                        MasterName: { validation: { required: true },type:"string" }
                                    }
                                }
                            },

                            //parameterMap: function (options, operation) {
                            //    debugger;
                            //    //if (operation !== "read" && options.models) {
                            //    //if (operation !== "read") {
                            //    //    // return { models: kendo.stringify(options.models) };
                            //    //    return JSON.stringify(options);
                            //    //}
                            //    if (operation === "update") {
                            //        return { masterClientID: options.MasterClientID }
                            //    }
                            //    if (operation === "create") {
                            //        return JSON.stringify({ MasterName: options.MasterName });
                            //    }
                            //    if (operation === "destroy") {
                            //        return { masterClientID: options.MasterClientID }
                            //    }
                            //},
                            parameterMap: function (options, operation) {
                                //if (operation !== "read" && options.models) {
                                //    return { models: JSON.stringify(options.models) };
                                //}
                                if (operation !== "read") {
                                    return options;

                                }
  
                            }
                        },
                        //editable: { //disables the deletion functionality
                        //    update: true,
                        //    destroy: true
                        //},
                        //batch:false,
                        serverPaging: true,                        
                        pageSize: 20
                    });


                var element = $("#grid").kendoGrid({
                    dataSource: tblMasterClientsDataSource,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    height: 430,
                    scrollable: {
                        virtual: true
                    },
                    sortable: true,
                    resizable: true,

                    //pageable: {
                    //    pageSize: 10,
                    //    refresh: true,
                    //    pageSizes: true,
                    //    buttonCount: 5

                    //},
                    editable: "popup",
                    groupable: true,
                    selectable: "multiple",
                    reorderable: true,

                    dataBinding: function (e) {
                        //store the uids of selected rows
                        $("#grid .k-state-selected").each(function () {
                            uids.push($(this).data("uid"));
                        });
                    },
                    dataBound: function (e) {
                        if (uids.length != 0) {
                            for (var i = 0; i < uids.length; i++) {
                                var curr_uid = uids[i];
                                //find and reselect the rows via their uid attribute
                                this.tbody.find("tr[data-uid='" + curr_uid + "']").addClass("k-state-selected");
                            }
                        }
                    },

                    //detailInit: detailInit,
                    //filterable: {
                    //    extra: false,
                    //    operators: {
                    //        string: {
                    //            contains: "Contains",
                    //            startswith: "Starts with",
                    //            eq: "Is equal to",
                    //            neq: "Is not equal to",
                    //            endswith: "Ends with"
                    //        }
                    //    }
                    //},
                    toolbar: ["pdf", "excel", "create"],
                    pdf: {
                        allPages: true,
                        fileName: "Kendo UI Grid Export.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    },
                    excel: {
                        fileName: "Kendo UI Grid Export.xlsx",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
                        filterable: true
                    },
                    columns: [
                        //{
                        //    field: "MsgNum",
                        //    title: "Message Number",
                        //    width: "200px",
                        //    filterable: {
                        //        ui: cardNameFilter
                        //    }
                        //},
                        //{
                        //    field: "MsgDesc",
                        //    title: "Message Description",
                        //    width: "200px",
                        //    filterable: {
                        //        ui: industryTypeFilter
                        //    }
                        //},
                                                {
                                                    field: "MasterClientID",
                                                    title: "Master Client ID",
                                                    width: "200px",
                                                    type:"number"
                                                },
                        {
                            field: "MasterName",
                            title: "Master Name",
                            width: "200px"
                        },
                        {

                            command: [
                              { name: "edit" },
                              {
                                  name: "Delete",
                                  click: function (e) {  //add a click event listener on the delete button
                                      var tr = $(e.target).closest("tr"); //get the row for deletion
                                      var dataItem = this.dataItem(tr); //get the row data so it can be referred later
                                      kendoWindow.content(windowTemplate(dataItem)); //send the row data object to the template and render it
                                      kendoWindow.open().center();

                                      $("#yesButton").click(function () {
                                          $("#grid").data('kendoGrid').dataSource.remove(dataItem);
                                          $("#grid").data('kendoGrid').dataSource.sync();
                                          kendoWindow.close();
                                      })
                                      $("#noButton").click(function () {
                                          kendoWindow.close();
                                      })
                                  }
                              }
                            ]
                        },
                    ]
                }).data("kendoGrid");


                //$("#test").kendoGrid({
                //    dataSource: {
                //        transport: {
                //            read: "/api/tblmasterclients",
                //            create:
                //                {
                //                    url: "/api/tblmasterclients",
                //                    type: "POST"
                //                },
                //            update: {
                //                url: "/api/tblmasterclients",
                //                type: "PUT"
                //            },
                //            destroy: {
                //                url: "/api/tblmasterclients",
                //                type: "DELETE"
                //            }
                //        },
                //        schema: {                            
                //            model: {
                //                id: "MasterClientID",
                //                fields: {
                //                    MasterClientID: { type: "number" },
                //                    MasterName: { type: "string" }
                //                }
                //            }
                //        },
                //        parameterMap: function (options, operation) {
                //            //if (operation !== "read" && options.models) {
                //            //    return { models: JSON.stringify(options.models) };
                //            //}
                //            alert(options.models);
                //            if (operation !== "read" && options.models) {
                //                return { models: JSON.stringify(options.models) };

                //    }
  
                //}
                //    },
                //    toolbar: ["create"],
                //    editable: {
                //        mode: "popup"
                //    },
                //    height: 550,
                //    columns: [{
                //        field: "MasterClientID",
                //        filterable: false
                //    },
                //         {
                //            field: "MasterName",
                //            title: "Master Name"
                //         },
                //        {
                //            command: ["edit", "destroy"],
                //            title: "&nbsp;", width: "250px"
                //        },
                //    ]
                //});

                var tooltip = $("#grid").kendoTooltip({
                    filter: "tr", //this filter selects the first column cells
                    position: "bottom",
                    content: function (e) {
                        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
                        var content = dataItem;
                        //var target = e.target; // element for which the tooltip is shown
                        //return $(target).text();
                        var masterClientID = dataItem.MasterClientID;
                        var masterClientName = dataItem.MasterName;
                        //var appDesc = dataItem.AppDesc;
                        //var wc3ClientKey = dataItem.WC3ClientKey;
                        //alert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <span style="text-decoration: underline;">underline</span>!');
                        var dataContent = ('Master Client  ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName);
                        //var dataContent = ('Master Client  ID: ' + masterClientID + '<br>' + 'Client Name : ' + masterClientName + '<br>' + 'App Description: ' + appDesc + '<br>' + 'Wc3ClientKey: ' + wc3ClientKey);
                        return dataContent;
                        //return content
                    }
                }).data("kendoTooltip");


                //$(element.tbody).on("click", "tr", function (e) {

                //    $(this).addClass("highlightedRow");
                //});

                $("#show_col").on("click", function () {
                    element.showColumn(1);
                });

                $("#hide_col").on("click", function () {
                    element.hideColumn(1);
                });

                $("#txtSearchString").keydown(function (event) {
                    onSearch();
                })



            });




            


            var kendoWindow = $("#window").kendoWindow({
                title: "Are you sure you want to delete this record?",
                visible: false, //the window will not appear before its .open method is called
                width: "360px",
                height: "100px"
            }).data("kendoWindow");


            function detailInit(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: ClientDetails1
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
                    ,
                    scrollable: false,
                    sortable: true,
                    resizable: true,
                    detailInit: detailInit1,
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                contains: "Contains",
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to",
                                endswith: "Ends with"
                            }
                        }
                    },
                    pageable: {
                        pageSize: 10,
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5

                    },
                    columns: [
                        { field: "ClientID", title: "Client ID", width: "80px", type: "number" },
                        { field: "ClientName", title: "Client Name", width: "150px" },
                        { field: "AppDesc", title: "App Description", width: "150px" },
                        { field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },

                    ],

                    editable: "popup"
                });

            }

            function detailInit1(e) {
                $("<div/>").appendTo(e.detailCell).kendoGrid({
                    dataSource: {
                        data: clientDetails2
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    filter: { field: "MasterClientID", operator: "eq", value: e.data.ClientID }
                    ,
                    scrollable: false,
                    sortable: true,
                    resizable: true,
                    pageable: {
                        pageSize: 10,
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5

                    },
                    filterable: {
                        extra: false,
                        operators: {
                            string: {
                                contains: "Contains",
                                startswith: "Starts with",
                                eq: "Is equal to",
                                neq: "Is not equal to",
                                endswith: "Ends with"
                            }
                        }
                    },
                    columns: [
                        { field: "ClientID", title: "Client ID", width: "80px", type: "number" },
                        { field: "ClientName", title: "Client Name", width: "150px" },
                        { field: "AppDesc", title: "App Description", width: "150px" },
                        { field: "WC3ClientKey", title: "WC3 Client Key", width: "150px" },

                    ],
                    editable: "popup"
                });
            }

        </script>

    </div>


</body>
</html>

My webapi code:

------------------------------

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Mvc;

namespace KendoGridPOC
{
    public class tblMasterClientsController : ApiController
    {
        private WC3OnlineEntities db = new WC3OnlineEntities();

        // GET: api/tblMasterClients

        private readonly List<tblMasterClient> masterClients;

        public tblMasterClientsController()
        {
            masterClients = new List<tblMasterClient>();
            masterClients.AddRange(new tblMasterClient[] {
                new tblMasterClient()
                {
                   MasterClientID = 3001,
                   MasterName="TestFiserv"
                },
                new tblMasterClient()
                {
                    MasterClientID = 3002,
                   MasterName="TestDefenders"
                }
            });
        }

        public List<tblMasterClient> GettblMasterClients()
        {
            return masterClients;
        }
        //public IQueryable<tblMasterClient> GettblMasterClients()
        //{
        //    return db.tblMasterClients;           

        //}

        // GET: api/tblMasterClients/5
        //[ResponseType(typeof(tblMasterClient))]
        public IHttpActionResult GettblMasterClient(int id)
        {
            tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
            if (tblMasterClient == null)
            {
                return NotFound();
            }

            return Ok(tblMasterClient);
        }

        // PUT: api/tblMasterClients/5
        [System.Web.Http.HttpPut]
        //[ResponseType(typeof(void))]
        public IHttpActionResult PuttblMasterClient(int id, tblMasterClient tblMasterClient)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != tblMasterClient.MasterClientID)
            {
                return BadRequest();
            }

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

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!tblMasterClientExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }


        // POST: api/tblMasterClients

         
             
       //[ResponseType(typeof(tblMasterClient))]
       [System.Web.Http.HttpPost]
         public IHttpActionResult PosttblMasterClient(tblMasterClient tblMasterClient)
        {
            //tblMasterClient tblMasterClient
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.tblMasterClients.Add(tblMasterClient);
           // db.SaveChanges();

            //return null; 
                return CreatedAtRoute("DefaultApi", new { id = tblMasterClient.MasterClientID }, tblMasterClient);
        }


        // DELETE: api/tblMasterClients/5
        [System.Web.Http.HttpDelete]
        //[ResponseType(typeof(tblMasterClient))]
         public IHttpActionResult DeletetblMasterClient(int id)
        {
            tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
            if (tblMasterClient == null)
            {
                return NotFound();
            }

            db.tblMasterClients.Remove(tblMasterClient);
            db.SaveChanges();

            return Ok(tblMasterClient);
        }

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

        private bool tblMasterClientExists(int id)
        {
            return db.tblMasterClients.Count(e => e.MasterClientID == id) > 0;
        }
    }
}

 

 

Note: Also i tried with this method also

 create:
                            {
                                url:"/api/clients/create",
                                type:"POST"
                            }​

 

But not at all working. Please help me.

0
Palanisamy
Top achievements
Rank 1
answered on 18 Sep 2015, 12:03 PM

I found the issue finally. But still i am having problem.Below is my webapi put and delete code. In that arguments are having "id" field.So both methods are not hitting.If i have only model,method is hitting. Kindly help me out.

 

 public IHttpActionResult PuttblMasterClient(int id,tblMasterClient tblMasterClient)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != tblMasterClient.MasterClientID)
            {
                return BadRequest();
            }

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

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!tblMasterClientExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }​

public IHttpActionResult DeletetblMasterClient(int id)
        {
            tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
            if (tblMasterClient == null)
            {
                return NotFound();
            }

            db.tblMasterClients.Remove(tblMasterClient);
            db.SaveChanges();

            return Ok(tblMasterClient);
        }

0
Palanisamy
Top achievements
Rank 1
answered on 21 Sep 2015, 01:46 PM

I found the issue finally. But still i am having problem.Below is my webapi put and delete code. In that arguments are having "id" field.So both methods are not hitting.If i have only model,method is hitting. Kindly help me out.

 public IHttpActionResult PuttblMasterClient(int id,tblMasterClient tblMasterClient)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != tblMasterClient.MasterClientID)
            {
                return BadRequest();
            }

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

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!tblMasterClientExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }​
public IHttpActionResult DeletetblMasterClient(int id)
        {
            tblMasterClient tblMasterClient = db.tblMasterClients.Find(id);
            if (tblMasterClient == null)
            {
                return NotFound();
            }

            db.tblMasterClients.Remove(tblMasterClient);
            db.SaveChanges();

            return Ok(tblMasterClient);
        }

 

 

HI I already posted this issue. But still I didnt get any reply for this. Kindly help me out. Please reply as soon as possible.It will be very helpful for me.

0
Kiril Nikolov
Telerik team
answered on 22 Sep 2015, 07:03 AM

Hello Palanisamy,

 

Most probably your routing is not correct. Your URLs in the dataSource configuration should not include the verb in them. So they should be like - tblmasterclient and tblmasterclient.

 

Are you able to call your methods without the dataSource, but using a standard Ajax call?

 

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Palanisamy
Top achievements
Rank 1
answered on 22 Sep 2015, 07:09 AM
Routing is correct only.Standard ajax call is working. Pbm is javascript kendo grid with weapi only.
0
Palanisamy
Top achievements
Rank 1
answered on 22 Sep 2015, 01:42 PM

Thanks for your ideas. I found the solution. Please find the below code.

cshtml

-----------------

 $("#test").kendoGrid({
                    dataSource: {
                        transport: {
                            read: "/api/tblmasterclients",
                            create:
                                {
                                    url: "/api/tblmasterclients",
                                    type: "POST"
                                },
                            update: {
                                url: function (tblmasterclient) {
                                    return "/api/tblmasterclients/" + tblmasterclient.MasterClientID
                                },
                                type: "PUT"
                            },
                            destroy: {
                                url: function (tblmasterclient) {
                                    return "/api/tblmasterclients/" + tblmasterclient.MasterClientID
                                },
                                type: "DELETE"
                            }
                        },
                        schema: {
                            model: {
                                id: "MasterClientID",
                                fields: {
                                    MasterClientID: { type: "number" },
                                    MasterName: { type: "string" }
                                }
                            }
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read") {
                                return options;

                            }
  
                }
                    },
                    toolbar: ["create"],
                    editable: {
                        mode: "popup"
                    },
                    height: 550,
                    columns: [{
                        field: "MasterClientID",
                        filterable: false
                    },
                         {
                            field: "MasterName",
                            title: "Master Name"
                         },
                        {
                            command: ["edit", "destroy"],
                            title: "&nbsp;", width: "250px"
                        },
                    ]
                });​

0
Kiril Nikolov
Telerik team
answered on 22 Sep 2015, 01:51 PM

Hello Palanisamy,

 

Then can you please provide a runnable sample where the issue can be reproduced, so we can take a look at it and advise your further?

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Palanisamy
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
Palanisamy
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or