Hi there,  I have a grid that has been initialize at the beginning with no dataSource. What I wanted to achieve is to set / re-populate the DataSource to the grid later on.
I used the method setDataSource, but it doesn't work if the grid has initialized with the options "sortable" or "filterable". I have an example code below

$("#grid").kendoGrid({

  columns: [{

        field: "date",

        title: "Date",

        filterable: {

            cell: {

              enabled: true,

              showOperators: false,

              operator: "contains",

            }

          }

        },{

        field: "invoicenumber",

        title: "Invoice Number",

        filterable: {

          cell: {

            enabled: true,

            showOperators: false,

            operator: "contains",

          }

        }

      }             

  ],

  filterable: { mode: "row" },

  sortable:{ mode:"multiple", allowUnsort: true},

  scrollable: false

});

   

var grid = $('#grid').data("kendoGrid"), 

     

    dataSource = new kendo.data.DataSource({

      data:[

        { date : "26/09/2014", invoicenumber: "dsafasd"},

        { date : "11/11/2011", invoicenumber: "zzzzzz"}

      ]

        });

   

  grid.setDataSource(dataSource) ;

Any ideas?

If I call too quick select method, the second time the method is not executed. I found out that my problem lies in this line:
in activateTab function.

I can not change the time between 2 calls (select method), but I need to activate tab when second call is executed.

I have a Kendo Chart with several data points over time. The default scale is set to months. On hovering each of these points the tooltip is displayed with the value of each point. I have customized an event on the series click in which I detect the current month clicked and update the x axis to show the information for the month selected. The event code is as follows:


function onSeriesClick(e) {
    var selectedDate = e.category;
    var categoryAxis = $('#chart').data('kendoChart').options.categoryAxis;    

    categoryAxis.min = new Date(selectedDate.getFullYear(), selectedDate.getMonth());
    categoryAxis.max = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1);
    categoryAxis.baseUnit = "days";
    categoryAxis.labels.rotation = -90;

    $('#chart').data('kendoChart').refresh();
}


As you see, the above mentioned function just obtains the date of the selected point and updates the category axis to show only a month span. The chart is then refreshed to show this changes.As a result of the range change, some of the data points disappear from the chart which is an expected behaviour. However, even tough the points have disappeared from the chart, moving the cursor over the chart where the other points used to be, results in the tooltip for them to still show. I have to either click somewhere on the chart or move the cursor completely away from the chart area to make the tooltips for the points that are not there anymore to disappear.My question is, is there anything that I can do to "refresh" the tooltip when the range for the chart is refreshed? I was thinking in something like

$('#chart').data('kendoChart').options.tooltip.refresh();

But this method does not exist. What can I do?

I have provided a jsfiddle which illustrates my problem. Just click on any of the data points and then move the cursor inside the chart area and you will see the problem.

http://jsfiddle.net/pagasnc1/

My kendo Grid  column having combobox editor and filte as combobox template but its not filter the column from the grid please find the attachment for screenshot.Here is my code

var forecastGrid = detailRow.find(".LongRangePlan").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_api/web/lists/GetByTitle('LELRPMST')/items?$select=ShortDisplayName,EntityName,CountryName/Title,CountryName/ID,RegionName/Title,RegionName/ID&$expand=CountryName,RegionName",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
},
create: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/LELRPMST",
dataType: "json"
},
update: {
url: function (data) {
return "http://datacollect.taxdemos.com/sites/LaureateDev/_api/web/lists/GetByTitle('LELRPMST')/items" + "(" + data.ID + ")";
},
beforeSend: function (jqXhr, options) {
var data = JSON.parse(options.data);
jqXhr.setRequestHeader("If-Match", data.__metadata.etag);
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE"
}
},
destroy: {
url: function (data) {
return "http://datacollect.taxdemos.com/sites/LaureateDev/_api/web/lists/GetByTitle('LELRPMST')/items" + "(" + data.ID + ")";
},
type: "DELETE",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
}
},
parameterMap: function (data, type) {

// if (type == "update") {
// for (var property in data) {
// if (property != "__metadata" && property != "ID" && property != "Title" && property != "SourceId1" && property != "SourceList" && property != "Status") {
// delete data[property];
// }

// }
// };
// if (type == "create") {
// for (var property in data) {
// if (property === "ID") {
// delete data[property];
// }
// }
// // return kendo.stringify(data);

// };

return kendo.data.transports["odata"].parameterMap(data, type);

}

},
pageSize: 7,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
// filter: { field: "Title", operator: "eq", value: e.data.Title },
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number", editable: false, nullable: true },
EntityName: { type: "string" },
ShortDisplayName: { type: "string" },
RegionName: { type: "object", defaultValue: { Title: "GPS"} },
CountryName: { type: "object", defaultValue: { Title: "Mexico"} }
}
}
}
},

