Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.flat.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>Grid autogenerate columns with CRUD</title>
</head>
<body>
  <div id="grid" style="width:600px;"></div>
</body>
</html>
 
//example data received from remote source via jQuery ajax merthod
var data = [{
  "Name": "daya",
  "Role": "Developer",
  "Dept": "Dev",
  "Date": "\/Date(836438400000)\/",
  "Balance": 23
}, {
  "Name": "siva",
  "Role": "Developer",
  "Dept": "Dev",
  "Date": "\/Date(836438400000)\/",
  "Balance": 23
}, {
  "Name": "sivadaya",
  "Role": "Developer",
  "Dept": "Dev",
  "Date": "\/Date(836438400000)\/",
  "Balance": 23
}, {
  "Name": "dayasiva",
  "Role": "Developer",
  "Dept": "Dev",
  "Date": "\/Date(836438400000)\/",
  "Balance": 23
}];
​
//in the success handler of the ajax method call the function below with the received data:
var dateFields = [];
generateGrid(data);
​
function generateGrid(gridData) {
​
  var model = generateModel(gridData[0]);
​
  var parseFunction;
  if (dateFields.length > 0) {
    parseFunction = function (response) {
      for (var i = 0; i < response.length; i++) {
        for (var fieldIndex = 0; fieldIndex < dateFields.length; fieldIndex++) {
          var record = response[i];
          record[dateFields[fieldIndex]] = kendo.parseDate(record[dateFields[fieldIndex]]);
        }
      }
      return response;
    };
  }
​
  var grid = $("#grid").kendoGrid({
    dataSource: {
      data: gridData,
      schema: {
        model: model,
        parse: parseFunction
      }
    },
    editable: true,
    sortable: true
  });
}
​
function generateModel(gridData) {
  var model = {};
  model.id = "ID";
  var fields = {};
  for (var property in gridData) {
    var propType = typeof gridData[property];
​
    if (propType == "number") {
      fields[property] = {
        type: "number",
        validation: {
          required: true
        }
      };
    } else if (propType == "boolean") {
      fields[property] = {
        type: "boolean",
        validation: {
          required: true
        }
      };
    } else if (propType == "string") {
      var parsedDate = kendo.parseDate(gridData[property]);
      if (parsedDate) {
        fields[property] = {
          type: "date",
          validation: {
            required: true
          }
        };
        dateFields.push(property);
      } else {
        fields[property] = {
          validation: {
            required: true
          }
        };
      }
    } else {
      fields[property] = {
        validation: {
          required: true
        }
      };
    }
​
  }
  model.fields = fields;
​
  return model;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers