Battling to get Create method working on the Grid?

[Donald]

Hi, I have been trying all kinds of tricks to get the 'create' working on my grid. Please find attached my Controller and View.

<!----------------------------------------------CONTROLLER------------------------------------------------------------------------>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using AttributeRouting.Web.Http;
using HomeBudget.Models;
using HomeBudget.ViewModels;


// ReSharper disable UnusedMember.Global
// ReSharper disable FieldCanBeMadeReadOnly.Local
namespace HomeBudget.Controllers
{
    public class ProductController : ApiController
    {
        IRepository _repository = new Repository();
        private HttpRequest _request = HttpContext.Current.Request;


        public Response Get()
        {
            int take = _request["take"] == null ? 10 : int.Parse(_request["take"]);
            int skip = _request["skip"] == null ? 0 : int.Parse(_request["skip"]);


            var products = (from p in _repository.GetAllItems<Product>()
                           select new ProductViewModel
            {
                ProductID = p.ProductID,
                ProductName = p.ProductName,
                CategoryName = _repository.GetLookupValue<Category>(info => info.CategoryID == p.CategoryID, info => info.CategoryName),
                //Category = p.Category,
                Discontinued = p.Discontinued
            }).Skip(skip).Take(take).ToArray();


            return new Response(products, _repository.GetAllItems<Product>().Count);
        }


        public Response Delete(Guid id)
        {
            try
            {
                var product = _repository.GetAllItems<Product>().SingleOrDefault(info => info.ProductID == id);
                _repository.Delete(product);
                _repository.SaveAllChanges();
                return new Response();
            }
            catch (Exception ex)
            {
                return new Response(string.Format("There was an error deleting object popup: custom editors", id.ToString(), ex.Message));
            }
        }
        
        [POST("api/product/create")]
        public Response Create()
        {
            try
            {
                var product = _repository.Create<Product>();
                return new Response(product);
            }
            catch (Exception ex)
            {
                return new Response("There was an error creating object popup: custom editors");
            }
        }


        [POST("api/product/{id}")]
        public HttpResponseMessage Post(Guid id)
        {
            var response = new HttpResponseMessage();
            try
            {
                var product = _repository.GetItemById<Product>(info => info.ProductID == id);
                if (product != null)
                {
                    product.ProductName = string.IsNullOrEmpty(_request["ProductName"]) ? product.ProductName : _request["ProductName"];
                    product.UnitPrice = _request["UnitPrice"] == null ? product.UnitPrice : Convert.ToDecimal(_request["UnitPrice"]);
                    _repository.SaveAllChanges();
                    response.StatusCode = HttpStatusCode.OK;
                }
                else
                {
                    response.StatusCode = HttpStatusCode.InternalServerError;
                    response.Content = new StringContent(string.Format("The employee with id popup was not found in the database", id.ToString()));
                }
            }
            catch (Exception ex)
            {
                response.StatusCode = HttpStatusCode.InternalServerError;
                response.Content = new StringContent(string.Format("The database updated failed: popup", ex.Message));
            }
            return response;
        }
    }
}


<!----------------------------------------------PAGE------------------------------------------------------------------------>


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="HomeBudget._Default" %>


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<html>
<head>
    <title>Products</title>
    <link href="Content/kendo/2012.2.710/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2012.2.710/kendo.default.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="productGrid"></div>


    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Scripts/kendo/2012.2.710/kendo.web.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">


        $(function () {
            $("#productGrid").kendoGrid({
                editable: "inline",
                toolbar: ["create", "edit", "destroy"],
                pageable: true,
                selectable: "multiple cell",
                scrollable: false,
                navigatable: true,
                columns: [
                    { field: "ProductName", title: "Product" },
                    { field: "CategoryName", title: "Category" },
                    //{ field: "Category", title: "Category2", width: "150px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                    { field: "UnitPrice", title: "UnitPrice" },
                    { field: "Discontinued", title: "Discontinued?" },
                    { command: ["edit", "destroy"], title: " " }
                ],
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: "api/product",
                        update: {
                            url: function (product) {
                                return "api/product/" + product.ProductID;
                            },
                            type: "POST"
                        },
                        destroy: {
                            url: function (product) {
                                return "api/product/" + product.ProductID;
                            },
                            type: "DELETE"
                        },
                        create: {
                            url: function () {
                                return "api/product/create";
                            },
                            type: "POST"
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverSorting: true,
                    schema: {
                        data: "Data",
                        total: "Count",
                        errors: "Errors",
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { editable: false, nullable: true },
                                PropductName: { editable: true, validation: { required: true} },
                                UnitPrice: { type: "number", editable: true, nullable: true },
                                Discontinued: { type: "boolean", editable: true, nullable: true },
                                CategoryName: { editable: true, nullable: true }
                                //Category: { editable: true, nullable: true }
                            }
                        }
                    },
                    error: function (e) {
                        alert("The action failed. Please consult the web master.");
                        this.cancelChanges();
                    }
                }),
                change: function (e) {
                    var product = this.dataSource.getByUid(this.select().data("uid"));
                    console.log(product.ProductID);
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            });
        });
        
        function categoryDropDownEditor(container, options) {
            var data = [
                { text: "Food", value: "3F3CC554-5577-412D-BF12-6161E6198181" },
                { text: "Toiletries", value: "3F3CC554-5577-412D-BF12-7161E6198181" }
            ];
            $('<input data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: data,
                    dataTextField: "text",
                    dataValueField: "value"
                });
        }
    </script>
</body>
</html>
</asp:Content>

Please help.

[Alexander Valchev]

Hello Donald,

Could you please specify what exactly is the problem with the create functionality? The Grid does not send the created models through the transport or you cannot create an item in the Grid.

As a general information I have noticed the following issues:

• the Q1 release (2012.2.710) is not fully compatible with jQuery 1.8.2. This version of jQuery is supported only in the latest internal builds, so please use v.1.7.1 instead.
• when the editing is set to "inline", the toolbar should contain only a "create" command. Edit and Destroy commands should be defined in the columns.
• the parameterMap function should be part of the transport object.

Please review those issues and if the problem still persists please open a support ticker, preferable with a runnable project attached and detailed description of the problem.

Regards,
Alexander Valchev
the Telerik team

[Jon]

I was having the same issue and narrowed it down to using the client template with a complex data type.

In his example, the column Category has a client template of #= Category.CategoryName #. This works great in edit mode, but throws a jQuery error in add mode because the object is undefined when it tries to build the row.

The quick and easy way to see this in action is in the MVC Example project. Go into the editing_custom.cshtml view and simply add "Create" to the ToolBar and run the project. Click the create button to see it in action.

After much pain and trial, I have come up with a solution. Add a check on your object in the client template. See below:

#= (typeof Category === 'undefined') ? ' ' : Category.CategoryName #

This will check to see if the Category is defined. If not, it will insert an empty string, otherwise the Category.CategoryName.