Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div id="grid"></div>

JavaScript

var 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" 
                }]
            }
        }
    }
};

var dataSource = new kendo.data.DataSource({
    data: data,
    schema: {
        data: "WFP_MacroDemandForecastResponse.Results.RowSet.Rows", 
        model: {
            id: "WorkforcePlanningMeasure[\"@ID\"]", 
            fields: { 
                "WorkforcePlanningMeasure[\"@Name\"]": { field: "WorkforcePlanningMeasure[\"@Name\"]", 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 } 
            } 
        }
     }
});
    
$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [ 
        { field: "WorkforcePlanningMeasure[\"@Name\"]", title: "Metric", width: 200 }, 
        { field: "ChangeRate", title: "Change Rate", width: 30 }, 
        { field: "BaseYear", title: "Base Year",...