Dynamic Field Generation

Dynamic parameters given a model

by sparksterz

HTML

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

CSS

html {
    background-color:#ccc;
}
.checkList {
    background-color:#ffffff;
    height:100px;
    width:300px;
    overflow:auto;
}

.radioList {
    display:inline-block;
    width:auto;
}

JavaScript

var ReportParameters = [{
    "ParameterID": "CustomerGuid",
        "Label": "CustomerGuid",
        "Description": "",
        "Value": "5480f181-a008-e211-bb60-000c293df992",
        "IsMandatory": true,
        "IsVisible": false,
        "InputType": "TextBox",
        "DataType": "Guid"
}, {
    "ParameterID": "StartDate",
        "Label": "Start Date",
        "Description": "",
        "IsMandatory": true,
        "IsVisible": true,
        "InputType": "DatePicker",
        "DataType": "Date",
        "Value": "/Date(1239018869048)/"
}, {
    "ParameterID": "Name",
        "Label": "Name",
        "Description": "Your name",
        "IsMandatory": true,
        "IsVisible": true,
        "InputType": "TextBox",
        "DataType": "String",
        "Value": "Brian"
}, {
    "ParameterID": "BusinessValues",
        "Label": "Select Key Benefits",
        "Description": "These will show up in your report",
        "IsMandatory": false,
        "IsVisible": true,
        "InputType": "List.CheckBox",
        "DataType": "Guid",
        "InputValues": ["5480f181-a008-e211-bb60-000c293df992", "7480f181-a008-e211-bb60-000c293df992"],
        "ListInputType": {
        "MaxSelectable": 3,
            "MinSelectable": 0,
            "Items": [{
            "Key": "5480f181-a008-e211-bb60-000c293df992",
                "Value": "Cost Savings"
        }, {
            "Key": "6480f181-a008-e211-bb60-000c293df992",
                "Value": "Green Initiative"
        }, {
            "Key": "7480f181-a008-e211-bb60-000c293df992",
                "Value": "Repair Costs"
        }, {
            "Key": "8480f181-a008-e211-bb60-000c293df992",
                "Value": "Power Draw"
        }, {
            "Key": "9480f181-a008-e211-bb60-000c293df992",
                "Value": "10 Year Projections"
        }]
    }
}, {
    "ParameterID": "Solutions",
        "Label": "Select Solution",
        "Description": "This will allow you to tailor a specific solution",
       ...