//toolbar: [{ name: "my-create", text: "Add new record" }, "cancel"],
toolbar: ["create", "cancel"],
scrollable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
filterable: { mode: "row" },
columns: [
{ field: "EntityName", title: "HFM Name", filterable: { cell: { showOperators: true}} },
{ field: "ShortDisplayName", title: "Dashboard Dispaly Name", filterable: { cell: { operator: "contains"}} },
{ field: "CountryName", title: "Country", editor: CountryHierarchyCellDropDownEditor, template: "#=CountryName.Title#", filterable: { cell: { showOperators: false, template: CountryDropDownEditor}} },
{ field: "RegionName", title: "Region", editor: RegionHierarchyCellDropDownEditor, template: "#=RegionName.Title#", filterable: { cell: { showOperators: false, template: RegionDropDownEditor}} },
{ field: "Exception", command: ["edit", "destroy"], title: "Action", filterable: { cell: { showOperators: false, template: '<input id="${id}" type="checkbox" />'}}}],
editable: "inline"
});

function RegionHierarchyCellDropDownEditor(container, options) {
if (typeof (options) == 'undefined') {
$('<input required data-text-field="Title" data-value-field="ID" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Regions",
type: "GET",
dataType: "json",
success: function (data) {
alert(data);
alert("RegionId");
},
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
}
});
}
else {
$('<input required data-text-field="Title" data-value-field="ID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Regions",
type: "GET",
dataType: "json",
success: function (data) {
alert(data);
alert("Region");
},
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
}
});
}
}

function CountryHierarchyCellDropDownEditor(container, options) {
if (typeof (options) == 'undefined') {
$('<input required data-text-field="Title" data-value-field="ID" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Countries",
type: "GET",
dataType: "json",
success: function (data) {
alert(data);
alert("CounrtyID");
},
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
}
});
}
else {
$('<input id="drpCountry" required data-text-field="Title" data-value-field="ID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Countries",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
},
change: function (data) {

}
}
});

$("#drpCountry").data('kendoDropDownList').value(options.model.CountryName.ID);
}
}


function CountryDropDownEditor(container) {
container.kendoDropDownList({
autoBind: false,
dataTextField: "Title",
dataValueField: "ID",
valuePrimitive: true,
optionLabel: "Select...",
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Countries",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
// filter: { field: "Title", operator: "eq", value: filterData }
}

});
}
function RegionDropDownEditor(container) {
container.kendoDropDownList({
autoBind: false,
dataTextField: "Title",
dataValueField: "ID",
valuePrimitive: true,
optionLabel: "Select...",
dataSource: {
type: "odata",
transport: {
read: {
url: "http://datacollect.taxdemos.com/sites/LaureateDev/_vti_bin/listdata.svc/Regions",
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
}
}
// filter: { field: "Title", operator: "eq", value: filterData }
}

});
}

Hi,

I have applied the drag and drop functionality.

Mainly I want is multiple draggable divs and multiple droppable divs.

Is it possible to do so with Kendo Ui drag and drop? please help.

Thanks,

Vidhin

I tried to implement a tooltip on this Telerik site : http://demos.telerik.com/aspnet-mvc/tooltip/ajax

This is my script code on cshtml page:


Event requestStart:


And controller:


And result is: when i hover tag a, tooltip not showing any content, when i debug, method TooltipCustomer get parameter "id" and return StringBuilder exactly, don't know where i am going wrong, please help me.

Hi,

Just using the demo with IE11 at http://demos.telerik.com/kendo-ui/treeview/dragdrop
You will notice when dragging a node, the dragged node is a long way from the cursor - wrong enough that it's off-putting and can't be ignored.

