I'm trying to add some icons inline to the TreeView data items, however the k-template directive does not seem to be rendering anything.
I base this off of the online docs at
http://demos.telerik.com/kendo-ui/treeview/angular
and here's a plunkr of what I'm trying to do:
treeview plunkr
My HTML (with a simple test)
<div id="treeview" kendo-tree-view="nav.treeview"
k-options="nav.treeOptions"
k-data-source="nav.reportsTreeDataSource"
k-on-change="nav.onTreeSelect(dataItem)">
<span k-template>{{dataItem.text}} TEST THIS TEMPLATE !!!</span>
</div>
and here's a snippet of my dataSource coming from my datacontext service:
function getReportsTree() {
var reportsJson = [
{
id: 1, text: "Standard", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
{ id: 3, text: "MTM Aggr", reptName: "MTM Aggr", spriteCssClass: "folder" },
{ id: 4, text: "Member Aggr", reptName: "Member Aggr", spriteCssClass: "folder" }
]
},
{
id: 30, text: "Hierarchy", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
{ id: 31, text: "Ctpy Hrchy", reptName: "CTPYHIER", withHierarchy: 'true' },
{ id: 32, text: "Ctpy/BkgLocation Hrchy", reptName: "CTPYHIER_BKG_LOC", withHierarchy: 'true' }
]
}
];
return $q.when(reportsJson);
}
Image showing the rendered tree, where the template does NOT render :
I need to know if I'm missing some key piece here, or do I have incorrect formatting.
thank you in advance,
Bob
**** UPDATE ****
I'm now checking to see if my Kendo UI library is a few versions behind. It may have something to do with my issue.
A Kendo UI lib update to 2014.3.1308 was necessary to get the k-template option embedded into the treeview.
However I do find a minor bug, even on their demo website - when you expand a tree node, that same level's text becomes the literal {{dataItem}}.
Related
I am using Angularjs version of Kendo UI Tree List Widget. Below is the code that I am using
HTML
<div id="treeview" kendo-tree-list="treelist"
k-options="TreeViewOptions" style="margin-top: 5px" class="trade_show">
</div>
Code for binding the Tree List
var treeDataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Main Menu", Icon: "", View: "", parentId: null },
{ id: 5, Name: "Sub Menu 1", Icon: "", View: "", parentId: 1 },
{ id: 6, Name: "Sub Menu 2", Icon: "", View: "", parentId: 1 },
{ id: 7, Name: "Sub Menu 3", Icon: "", View: "", parentId: 1 },
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$scope.TreeViewOptions = {
dataSource: treeDataSource,
height: 540,
editable: {
move: true
},
sortable: true,
columns: [
{ field: "Name" },
{ field: "Icon" },
{ field: "View" }
]
};
Every thing is working fine, but I am unable to get column ordering working. Essentially what I need is to be able to drag drop the rows to set their display order.
This feature exists in Kendo UI TreeView widget.
Is this feature supported in the Kendo UI Tree List Widget?
If not, then is there a workaround to get it working?
I have kendo-grids in Angular ng-Repeat and serach options on the grids data.
I want to refresh the grids on search.
This is my code and it doesn't refresh the grids ($("#kendoGrid1").data("kendoGrid") is undefined), what Is the fix for this?
html
<article ng-repeat="(key,val) in gridsResult" >
<h2 class="tableTitle">{{key}}</h2>
<div kendo-grid="kendoGrid{{$index}}" k-options="getGridSlice('{{key}}')"></div>
</article>
js
$scope.getGridSlice = function (index) {
var data = $scope.gridsResult[index];
return {
dataSource: {
data: data
}
},
columns: [
{ field: "aa", title: " ", attributes: { "class": "k-header",style:"text-align:center;" }, width:"33px" },
{ field: "bb", title: "IF", template: rowTemplate.replace(/XX/g, 'IF')}
],
scrollable: false,
noRecords: true,
}};
scope.onSearch function -
$("#kendoGrid1").data("kendoGrid").datasource.read();
I found the answer!
The $digest dosen't work on functions so I added k-data-source based on a scope parameter not scope function.
(you need to pull the data from the DB grouped by the grids category)
<article class="tradescreenTable" ng-repeat="(key,val) in gridsResult" ng-class="{'bestAverage': bestAverageSelected}">
<h2 class="tableTitle">{{key}}</h2>
<div kendo-grid k-data-source="{{val}}" k-options="gridOptions"></div>
</article>
And k-options
$scope.gridOptions = {
columns: [
{ field: "aa", title: " ", attributes: { "class": "k-header",style:"text-align:center;" }, width:"33px" },
{ field: "bb", title: "IF", template: rowTemplate.replace(/XX/g, 'IF')}
],
scrollable: false,
noRecords: true,
};
You also need to refresh the grid:
$("#kendoGrid1").data("kendoGrid").datasource.read();
$("#kendoGrid1").data("kendoGrid").refresh();
kendo-grid="kendoGrid{{$index}}" binds the grid to the $scope - you don't need to use jQuery for this (and besides, you're not setting an id on the DOM element, so $("#kendoGrid1") is never going to work with your code as it is now).
$scope.kendoGrid1.datasource.read();
The one caveat to this is that I haven't ever tried dynamically setting the name for a Kendo Grid, so I'm not 100% that it works.
I use kendo ui grid with angular. I want the grid to be updated with every change in the array (of any property). Meaning, if my data is:
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
and the age is changed from 16 to 17 I want the grid to be updated automatically.
I understand that I can use ObservableArray and when updating the observable the grid will be updated but I don't want the entire application to know the observable. I want to be able to update the original rowData and affect the grid. Any suggestions of how I do that?
I thought that adding a template to a row or a specific column with angular binding will help but it didn't, here is an example of it:
function Controller(GridConstants) {
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
this.gridDataSource = new kendo.data.DataSource({
data: new kendo.data.ObservableArray(this.rowData),
schema: {
model: { id: "id" }
}
});
this.gridOptions = {
dataSource: this.gridDataSource,
selectable: "row",
columns: [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age",
template: "<label>{{dataItem.age}}</label>"
}
],
selectable: "single"
};
}
You can try ng-bind instead:
template: "<label ng-bind='dataItem.age'></label>"
var rowDataObservable = new kendo.data.ObservableArray(this.rowData);
...
data: rowDataObservable,
...
//and you need work with rowDataObservable, this will work
rowDataObservable[0].age = 17;
I'm trying to render a table view with four columns, 'name', 'birthday', 'gender', 'married', but
a) they columns aren't showing up at all
b) I'm not even sure if I am passing them correctly, because when I console.log table.options the columns property is rendered as "empty":
Object {columns: Array[0], emptyContent: "no entries", onItemClick: function, sortable: false, onSort: null}
I've tried this:
var table = new Backbone.UI.TableView({
model: people,
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" } },
{ title: "Birthday", content: "birthday" } },
{ title: "Married", content: "married" } }
]
});
And this:
var table = new Backbone.UI.TableView({
model: people,
options: {
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" },
{ title: "Birthday", content: "birthday" },
{ title: "Married", content: "married" }
]
}
});
The source code change is adding the options as mu is too short said. Change the initialize method of the Backbone.UI.TableView object to be the following within the source code:
initialize : function(options) { //add parameter
Backbone.UI.CollectionView.prototype.initialize.call(this, arguments);
$(this.el).addClass('table_view');
this._sortState = {reverse : true};
this.options = _.extend({}, this.options, options); //Add this line
}
I'm sure there might be a better place to put this but I'm just going through tutorials to learn some advanced backbone stuff considering the documentation does not match the current version I would shy away from using the library in production as of right now. Hopefully it is fixed in the future.
Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)