kendo-ui,kendo-datasource , How to get field type in Kendoui?

How to get field type in Kendoui?


Tag: kendo-ui,kendo-datasource

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

var dataSource = new{
    // somethings here,
    schema : {
         model : {
            post_id : {type: "number" },
            post_title : {type:"string"},
            post_date : {tyep:"date"}

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


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: = 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() { = 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"));

    dataSource: {
      type: "odata",
      transport: {
        read: ""
      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: [
        filterable: false
        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="" />
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>

<button id="show" class="k-button">Show Freight type</button>
<div id="grid"></div>


Select tabs using right click in Kendo Tabstrip

I need to select tabs in Kendo Tabstrip (see demo here) using right click in addition to left click. Is this possible?

How can I access non-route url parameters in an angular app?

I am adding an angular app to part of an existing page that uses a lot of kendo MVVM controls in an ASP.NET MVC app. Lucky me. I want to access a parameter from the URL route that is before the angular route. So for a module with: angular .module('myModule',...

How can I make Kendo UI Panelbar “skip” an element when reading an HTML list?

I'm using Knockout.js 3.3 and utilizing components with custom elements. I am trying to use Kendo UI's Panelbar with that list. The only problem is, it fails (the nested <ul> won't expand) because my lists are in the following format: <ul> <sidebar-step> <li>some message <ul> <li>some sub message<li> <li>another sub...

How do I check specific data when reading in data from a remote source with

I am using Telerik Platform to build a hybrid news app. I am pulling in data remotely and I have everything working correctly, but now I need to check to see for featured stories and move them into an variable. I have the data pulling into like this: viewModel =...

How to save multiple files to database rather than disk,file-upload,kendo-ui,jquery-file-upload,kendo-upload
I tried to apply the method on this page, but this sample save the files to disk instead of Database. So, could you please inform me what changes should be made on the sample method or is there any sample using this Kendo Upload to save multiple files to database?...

kendo window doesn't fire ng-controller in remote content file

angularjs,kendo-ui,kendo-window I have a button that calls showNewDialog() when clicked. It launches a new kendo window loading from a remote content file. However, if I specify an ng-controller attribute in a div inside the remote content file, it doesn't seems to fire the ng-controller. From the remote content file, I...

Cursor clickable icon appear when mouse over event happened

I have the following implementation. When user clicks on the y axis title label, then message pop up. However, there is no indication for the first time user that shows y axis label clickable. Therefore I would like to know how to implement cursor clickable icon (hand icon) when mouse...

KendoUI Popover $compile issue

I have directive which is a wrapper around KendoUI kendo-tooltip and I'm instantiating it like this: <div my-directive-popover="options"> </div> Inside my code I replace my-directive-popover with kendo-tooltip like this: $element.attr( 'kendo-tooltip', popoverName ); At the end of pre compile function I have to of course compile this so it's recognized...

kendo combobox datasource filtering before bind is not working

I am working on a web application using kendo UI. I have a kendo combobox and binding via remote datasource. I need to filter kendo combobox datasource before binding. here's my code: $("#abc").kendoComboBox({ dataSource:{ type: "odata", transport: { read: "" }, filter: { field: 'Freight', operator: 'neq', value: 11.61 }...

Kendo Template source binding array creates double entries

I am using a Kendo template with an array to dynamically add rows to a form, however, when I push an item onto the array, it adds two rows, both bound to the same data object in the MVVM (so with two objects, there are four rows). I've run the...

how to reuse kendo-ui window jquery

I have seen some posts about this issue but I am getting a actual error instead of it just not opening. the window opens successfully on a success function. however i am receiving the error message after I close it and then try to reopen it. Error Message Uncaught TypeError:...

Button Not showing in Kendo Grid,,kendo-ui,kendo-grid
I have a kendo grid that I'm using in MVC and the column won't display anything. It just returns empty. I don't see the input in code when I use developer tools either. columns.Template(@<text> <input type="button" class="btn btn-default" value="Tasks" onclick="window.location.href = '../../OBClientSetupTasks/Index/@item.SetupID'" /> </text>).HeaderTemplate(@<text>Tools</text>); }) I don't understand what...

array from javascript to controller java in kendo ui

I have a grid in kendo ui with batch editing and I need pass a array to my controller when user clicks update. I have the follow code: index.jsp: parameterMap: function(data, type) { if (type != "read") { data = data.models; } return data; } @Post @WithoutRoot public void...

Kendo UI ASP.NET MVC ListView fails when trying to add or edit items

I'm struggling to set up a ListView which allows me to add new records and to update existing ones. Loading the items for the list works like a charm. Also showing the only relevant information Id and Line works perfectly. Two problems: 1. Adding a new item to the list:...

kendo - datasource - parameterMap does not bind parameters

I'm not sure if I'm doing this right, as I'm new to whole these systems, but I want to manage my kendo grid data (pagination, filters, etc). I'm using this ODataController in ASP.NET Web API 2, driven from version 4 of OData package, which support parameters like: $top, $skip, $count,....

How to conditionally provide a style for a grid cell?

I'm using the Kendo UI grid in my AngularJS application and I would wish to apply a certain background color conditionally. Below is my column definition : columns: [ { field: "TradeAmount", title: "Trade Amount", width: "120px", filterable: { cell: { showOperators: false } } }, ] So the above...

How do I Change window size on kendo grid editor template?

I have a editor template for my kendo grid defined as <script id="my-editor-template" type="text/x-kendo-template"> <div class="k-edit-label"> <label for="ContactName">Contact</label> </div> <div data-container-for="ContactName" class="k-edit-field"> <input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName"> </div> <!-- more fields, etc --> </script> In my grid definition, I definte editable like this: editable = { mode: 'popup', template:...

Setting options of a Kendo Grid that is inside an Editor Template

Inside the editor template of one of my Grids, A, I have another grid, B. I want to set read and update actions of this Grid based on the current Id in the A. I've tried using Razor code inside the editor template like this: // details grid: B .Read("action",...

How to create a hyperlink using the id of an item in a client template on Kendo Grid,kendo-ui
So I have a Kendo Grid using the 'Hierarchical' mechanism. When I come to my Client Template portion, I'm doing this: .Columns(column => { column.Bound(o => o.Id).Width(110); column.Bound(o => o.Title); column.Bound(model => model.Id) .ClientTemplate(String.Format("<a href=\"{0}\" data-title=\"View Stuff\" class=\"stuff\"><i class=\"glyphicon glyph-btn directory\">Stuff</i></a>", Url.Action("Details", "Stuff", new { Id = "#=Id#" }))) .Width(40)...

Kendo TreeList - adding and updating rows

I am using Kendo TreeList to display hierarchical data. Application allows user to add new rows to the displayed data, or edit existing ones. I am not using inline editing. Right now I add new rows by this piece of code:; And if user edited some row, it is...

KendoUI Grid - Complex JSON with inconsistent keys

I know this is probably been asked before, but having tried to find an answer - I am guessing either I am not comprehending some of the answers right, or I am looking at the problem all wrong. I am using a complex SLC loopback query - and the api...

How would I link to an external site from a cell in a kendo grid?

Just like the title says. I want to have a kendo grid with a column called Link. That column would need to dynamically generate a link to whatever address the user puts into it. I don't need to worry about error checking to ensure the link is valid, or anything...

How to mark Kendo Grid's cell as edited?

I'm dynamically editing some fields using JavaScript. But the problem is Kendo's dataSource doesn't recognize them as changed cells. Grid's edit mode is InCell. This is my current JavaScript code: tablesGrid.tbody.find("input[type='checkbox']").each(function () { $(this).on('change', function () { var isChecked = $(this).prop('checked'); var dataItem = tablesGrid.dataItem($(this).closest('tr')); var currentTr = $(this).closest('tr'); var...

Filter kendo dropdownlist to remove options

I want to filter security questions such that if I select questiona from the list of questions, for the next questions, I no longer see questiona in the list of security questions. This is to prevent duplicate selection of security questions. Here's a jsfiddle with a pure jquery implementation:

How can i avoid conflicts of two css frameworks?

I am using Foundation CSS framework and Kendo UI grid in my project The Kendo UI grid sometimes overridden by foundation CSS thing. How can I avoid this conflicts?...

Getting Kendo Grid from its DataSource

I'm writing a generic error handler for all of the Kendo Grids. I need to get that source Grid to prevent its default behavior in saving data. In the handler, you can access the source's DataSouce by args.sender. How can I access the Kendo Grid from that DataSouce? The only...

Legend Duplication

I have the following implementation and it is functional. I wonder how I could able to fix duplicate of legend in my current implementation. Please watch fname="NY" for (var i=0;i<;i++){ if ([i].valueColor != "" &&[i].fname != "") { color =[i].valueColor,[i].fname } } FIDDLE...

How override Print in Kendo UI Editor?,kendo-ui,telerik,editor
I used Kendo UI Editor control. IT is ok. But I need to do same events before Printing How override Print function in Kendo UI Editor ? @(Html.Kendo().Editor() .Name("editor") .Tools(tools => tools .Clear() .Bold().Italic().Underline().Strikethrough() .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull() .InsertUnorderedList().InsertOrderedList() .Outdent().Indent() .CreateLink().Unlink() .InsertImage() .InsertFile() .SubScript() .SuperScript() .TableEditing() .ViewHtml() .Formatting() .CleanFormatting() .FontName() .FontSize()...

MouseOver with Cursor Pointer on Y Axis

The following implementation shows mouseover event with cursor pointer on y axis title label. It works and functional. However, I want to implement mouseover event with cursor pointer on y axis (numeric axis) as well. CURRENT IMPLEMENTATION...

How to Pass Kendo DropDownList DataTextField value to Controller,kendo-ui,,html.dropdownlistfor,kendo-dropdown
I have a Kendo DropDownList on the View and I want to pass its DataTextField value to the Controller and then pass and them on the labels in another View. Although I can pass DataValueField values to the Controller, I cannot pass DataTextField values. I tried to apply different scenarios...

How do I reference a specific cell in kendo grid with javascript?

Right now I have a kendo grid with 2 rows and 6 columns. I need some logic to highlight a specific cell but I don't know how to reference a cell. I used this example but I don't know what to pass in as the id. myHub.client.highlightRow = function (id)...

How to change color of row depending on a row's value in a Kendo UI Grid

I have a Kendo UI Grid, which contains four columns: Highlight MAC Time Message The Highlight column can contain the values "yes" or "no", and this column is hidden. I need to create a row template that will highlight (change the color or something) the row if the value is...

Emptying a grid in kendo UI after receiving erroneous data

The kendoUI grid on which I am working on is refreshed when you pass new data with the datasource, which is fine, but I need to empty it when an error or an action occurs. So, how can I empty and refresh the kendoUI grid manually. Thanks in advance...

How do I attach function to kendo grid after it initialized?

I have a Kendo Grid and I have JavaScript function “getFilters”. The “getFilters” function is scoped function defined in document ready. Currently the grid is calling “getFilters” like below. But this doesn’t work because “getFilters” gets initialized after the grid initialization. So im getting error 0x800a1391 - JavaScript runtime error:...

kendo window fill parent

I'm trying to create a custom action 'fillParent' for kendo dialog. var dialog = $('#dialog').kendoWindow({ actions: [ 'FillParent', 'Minimize', 'Maximize' ] }); //FillParent definition dialog.wrapper.find(".k-i-fillparent").click(function(e){ e.preventDefault(); dialog.setOptions({ width: $(".content").width(), height: $(".content").height(), position: { top: 0, left: 0 } }) }); This works only the first time I click on fill...

Implementing KendoUI grid search with dataSource filtering

I'm not sure if i'm doing this correctly, but I want to filter ('search') kendo ui grid based on one input's value. However, I want to search two fields of the grid, based on only one input. $("#grid").data("kendoGrid").dataSource.filter({ logic: 'or', filters: [ { field: 'lastName', operator: 'startswith' }, { logic:...

Kendo Scatter Chart - Reverse Dates in xAxis?

I'm building a page with a Kendo scatter chart of data over time. The only catch is that the client wants the most recent data to the left. I've sorted the input datasource by date descending, but that seems to be blithely ignored, with the chart stubbornly plotting the data...

Loading Image Animation only once

I have the following implementation and it is fully functional. I need to show loading animation image first time only, my current implementation it shows loading animation all the time. var theDataSource = new{ transport: { read: function (op) { setTimeout(function () { op.success(data); }, 4000); } }, group:...

Loading Animation Image Implementation

I have the following implementation, it works and functional. However I would like to add a loading animation with setup a 4 seconds. requestStart: function () { kendo.ui.progress($("#loading"), true); }, requestEnd: function () { kendo.ui.progress($("#loading"), false); } CURRENT IMPLEMENTATION I have came across the following fiddle, however I could not...

how to find class of a span used in of a kendo grid

I have kendo grid with large no of rows.In some of the rows few keywords are highlighted, ex: row: shubham, gupta, is a student the word student has been highlighted by adding a css class(highlight) to it. On inspection from chrome it looks like this : <tr data-uid="35495e0b-7e1b-45e3-8058-562c97d2b24d" role="row"> <td...

How to hide columns in Kendo Grid when editing in a popup,kendo-ui,kendo-grid,
I use Telerik Kendo Grid editing-inline. I want to hide certain columns when editing popup the number of columns....

Kendo Date to Date Time

I am switching between a Kendo Date-Time picker and a Kendo Date Picker. The Picker alternates between the two depending on if the user has selected "All Day" - which then only the Date Picker is shown. However, when switching from the Date-Picker, to the Date-Time picker, if one alters...

How to programically collapse or expand Kendo Grid Group by values in row

I have a requirement to default a grouped grid to collapsed state UNLESS it contains a row with a certain value (Status == "Closed"). I got this far but fell down because the dataView only contains an array of rows of the grouped field not the rows as I've seen...

Mouse over event and cursor pointer on the line series

I have the following implementation and it is functional. When user clicks on the line series, then it loads another data. I want to give an impression to the first time user that line series clickable with implementing mouse over event and cursor: pointer. var isHover=false; function onClick (e) {...

Is it possible to reorder Kendo Tabstrip tabs with drag and drop?

Is is possible to reorder the tabs with drag and drop (see Kendo Tabstrip basic mode here)? Similar to dragging tabs in Excel.

Set default attribute for all Kendo UI Grids

I have a Web Site containing multiple Kendo UI Grids. I have now been asked to remove the scrollbar from each of these grids. I know there's a config attribute scrollable that I could change to false in order to achieve this. However, I would like to avoid adding this...

KendoGrid inline editing with dynamic drop down lists

In this demo, if you click on the category, you'll see a dropdown list to choose the value. What I need is to have the values of the dropdown list depend on a condition, so when you open the dropdown list on different rows you may get different lists. At...