Help with making a grid editable

[Steven]

I am not sure how to approach this particular case.   I have a json dataset coming back from a web service and it returns the following data:

"WFP_MacroDemandForecastResponse": {

    "Results": {

        "@ViewName": "WFP_MacroDemandForecast",

        "RowSet": {

            "@ColDims": "Workforce Planning Value",

            "Rows": [

                {

                    "WorkforcePlanningMeasure": {

                        "@Name": "HC Demand",

                        "@DimName": "Workforce Planning Measure",

                        "@ID": "Headcount Demand",

                        "#text": "HC Demand"

                    },

                    "Value": "0",

                    "ChangeRate": "0",

                    "BaseYear": "0",

                    "ForecastDriver": "0",

                    "_5YearGoal": "0",

                    "Year1": "0",

                    "Year2": "0",

                    "Year3": "0",

                    "Year4": "0",

                    "Year5": "0"

                },

 {...rows node repeats...}

In order to make the grid editable, I have to supply a model and an ID, but not sure how to specify this when the data source has the ID in an child attribute element.

Here is the code:

this.Data = new kendo.data.DataSource({

    transport: {

        read: {

            url: "http://localhost/essolve/esjson.asmx/WFP_MacroDemandForecast",

            dataType: "json"

        }

    },

    batch: true,

    schema: {

        data: "WFP_MacroDemandForecastResponse.Results.RowSet.Rows",

        model: {

            id: "WorkforcePlanningMeasure",

            fields: {

                WorkforcePlanningMeasure: { editable: false },   // ???????

                ChangeRate: { editable: true },

                BaseYear: { editable: true },

                _5YearGoal: { editable: true },

                Year1: { editable: true },

                Year2: { editable: true },

                Year3: { editable: true },

                Year4: { editable: true },

                Year5: { editable: true }

            }

        }

 

    }

});

 

$('#wfp_DemandMacroProjection').kendoGrid({

    dataSource: this.Data,

    sortable: true,

    pageable: true,

    rowTemplate: kendo.template($("#row-template").html()),

    columns: [

        { field: "WorkforcePlanningMeasure[\"@Name\"]", title: "Metric", width: 200 },

        { field: "ChangeRate", title: "Change Rate", width: 30 },

        { field: "BaseYear", title: "Base Year", width: 30 },

        { field: "_5YearGoal", title: "Goal", width: 30 },

        { field: "Year1", title: "Year 1", width: 30 },

        { field: "Year2", title: "Year 2", width: 30 },

        { field: "Year3", title: "Year 3", width: 30 },

        { field: "Year4", title: "Year 4", width: 30 },

        { field: "Year5", title: "Year 5", width: 30 }

    ],

    editable: true

});

[Nikolay Rusev]

Hello Steven,

I've created a sample jsfiddle that tries to implement your scenario. You can give it a try here:
http://jsfiddle.net/VSaZA/

Notice how "WorkforcePlanningMeasure[\"@Name\"]" is define in the model.

Regards,
Nikolay Rusev
the Telerik team

[Steven]

Thanks, I was thinking it had to be something like that, but I didn't know you could specify the fields like that on the left side.

The only problem I am encountering now, is that when you use a template, the grid no longer is editable.   What needs to change?

See this fiddle:  http://jsfiddle.net/blackhawk/uFUEw/

[Nikolay Rusev]

Hello Steven,

You will need to add the uid attribute to the table row element: <tr data-uid="${uid}">
http://jsfiddle.net/uFUEw/1/

All the best,
Nikolay Rusev
the Telerik team

[Steven]

Thanks!!!

Where do I find that kind of information?   I didn't notice it in any docs.

[Steven]

Well, it seems that I have run into a glitch using this approach.

If I now attempt to use a row template, the editor fails because it doesn't know how to deal with the "property[@attr]" format.

See this fiddle:  http://jsfiddle.net/blackhawk/VSaZA/1/ 

Once this comes up, try editing the first column.

[Nikolay Rusev]

Hello Steven,

I'm afraid I don't see any [@attr] in the jsfiddle.

Regards,
Nikolay Rusev
the Telerik team

[Steven]

@attr was a reference to an attribute value.   The actual item in jsfiddle is called WorkforcePlanningMeasure[\"@Name\"]"

[Nikolay Rusev]

Hello Steven,

"@Name" is not valid property name in JavaScript. If you attempt to access a field with "."(object.@Name) error will be thrown. This is the reason why the value in the editor is not update when the cell editor is closed.

To make it work will have to remove the "@" sign from property names and the sample will look as follow:
http://jsfiddle.net/VSaZA/2/

Regards,
Nikolay Rusev
the Telerik team

[Steven]

Unfortunately I don't have control over the insertion of the # and @ characters.   It is created by JSON.NET.

I will have to look at replacing JSON.NET for something else.