Search code examples
kendo-uikendo-datasource

How to get field type in Kendoui?


Is there any method like that dataSource.getFieldType(field) in datasource:

var dataSource = new kendo.data.DataSource({
    // somethings here,
    schema : {
         model : {
            post_id : {type: "number" },
            post_title : {type:"string"},
            post_date : {type:"date"}
         }
    }
});

var fieldType = dataSource.getFieldType("post_title"); // it should return string

Solution

  • You should define a getFieldType function as:

    function getFieldType(dataSource, field) {
        return dataSource.options.schema.model.fields[field].type;
    }
    

    and using it would be:

    var fieldType = getFieldType(dataSource, "post_title");
    

    Alternatively, you can extend KendoUI DataSource for defining a new method called getFieldType by doing:

    kendo.data.DataSource.prototype.getFieldType = function(field) {
        return this.options.schema.model.fields[field].type;
    }
    

    and using it would be:

    var fieldType = dataSource.getFieldType("post_title");
    

    Check here the version using DataSource extension:

    $(document).ready(function() {
      kendo.data.DataSource.prototype.getFieldType = function(field) {
        return this.options.schema.model.fields[field].type;
      }
    
      $("#show").on("click", function() {
        var ds = $("#grid").data("kendoGrid").dataSource;
        alert("Freight: " + ds.getFieldType("Freight"));
      });
    
    
      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" }
              }
            }
          },
          pageSize: 20,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
        },
        height: 550,
        pageable: true,
        columns: [
          {
            field:"OrderID",
            filterable: false
          },
          "Freight",
          {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          },
          {
            field: "ShipName",
            title: "Ship Name"
          },
          {
            field: "ShipCity",
            title: "Ship City"
          }
        ]
      });
    });
    html { 
      font-size: 12px; 
      font-family: Arial, Helvetica, sans-serif;
    }
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
    
    <button id="show" class="k-button">Show Freight type</button>
    <div id="grid"></div>