Even the code we use to customize this on Chrome/Firefox doesn't actually work - though it's stopped working for us on Chrome/Firefox as well, so something about timing either we'll have to look into or that is wrong with a later version of TreeView

(coffeescript - should give you a rough idea)
@treeView?.dragging?._draggable?.options.cursorOffset = 
left: 5
top: -5

We're using v2014.2.826 but that the Demo on Kendo's own site shows the issue, I probably don't need to specify.
Is there some other way to customize the offset or is this something that needs a fix?

Hi,
I've added code so that the combobox datasource reads from a cached set of data initially, then makes a server call if more than a couple of letters are typed in and refreshes the data (sort of a combined Combobox and Autoselect):

<img height="20px" width="20px" src="ASSETS/IMAGES/jumpArrow.svg" id="jumpMovie" /><input id="movies"/><br />

$("#movies").kendoComboBox({
dataTextField: "Display",
dataValueField: "CPSWGUID",
select: onSelect,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: function (operation) {
var url = "/api/Lookup/2/";

var cashedData = localStorage.getItem("moviesData");
//alert($(this).attr('id'));

var combobox = $("#movies").data("kendoComboBox");

if (cashedData === null) {
$.getJSON(url, function (json) {
localStorage.setItem("moviesData", JSON.stringify(json));
operation.success(json);
});
}
else {
if (combobox.text() == '' || combobox.text() == undefined) {
var retval = $.parseJSON(cashedData);
operation.success(retval);
} else {
$.getJSON(url, { searchvalue: combobox.text() }, function (json) {
operation.success(json);
});
}
}

}
},
schema: { data: "Table" }
}),
ShowToggleImage: false,
headerTemplate: '<div class="dropdown-header">' +
'<span class="k-widget k-header"><a onclick="addNewRecord(\'movies\')">Add New</a></span>' +
'<span class="k-widget k-header"><a onclick="clearComboVal(\'movies\')">Clear</a></span></div>',
template: '<span class="k-state-default"><h3>#: data.Display #</h3><p>#: data.Display2 #</p></span>',
});

var combobox = $("#movies").data("kendoComboBox");

combobox.input.keyup(function (event) {
if (combobox.text().length == 0) {
combobox.dataSource.read();
combobox.value('');
} else if (combobox.text().length >= 3) {
if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) {
combobox.dataSource.read();
}
}
});

$(document).off('click', '#jumpMovie').on('click', '#jumpMovie', function () {
if (combobox.value() != '') {
alert(combobox.value());
}
});

function clearComboVal(ctrlname) {
var me = $('#' + ctrlname).data("kendoComboBox");
me.value('');
}

function addNewRecord(ctrlname) {
var me = $('#' + ctrlname).data("kendoComboBox");

me.dataSource.add({ CPSWGUID: "3FB46FDE-E333-424B-8690-2B4D9EC20090", Display: "Record, New" });
me.value("3FB46FDE-E333-424B-8690-2B4D9EC20090");
}

This is something I'm hoping to use as a standalone control several places in the application and would ideally also like to have it embedded in grids. My questions are:
1. Is it possible to wrap something like this in an editor in a grid so that the datasources are individual to the cells being looked at?
2. How would I refer to the data("kendoCombobox") in the datasource of the combobox in a generic way where I wouldn't have to specify the id of control itself? This would probably be necessary for anywhere that "movies" is explicitly stated.

Thanks for your help.
​

(sorry my poor english, Im not a native speaker)
What is the minimum set of script files that need to be load to run the widgets with angular (autocomplete for example).

kendo.all.min.js and kendo.web.min.js are too large and lags our development enviroment

We tryed to load kendo.core.min.js + kendo.angular.min.js + kendo.autocomplete.min.js but it didn't work

I created a drawer project and all I did was add an additional layout called "login" that doesn't have a drawer specified. I then changed home.html to use "login" instead of the "main" layout (which does have a drawer).  When I do this and run the app home comes up correctly, but I am able to swipe the screen and the drawer appears. Shouldn't there not be a drawer visible if the layout doesn't contain one? I need to have a login entry page that doesn't allow the user to proceed until they have be authenticated.