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>
<script id="row-template" type="text/x-kendo-template">
    <tr data-uid="${uid}">
        <td>${ WorkforcePlanningMeasure["@Name"] }</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("ChangeRate")), "n2") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("BaseYear")), "c") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("_5YearGoal")), "c") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("Year1")), "c") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("Year2")), "c") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("Year3")), "c") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("Year4")), "c") #</td>
        <td align="right">#: kendo.toString(kendo.parseFloat(get("Year5")), "c") #</td>
    </tr>
</script>

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,
    rowTemplate: kendo.template($("#row-template").html()),
    columns: [ 
        { field: "WorkforcePlanningMeasure[\"@Name\"]", title: "Metric", width: 100 }, 
        { field: "ChangeRate", title: "Change Rate",...