Hi. There is an error in ProgressBarOptions definitions for value property:
interface ProgressBarOptions { name?: string; animation?: ProgressBarAnimation; chunkCount?: number; enable?: boolean; max?: number; min?: number; orientation?: string; reverse?: boolean; showStatus?: boolean; type?: string; value?: number; //should be number | boolean!!!! change?(e: ProgressBarChangeEvent): void; complete?(e: ProgressBarCompleteEvent): void; }Hi I have a treeview which is populated every time i select a row from grid which is a file name. I am currently adding the file size so I used a template -
<script id="treeview-template" type="text/kendo-ui-template">
<div class="layout-row">
<div class="item-stylingsize">#: item.text #</div>
<div class="item-stylingsize">#: item.size #</div>
</div>
</script>
since adding this template -
template: kendo.template($("#treeview-template").html()),
dataTextField: "text",
dataSource: tree,
select: onselect,
dataBound: function (e)
{
try
{
// uid is just some text
var uid = returnUID();
var treeview = $("#treeView").data("kendoTreeView");
var text = treeview.findByText(uid);
var itemroot1 = treeview.dataItem(text);
// expands to the correct node
treeview.expandTo(itemroot1);
// should select the correct node but does not
treeview.select(itemroot1);
}
My expandTo() function is not working because the findbytext() isnt working.
A separate issue is the select() function does not select a node.
Any help would be appreciated

I have a tab strip in AngularJS where I am saving the user's last viewed tab and then trying to programmatically select that tab when they return to the page using ng-class and a scoped variable. This worked in a previous version of kendo UI, but I recently upgraded to the latest version and it no longer works. Here is how it is setup:
<div kendo-tab-strip="tabStrip" k-content-urls="[null, null]">
<ul>
<li ng-class="selectedTab == 'Surveys' ? 'k-state-active' : ''" ng-click="changeSelectedTab('Surveys')">Surveys</li>
<li ng-class="selectedTab == 'Assigned Surveys' ? 'k-state-active' : ''" ng-click="changeSelectedTab('Assigned Surveys')" >Assigned Surveys</li>
</ul>
<div>Tab1</div>
<div>Tab2</div>
</div>
The tab will show that it is selected, but the div content does not display. Any suggestions on an possible workaround?
Hi!
I have bee through a lot of threads regarding this but I'm not able to find a dependable working solution. My case is that
Here is the basic code to create the grid.
var kendoDataSource = new kendo.data.DataSource({ data: getDataForGrid(), pageSize: 5, schema: { model: { id: "ParkingServiceId", fields: { ParkingServiceId: { type: 'number', editable: false }, TerminalId: { type: 'number', validation: { required: true } }, ServiceId: { type: 'number', validation: { required: true } }, ParkingCardNumber: { type: 'string' }, ParkingCardIssueDate: { type: 'date', validation: { required: true } }, ParkingCardExpiryDate: { type: 'date', validation: { required: true } }, ParkingCardGroupId: { type: 'number' }, ServiceFee: { type: 'number', validation: { min: 0, required: true }, editable: false } } } }});var gridMain = $("#serviceDetailsGrid").kendoGrid({ dataSource: kendoDataSource, pageable: false, sortable: false, toolbar: ["create"], columns: [ { field: "TerminalId", title: "Terminal", width: 140, template: getTerminalTitle, editor: terminalDropDownEditor }, { field: "ServiceId", title: "Service", template: getServiceTitle, editor: serviceDropDownEditor }, { field: "ParkingCardIssueDate", title: "Issued On", width: 152, template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #", format: "{0:dd-MMM-yyyy}" }, { field: "ParkingCardExpiryDate", title: "Expiry", width: 152, template: "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #", format: "{0:dd-MMM-yyyy}" }, { field: "ParkingCardGroupId", title: "Area", width: 100, template: getTerminalAreaTitle, editor: terminalAreaDropDownEditor }, { field: "ParkingCardNumber", title: "Card #", width: 120 }, { field: "ServiceFee", title: "Fee", width: 100 }, { command: [{ name: "edit" }, { name: "destroy" }], title: " ", width: "100px" } ], editable: "inline", cancel: function () { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); }, dataBound: function () { var innerContentU = $(".k-grid-update").html(); if (innerContentU) { $(".k-grid-update").html(innerContentU.replace("Update", "")); } var innerContentC = $(".k-grid-cancel").html(); if (innerContentC) { $(".k-grid-cancel").html(innerContentC.replace("Cancel", "")); } var innerContentD = $(".k-grid-delete").html(); if (innerContentD) { $(".k-grid-delete").html(innerContentD.replace("Delete", "")); } var innerContentE = $(".k-grid-edit").html(); if (innerContentE) { $(".k-grid-edit").html(innerContentE.replace("Edit", "")); } }}).data("kendoGrid");I still see UPDATE, CANCEL, DELETE, and EDIT text. I have tried the following:
Using AngularJS I have a grid that I can drag the header from and place into an input field.
What I would like to do is drag and place this header in the same fashion that DataTransfer.setData() works, this will allow me to keep adding information to the input field in whichever order I would like.
Here is a plunker with an example of what I am trying to achieve though some reason the kendo header won't populate the input in plunker but it does work on my local project.
Thanks, any help on this would be great as I really want to use the kendo grid for this

Hi!
I have the following code:
<div id="main-section-header" class="row">
<h2 id="team-efficiency" class="col-xs-3">Security Groupings</h2>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
});
function addClick(e) {
e.preventDefault();
var dialog = $("#addGrouping").data("kendoWindow");
dialog.center();
dialog.open();
}
function getSelectedIndex() {
var selectedIndex = $("#securityGroupings").data('kendoDropDownList').select();
if (selectedIndex == -1)
selectedIndex = 0;
alert("blablabla")
var expandedNode = $('#expandedNode').val();
return { selectedGroup: selectedIndex, selectedNode : expandedNode}
}
function onDropDownChanged(e) {
var treeView = $('#treeView').data('kendoTreeView');
treeView.dataSource.read();
alert('treeview refreshed');
}
function onDataBound(e) {
var dropDown = $("#securityGroupings").data('kendoDropDownList');
var selected = dropDown.select();
alert('onDataBoundCalled: ' + selected);
if (dropDown.select() == -1)
{
this.select(0);
this.trigger("change");
}
}
function onExpanded(e) {
var tree = $('#treeView').data('kendoTreeView');
var data = tree.dataItem(e.node);
$("#expandedNode").val(data.id);
}
</script>
<div class="panel panel-default">
<h1> Select a security grouping</h1>
<p>
@(Html.Kendo().Button()
.Name("addButton")
.Content("<i class='fa fa-plus rd-k-med-icon'></i> Add")
.Events(e => e.Click("addClick")))
@(Html.Kendo().DropDownList()
.Name("securityGroupings")
.DataTextField("Name")
.DataValueField("Id")
.SelectedIndex(0)
.Events(e => e.Change("onDropDownChanged"))
.Events(e => e.DataBound(("onDataBound")))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSecurityGroupings", "SecurityGrouping");
});
})
.HtmlAttributes(new {style = "width: 50%"})
)
</p>
@Html.Hidden("expandedNode")
@(Html.Kendo().TreeView()
.Name("treeView")
.DataTextField("Name")
.Events(e => e.Expand("onExpanded"))
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetRootGrouping", "SecurityGrouping").Data("getSelectedIndex")
)
)
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(false))
)
</div>
@(Html.Kendo().Window()
.Name("addGrouping")
.Title("Security Grouping")
.Actions(a => a.Clear())
.LoadContentFrom("OpenNewGrouping"))
I am populating the contents of a TreeView with the contents of a DropDownList. The function onDropdownChanged works as expected if the TreeView is at the root level but if a node is expanded then it just returns the children of the old root and ignores the newly selected root.
Any help is appreciated :)
If you use the below - r is not passing the valid state
$("#spreadsheet").kendoSpreadsheet();
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();
sheet.range("A1").value("r");
sheet.range("A1").validation({
from: "r",
comparerType: "equalTo",
dataType: "text",
messageTemplate: "Not Valid."
});
I have just started integrating kendoui components with my angular js app. Here I am having hard times figuring out the angularjs compatible attributes for the grid.
It would have been much relief if there was/is any link which could highlight all the necessary attributes and their usage. By attribute I mean : k-options, k-placeholder, k-filter etc.

I have the following grid:
$("#mygrid").kendoGrid({ dataSource: gridDataSource, filterable: { extra: false, operators: { string: { startswith: "Starts with", eq: "Is equal to" }, date: { eq: "Is equal to" } } }, columns: [ { 'field': 'RateType', 'title': 'Rate', editor: brDropDownEditor, template: "#=RateType.Name#" }, ... ]});There are other fields but "RateType" is the one I have a question about. The field is an object and I'm using the template so the Name property is displayed in the grid.
When I attempt to filter by that column I get the following javascript error:
Uncaught TypeError: (d.RateType || "").toLowerCase is not a functionMy question is, how do I get it to filter by the Name property instead of the object? I tried searching the forums and found this post: http://www.telerik.com/forums/inline-grid-filtering---column-bound-to-property-object
In that post, Plamen provided a sample (http://dojo.telerik.com/@zdravkov/ApiJU/2) which has the Category column setup the same way my RateType column is setup. In that sample, when I try to apply a filter on the Category column, I get the same javascript error:
Uncaught TypeError: (d.Category || "").toLowerCase is not a functionIs this a bug? How can I get the filter to compare against the Name property that I'm using in the template?