How to update grid widget, i get an error

6 posts, 0 answers
  1. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 22 Aug 2012 Link to this post

    i want to update using batch update with grid widget.
    if I click on save changes i get this error

    Unable to get value of the property 'data': object is null or undefined

    any help would be gladly welcome thank you

    Mygrid
    $(document).ready(function () {
        var emailGridDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/franchisees/stock/emailkendoread",
                    dataType: "json"
                },
                update: {
                    url: "/franchisees/stock/emailkendoupdate",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }  
            },
            batch: true,
            pageSize: 25,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductId: { editable: false, nullable: true },
                        Name: { editable: false, validation: { required: true } },
                        Level: { type: "number", editable: false, validation: { required: true } },
                        MinQuantity: { type: "number", editable: false },
                        OrderByThe: { type: "number", editable: false },
                        Order: { type: "number", editable: true }
                    }
                }
            }
        });
     
        $("#emailGrid").kendoGrid({
            dataSource: emailGridDataSource,
            navigatable: true,
            sortable: true,
            pageable: true,
            toolbar: ["save", "cancel"],
            columns: [
                "Name",
                { field: "Level", width: 150 },
                { field: "MinQuantity", width: 100 },
                { field: "OrderByThe", width: 100 },
                { field: "Order", width: 100 }],
            editable: true
        });
    });
  2. Adrian
    Adrian avatar
    24 posts
    Member since:
    Jul 2012

    Posted 17 Sep 2012 Link to this post

    I just hit this same error. I've set up something like twenty grids by now, but this is the first one to present me with this error.

    Here is my dataSource declaration followed by my kendoGrid declaration:

    var dataFacts = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/ProjectInfo/GetProjectFacts",
                data: { projectId: projectId },
                type: "POST",
                dataType: "json"
            },
            update: {
                url: "/ProjectInfo/UpdateProjectFacts",
                type: "POST",
                dataType: "json"
            }
        },
        schema: {
            type: "json",
            id: "header",
            model: {
                fields: {
                    "header": { editable: true, type: "string" },
                    "value": { editable: true, type: "string" }
                }
            }
        }
    });
     
    var factsGridColumnsInline = [
        { "field": "header", "title": " ", "filterable": true, "sortable": true, "width": "33%" },
        { "field": "value", "title": " ", "filterable": true, "sortable": true }
    ],
    factsGridObject;
     
    factsGridObject = $("#gridFacts").kendoGrid({
        dataSource: dataFacts,
        columns: factsGridColumnsInline,
        rowTemplate: kendo.template($("#factsRowTemplateInline").html()),
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        selectable: "row",
        pageable: false,
        filterable: false
        columnMenu: false,
        scrollable: false,
        toolbar: factsGridToolbarInline,
        editable: {
            update: true,
            destroy: true,
            mode: "inline",
            confirmation: "Are you sure?"
        }
    }).data("kendoGrid");

    The "header" column contains the name of the field, and the "value" column contains the data in that field. We chose a grid as an alternative to creating 10+ separate individual fields with labels and input boxes (and custom code for each to make them editable).

    I'm not able to find a reason behind this error. All our other grids function in essentially the same fashion, and this is the first one to present us with this particular error. Worse still, this error doesn't seem to have much information available about it on the forums.

    Please help me understand what is causing this error, and why.

    I select a row, click the Edit button, make a change, and click the Save button. Then I receive that error, and the highlighted section of code in kendo.all.min.js (on line 8) is:

    setup:function(a,b){a=a||{};
    var d=this,f,g=d.options[b],h=e(g.data)?g.data(a.data):g.data;

    specifically:

    h=e(g.data)?g.data(a.data):g.data;

    Thank you.

    EDIT:

    Relevant information:

    Initially, I opted not to have an id defined in the schema for the dataSource, as there are no IDs associated with these records (they don't come from a single table), which led to me being unable to Edit records due to the grid calling the (nonexistent) Create() method function, rather than the Update() method. Once I provided it with an id by choosing the "header" column as such, it began calling the correct method, but failing to transport the data fully. Fiddler successfully intercepted the data transmission and received the relevant data in a properly-formed request, but the data never seems to be actually received by the server, and the JavaScript error still occurs. In Firefox, the error is "--
    [16:53:11.279] TypeError: g is undefined @ http://localhost:9090/Scripts/kendo/kendo.all.min.js:8".
  3. Kendo UI is VS 2017 Ready
  4. Adrian
    Adrian avatar
    24 posts
    Member since:
    Jul 2012

    Posted 17 Sep 2012 Link to this post

    The only difference I could see between this grid and the others is that this one lacked an ID field.

    So I had my back-end team member add a manually-generated ID field to the data, and I called it out in the schema as type: "number" and set it as the id for the schema. With this, my problem disappeared. I don't know if this will be helpful to anyone else, but I figured I'd share.

    schema: {
        type: "json",
        id: "id",
        model: {
            fields: {
                "id": { editable: false, type: "number" },
                "header": { editable: true, type: "string" },
                "value": { editable: true, type: "string" }
            }
        }
    }
  5. Craig
    Craig avatar
    12 posts
    Member since:
    Feb 2013

    Posted 06 Mar 2013 Link to this post

    Thanks! I was getting a slightly different error: "Unable to get property 'call' of undefined or null reference". 
    But it turned out to be the same cause - my ID field was not defined correctly (one character was the wrong case).
  6. Pranami
    Pranami avatar
    4 posts
    Member since:
    May 2014

    Posted 13 May 2014 Link to this post

    Thank you Adrian. Your solution that we might get an error without the ID field solved my problem as well.
  7. Odd Veibust
    Odd Veibust avatar
    26 posts
    Member since:
    Feb 2007

    Posted 12 Jul in reply to Adrian Link to this post

    Thank you Adrian.

     

    Had the same problem here. Had an Id field, but had not defined it as "number", as shown in the example. Defined it as number and everything worked well.

Back to Top
Kendo UI is VS 2017 Ready