Grid won't render with JSON looking ok

6 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Feb 2011

    Posted 03 Mar 2013 Link to this post

    Hi, new to Kendo . . .

    From the View:

    function InitGrid() {

        $("#grid").kendoGrid({
            dataSource: oRemoteDataSource,
            edit: EditMe,
            save: SaveMe,
            error: function (e) {
                alert(e.responseText);
            },
            pageable: {
                numeric: true,
                refresh: true,
                pageSizes: [3, 6, 10],
                previousNext: true,
                input: false,
                info: false
            },
            sortable: true,
            selectable: "row",
            id: "Code",
            schema: {
                model: {
                    id: "Code",
                    fields: {
                        "Name": { editable: false },
                        "Code": { nullable: true },
                        "IsPrecontract": { editable: false },
                        "IsActive": { editable: false }
                    }
                }
            },
            columns: [
                    { field: "Name", title: "Name", width: "450px" },
                    { field: "Code", title: "Code", width: "40px", editable: false },
                    { field: "IsPrecontract", title: "IsPrecontract", width: "80px" },
                    { field: "IsActive", title: "IsActive", width: "80px" },
                    { command: ["destroy"], title: " ", width: "80px" }
            ],
            toolbar: [
             "create",
             { name: "save", text: "Save This Record" }
            ],
            editable: {
                update: true,
                destroy: false,
                confirmation: "Are you sure you want to remove this category?"
            },
        });
    }

    Now the data source:

    function InitDataSource() {

        oRemoteDataSource = new kendo.data.DataSource({
            type: "odata",
            pageSize: 10,
            transport: {
                read: function (options) {
                    $.ajax({
                        url: "/KendoGrid/MasterCategories_Read",
                        data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
                        success: function (result) {
                            //         alert(JSON.stringify(result));
                            $("#json").html(JSON.stringify(result));
                            options.success(result);
                        }
                    });
                },
                update: {
                    url: "/KendoGrid/MasterCategories_Update",
                    type: "POST"
                }
            }
        });
    }

    Now my JSON from the Controller, shows up ok . . . but not in the grid, only on my page in a div right underneath the empty grid that has only the column names showing: (I formatted the top few here for easy reading)

    {"Data":[
    {"Name":"Hardwood Stairs","Code":"39","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Siding","Code":"10","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Fireplace","Code":"26","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Stair Railing","Code":"40","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Tile Accessories","Code":"25","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Interior Doors","Code":"36","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Hardware & Mirrors","Code":"31","IsPrecontract":"N","IsActive":"Y"},
    {"Name":"Permit, Fees and Insurance","Code":"01","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Job Clean-up","Code":"34","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Deck","Code":"12","IsPrecontract":"N","IsActive":"Y"},{"Name":"Countertops","Code":"29","IsPrecontract":"N","IsActive":"Y"},{"Name":"Rain Gutters","Code":"32","IsPrecontract":"N","IsActive":"Y"},{"Name":"Light Fixtures","Code":"20","IsPrecontract":"N","IsActive":"Y"},{"Name":"Entry Doors","Code":"13","IsPrecontract":"N","IsActive":"Y"},{"Name":"Damp Proofing","Code":"07","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Electrical","Code":"19","IsPrecontract":"N","IsActive":"Y"},{"Name":"Temporary Utilities","Code":"04","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Architecture & Engineering","Code":"03","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Paint","Code":"24","IsPrecontract":"N","IsActive":"Y"},{"Name":"Speciality Items","Code":"80","IsPrecontract":"N","IsActive":"Y"},{"Name":"Windows","Code":"15","IsPrecontract":"N","IsActive":"Y"},{"Name":"Drywall","Code":"22","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Electrical Features - Upgrade","Code":"42","IsPrecontract":"N","IsActive":"Y"},{"Name":"Garage Doors","Code":"14","IsPrecontract":"N","IsActive":"Y"},{"Name":"Foundation","Code":"06","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Insulation","Code":"21","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Cabinets","Code":"28","IsPrecontract":"N","IsActive":"Y"},{"Name":"Stone","Code":"23","IsPrecontract":"N","IsActive":"Y"},{"Name":"Trim Materials","Code":"37","IsPrecontract":"N","IsActive":"Y"},{"Name":"Design Ideas","Code":"00","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Appliances","Code":"30","IsPrecontract":"N","IsActive":"Y"},{"Name":"Central Vacuum","Code":"33","IsPrecontract":"N","IsActive":"Y"},{"Name":"Roofing","Code":"11","IsPrecontract":"N","IsActive":"Y"},{"Name":"Framing","Code":"08","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Lot Improvements","Code":"02","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Air Conditioning","Code":"18","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Heating and Ventilation","Code":"17","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Plumbing","Code":"16","IsPrecontract":"N","IsActive":"Y"},{"Name":"Closet Shelving","Code":"38","IsPrecontract":"N","IsActive":"Y"},{"Name":"Flooring","Code":"27","IsPrecontract":"N","IsActive":"Y"}],"Total":40,"AggregateResults":null,"Errors":null}

    And this won't show up in the grid why exactly?

    Thanks
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 04 Mar 2013 Link to this post

    Hello David,

    Using type: "odata" as configuration the data source will apply custom settings for handling binding to OData services.

    The following code library illustrates CRUD operations with OData service: https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-odata-crud

    However the response you've posted is not "OData style". So my question is "Are you using OData to handle server operations?". If so you should stick to the above mentioned code library.  

    If not you must at least configure schema.data to point to Data field from the response in order to parse the response.

    Another think to notice is do you really need the manual handling of read action?

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. David
    David avatar
    2 posts
    Member since:
    Feb 2011

    Posted 04 Mar 2013 Link to this post

    I'm sorry,. I'm just confused.  I've been trying only to follow the most basic example to get the data displayed.  I'm not trying to do anything custom.  This is my controller action.

        public ActionResult MasterCategories_Read([DataSourceRequest] DataSourceRequest request)
            {
                List<BusinessClassLibrary.MasterCategory> oCats = new List<BusinessClassLibrary.MasterCategory>();
                var service = new MasterCategoryService("");
                var oCategories = service.GetAll();
                foreach (BusinessClassLibrary.MasterCategory oCategory in oCategories)
                {
                    oCats.Add(oCategory);
                }

                var vResult = oCats.ToDataSourceResult(request);
                var x = Json(vResult, JsonRequestBehavior.AllowGet);
                return (x);

            }

    I just want it to match up and work.  What am I doing wrong?

    Thanks
  4. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 05 Mar 2013 Link to this post

    Hello David,

    Here is a fully functional example of binding Kendo UI Grid to ASP.NET MVC Controller method:
    https://github.com/telerik/kendo-examples-asp-net-mvc/tree/master/grid-crud 


    It uses some helper classes in order to automate server parsing and serving of sort/filter etc. expressions. Those helper are placed inside Model folder in case you are curios of the implementation.


    All the best,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. David
    David avatar
    2 posts
    Member since:
    Feb 2011

    Posted 05 Mar 2013 Link to this post

    So after three days going around with this, all you will do is point me to your examples?  I gave you all code and data.  And now you can't even tell me the problem?  Awesome.

    Not the support I was hoping for with a new product.
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 Mar 2013 Link to this post

    Hi David,

     The action method configuration will work only if you are using Kendo Complete for ASP.NET MVC. You however seem to be using the Kendo Grid JavaScript widget and this is why it doesn't work. If you want to continue using this kind of action method configuration you should use the Kendo Grid ASP.NET HtmlHelper extension method. More info can be found in the overview and ajax binding documentation articles.

    If you want to continue using the Kendo Grid JavaScript widget you can follow the example linked before.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top