I want to use the ListView to select items, very similar to this example: http://demos.telerik.com/kendo-ui/listview/selection
There are two items that I'm having a problem with. First, I need to be able to select the first item in the list view by default (ie. on new object creation). I found this code in another thread, but it's not working:
var listView = $("#listView").data("kendoListView"); listView.select(listView.element.children().first());Secondly, I need to be able to select an item in the list view by ID (ie. editing an existing object).
This is the JSON I'm sending to the ListView:
{"Icons":[{"Name":"fa-icon-bolt","ID":23},{"Name":"fa-icon-book","ID":3},{"Name":"fa-icon-building","ID":32},{"Name":"fa-icon-building-o","ID":24},{"Name":"fa-icon-calculator","ID":15},{"Name":"fa-icon-car","ID":18},{"Name":"fa-icon-certificate","ID":2},{"Name":"fa-icon-cloud","ID":6},{"Name":"fa-icon-cog","ID":33},{"Name":"fa-icon-desktop","ID":4},{"Name":"fa-icon-diamond","ID":26},{"Name":"fa-icon-exclamation","ID":29},{"Name":"fa-icon-file","ID":25},{"Name":"fa-icon-fire-extinguisher","ID":36},{"Name":"fa-icon-flask","ID":16},{"Name":"fa-icon-globe","ID":11},{"Name":"fa-icon-graduation-cap","ID":1},{"Name":"fa-icon-h-square","ID":20},{"Name":"fa-icon-headphones","ID":12},{"Name":"fa-icon-info","ID":27},{"Name":"fa-icon-laptop","ID":8},{"Name":"fa-icon-line-chart","ID":19},{"Name":"fa-icon-mobile","ID":9},{"Name":"fa-icon-newspaper-o","ID":10},{"Name":"fa-icon-plus","ID":28},{"Name":"fa-icon-puzzle-piece","ID":13},{"Name":"fa-icon-road","ID":34},{"Name":"fa-icon-rocket","ID":35},{"Name":"fa-icon-share-square-o","ID":5},{"Name":"fa-icon-suitcase","ID":30},{"Name":"fa-icon-truck","ID":14},{"Name":"fa-icon-university","ID":7},{"Name":"fa-icon-user","ID":22},{"Name":"fa-icon-user-secret","ID":17},{"Name":"fa-icon-users","ID":21}]}And this is how I'm currently initializing it:
function initIconsView() { var datasource = new kendo.data.DataSource({ transport: { read: { type: "GET", url: "/Controllers/MainController.cfc?method=getIcons", processData: true, dataType: "json", cache: false } }, schema : { type: "json", data: "Icons" } }); $("#icons_list").kendoListView({ dataSource: datasource, selectable: true, template: kendo.template($("#icon_list_template").html()) }); }And the template/HTML:
<script id="icon_list_template" type="text/x-kendo-template"> <div class="icon"> <i class="#: data.Name # fa-icon-2x"></i> </div></script><div class="demo-section k-content wide"> <div id="icons_list"></div></div>Really they're two different facets of the same issue - programmatically selecting an item in the ListView.
after upgrading to "2016.1.118" my code (see below) produce an "Uncaught TypeError: Cannot read property 'date' of undefined" when trying to access dataItem properties in chart.series.notes.label.template:
The code:
var devChart = $("#chart").kendoStockChart({ theme: "bootstrap", dataSource: chartDs, dateField: "date", series: [{ type: "line", style: "smooth", field: "pct", noteTextField: "date", // keep, however overruled by label.template notes: { position: "bottom", icon: { visible: false }, label: { color: "white", border: { dashType: "dash" }, background: "#777", rotation: -90, position: "inside", template: "#:kendo.toString(category, 'dd-MMM-yyyy')#" // this code works in "2016.1.118" version //template: "#:kendo.toString(dataItem.date, 'dd-MMM-yyyy')#" // this code worked in pre-"2016.1.118" version } } }], ...
My dataset:
[{"rId":6789,"date":"2015-05-06T12:28:33.643+02:00","max":160.00,"score":140.0,"pct":88.0,"survey":"survey 1"},{"rId":7228,"date":"2015-05-29T11:14:42.047+02:00","max":160.00,"score":150.0,"pct":94.0,"survey":"survey 1"},{"rId":9590,"date":"2015-08-11T13:53:27+02:00","max":160.00,"score":160.0,"pct":100.0,"survey":"survey 1"},{"rId":12770,"date":"2015-10-02T10:53:55+02:00","max":160.00,"score":140.0,"pct":88.0,"survey":"survey 1"},{"rId":14890,"date":"2015-10-28T12:41:27+01:00","max":160.00,"score":140.0,"pct":88.0,"survey":"survey 1"},{"rId":16222,"date":"2015-11-06T13:12:12+01:00","max":365.00,"score":365.0,"pct":100.0,"survey":"survey 2"}]
I want to check out the new Dashboard app template, but I'm having trouble finding it. I upgraded UI for ASP.NET MVC to Q1 2016 using Telerik Control Panel. It is installed in the C:\Program Files (x86)\Telerik folder. When I couldn't find the template there, I also installed Kendo UI Professional (including examples). I found this blog that speaks of an apptemplates folder, but I'm not seeing that in my installation. Were the templates moved somewhere else in this release?
Thanks.
Kendo Q3 2015, asp.net mvc
I have the scenario where I'm binding columns to nullable objects. I'm using the client template, and have a little html to add if the value is not null.
I've simplied my code here. "ChildObject" is a property that can be null. If it is null, show nothing. If it is not null, show ChildObject.Name (in some custom html)
columns.Bound(c => c.ChildObject.Name).Title("Some Column") .ClientTemplate( "#= (ChildObject == null) ? ' ' : '<div>' + ChildObject.Name + '</div>' #" ) .Width(100);This code throws the invalid template error. If I remove the '+'s, it works fine. Example: '<div>Hello</div>' works, however that wouldn't allow me to add databound text.
Thanks
@(Html.Kendo().Grid<MaterialEstimateQuantityApplicationModel>() .Name("MaaterialEstimateQuantityApplicationGrid") .Columns(columns => { columns.Bound(p => p.Amount); columns.Bound(p => p.QuantityAmount); columns.Bound(p => p.MaterialMarkup); columns.Bound(p => p.UnitPrice); columns.Bound(p => p.Total); columns.Bound(p => p.MaterialEstimationId).Visible(false); columns.Bound(p => p.ItemQuantityId).Visible(false); }) .Editable(editable => editable.Mode(GridEditMode.InCell)) //.Pageable() .Navigatable() //.Sortable() .Scrollable() .DataSource(dataSource => dataSource .Ajax() .Batch(true) .PageSize(20) .ServerOperation(false) .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.Id)) .Read("EditingLaborItemsCreate_Read", "Estimate", new { estimateId = Model.EstimateId }) .Update("EditingLaborItemsCreate_Update", "Estimate") .Create("EditingLaborItemsCreate_Create", "Estimate") ).I am adding items on client with url parameter set:
var item = this.links.append({ text: text, url: url }, parent);
//http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#methods-appendThe generated code is:
<li role="treeitem" class="k-item" data-uid="64c022e1-c7c4-470e-8dab-a5f821290894" aria-selected="false " id="menuitems-admin_management_database"> <div class="k-top"> <a class="k-in k-state-focused" href="#!/admin/management/database">Database</a> </div></li>I would expect that k-link class is also added to the a tag, otherwise this happens.(On some themes text is not visible)
Hi I have a simple multiselect....
<select id="msProducts" multiple style="width:100%;"></select>
$(document).ready(function () {
//products multi-select
$("#msProducts").kendoMultiSelect({
placeholder: "Select Product(s)",
dataTextField: "ProductNameText",
dataValueField: "ProductNameValue",
dataSource: {
type: "json",
serverFiltering: true,
transport: {
read: {
url: "Home/Products"
}
}
}
});
});
My Contoller has:
'GET: Home/Products
<HttpGet>
Function Products() As JsonResult
Dim DiaryProductList As List(Of ProductsModel) = ProductsModel.GetProducts
Return Json(DiaryProductList , JsonRequestBehavior.AllowGet)
End Function
My ProductsModel Class has:
Public Class ProductsModel
Public Property ProductNameText As String
Public Property ProductNameValue As String
Public Shared Function GetProducts() As List(Of ProductsModel)
Dim ProductList = New List(Of ProductsModel)
Dim dc As New DBDataContext
Try
Dim ProductsQuery = (From pIn dc.Products
Where p.ProductStatus <> "discontinued"
Select New With {.ProductNameValue = p.ProductName,
.ProductNameText = p.ProductName}).OrderBy(Function(lst) lst.ProductNameValue)
For Each r In ProductsQuery
ProductList.Add(New ProductsModel() With {.ProductNameValue = r.ProductNameValue,
.ProductNameText = r.ProductNameText})
Next
Catch ex As Exception
ProductList.Add(New ProductsModel() With {.ProductNameValue = "",
.ProductNameText = ex.Message})
Finally
dc.Connection.Close()
End Try
Return ProductList
End Function
End Class
My problem is that although the muti-select gets populated (with some 5000+ products) the dropdown is not filtering as a user types. For example if I beging typing the word CAKE. As soon as I type C the I-beam disappears and after a second or two the dropdown drops for a brief moment and the disappears clearing the multi-select completely. The only way I can populate at the moment is type the letter A, wait and then scroll through the complete list and select what I need for each item I need. Have I missed something. Should I introduce paging in order to limit the data?
Thanks
I am trying to export a grid to excel. There is a column group which might have any number of columns depending on configuration. The issue is when i export the grid, i am not able to see the values of the column names instead i see variable names. attachments show what i mean. please help me!
this is what i used in my view.
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Kendo UI Grid Export.xlsx")
.Filterable(true)
)
I have a basic editor that I need to check for content. If empty I will generate error. My code to check for empty is:
var dropdownlist = $("#addNew_dTeam").data("kendoDropDownList");
if (dropdownlist.value() == "") {
validFlag = false;
errorMsg = "<li>Select Team</li>"
}
dropdownlist = $("#addNew_dType").data("kendoDropDownList");
if (dropdownlist.value() == "") {
validFlag = false;
errorMsg += "<li>Select Entry Type</li>"
}
var multiSelect = $("#msServers").data("kendoMultiSelect");
if (multiSelect.value() == "") {
validFlag = false;
errorMsg += "<li>Add at least one Server or select N/A</li>"
}
var editor = $("#diaryComments").data("kendoEditor");
if (editor.value() == "") {
validFlag = false;
errorMsg += "<li>A comment is mandatory</li>"
}