Use angular binding with kendo grid templates - angularjs

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;

Related

How to set column order by Drag Drop in Kendo UI TreeList Widget?

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?

AngularJS dropdownlist with treeview

I am new to angularjs, i want to use dropdownlist with treeview structure. i used both dropdownlist and treeview control separately but find difficulty in using together. can anyone have idea about how to use both together(dropdownlist+treeview)
You can use simple select control. I hope you are grouping values by some property. Lets say you have following data structure:
$scope.data = [
{
id: 1,
value: "Cat",
type: "Animal"
},
{
id: 2,
value: "Dog",
type: "Animal"
},
{
id: 3,
value: "Lion",
type: "Animal"
},
{
id: 4,
value: "Parrot",
type: "Bird"
},
{
id: 5,
value: "Sparrow",
type: "Bird"
},
];
You can group your data by "type" field and show a treeview dropdown as follows:
<select ng-options="obj.value group by obj.type for obj in data track by $index"></select>
For more details you can look at https://docs.angularjs.org/api/ng/directive/ngOptions

How to use ngoptions to generate an optgroup without repeating the group name

Hello i'm trying to use ng-options to get a grouping of countries by region. It only works by repeating the group name in every row. Is it possible to do it using the following json :
$scope.countries = [
{ region: "americas", countries: [{ value: "usa", key: "1" }, { value: "mexico", key: "2" }] },
{ region: "Africa", countries: [{ value: "3", key: "Algeria" }, { value: "4", key: "Morocco" }, { value: "5", key: "Tunisia" }] },
];
ng-options is pretty locked down in it's definition, so you'll probably need to loop through your countries array and add the region, something like:
$scope.countries_with_regions = [];
$scope.countries.forEach(function(region){
region.countries.forEach(function(country){
country.region = region.region;
$scope.countries_with_regions.push( country );
});
});
then you can do your ng-options with the countries_with_regions
You data structure fo countries needs to be like
countries = [{value : 3, key: "algeria", region : "africa"}, ...]
for the ng-options to be able to "group by" region.

Backbone-UI, TableView, rendering columns

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.

Backgrid unable to render columns

I am just learning the basics of backgrid.js. So when I attempt to replicate the code on the main page Backgrid.js, I am unable to render a grid due to a particular error when passing in an array of objects for the columns. I believe I am using proper format
var columns = [
{ name: "name", label: "Name", cell: "string" },
{ name: "address", label: "Address", cell: "string" },
{ name: "tel", label: "Phone", cell: "integer" },
{ name: "email", label: "Email", cell: "string" },
{ name: "type", label: "Contact Type", cell: "string" }
];
The error Uncaught TypeError: Object [object Object] has no method 'listenTo' occurs in the process of initializing the grid at this step:
var grid = new Backgrid.Grid({
columns: columns,
collection: this.collection
});
Is there an issue with how I am initializing the grid?
The issue was with the version of backbone.js I was using. I reccommend using the proper version of libraries.
Backgrid.js depends on 3 libraries to function:
jquery >= 1.7.0, underscore.js ~ 1.4.0, and backbone.js ~ 0.9.10.
Here's a simple structure on how to use it.
HTML
<div id="container"></div>
JS
$(function(){
/** Columns definition */
var columns = [
{ name: "name", label: "Name", cell: "string" },
{ name: "address", label: "Address", cell: "string" },
{ name: "tel", label: "Phone", cell: "integer" },
{ name: "email", label: "Email", cell: "string" },
{ name: "type", label: "Contact Type", cell: "string" }
];
/** Model instance */
var mdl = Backbone.Model.extend({});
/** Collection instance */
var col = Backbone.Collection.extend({
model: mdl
});
/** Test array of JSON (usually coming from a server) */
var json = [
{"name": "Goose", "address": "a 1st address", "tel": 25500100, "email": "w#test.net","type": 1},
{"name": "Ducky", "address": "a 2nd address", "tel": 25500123, "email": "w#test1.net","type": 2}
];
/** Create the Grid */
var grid = new Backgrid.Grid({
columns: columns,
collection: new col(json)
});
/** Add the Grid to the container */
$("#container").append(grid.render().$el);
});

Resources