Kendo UI getByUid() not working in hierarchical data source - javascript

I have a Kendo UI hierarchical data source set up, but getByUid() does not work as expected for me. It returns 'undefined' when I search for a uid that I can see is in my hierarchical data source.
The twist is that I am searching for a node that I add after initially setting up the hierarchical data source, using the .data() method.
Here is a Kendo Dojo snippet to illustrate - you will see at the bottom I console.log the datasource, the uid I am searching for, and the response ('undefined'), so you can see that that uid is in there.
Kendo Dojo Snippet
I think I have set up my schemas and models correctly, and as far as I can tell from the Kendo documentation I should be able to populate the dataSource using .data() and populate it with a fresh JavaScript object, with more nested nodes, yet still I cannot search for these new nodes using getByUid().
Here is the JavaScript from the Dojo snippet as well:
var initColumns = [
{
id: 0,
Index: 0,
ResponsiveStyle: 3,
Widgets: []
},
{
id: 1,
Index: 1,
ResponsiveStyle: 3,
Widgets:[]
},
{
id: 2,
Index: 2,
ResponsiveStyle: 3,
Widgets: []
}
];
var Columns = new kendo.data.HierarchicalDataSource({
schema: {
data: "Columns"
}
});
var Rows = new kendo.data.HierarchicalDataSource({
schema: {
data: "Rows",
model: rowModel
}
});
var Widgets = new kendo.data.HierarchicalDataSource({
schema: {
data: "Widgets",
model: layoutWidgetModel
}
});
var layoutWidgetModel = kendo.data.Node.define({
id: "layoutWidget",
hasChildren: "Rows",
children: Rows
});
var rowModel = kendo.data.Node.define({
id: "rowModel",
hasChildren: "Columns",
children: Columns
});
var parentModel = kendo.data.Node.define({
id: "parentModel",
hasChildren: "Widgets",
children: Widgets
});
var validator;
var viewModel = kendo.observable({
//create a dataSource
dataSource: new kendo.data.HierarchicalDataSource({
data: initColumns,
schema: {
model: parentModel
}
}),
selected: {} //this field will contain the edited dataItem
});
viewModel.dataSource.read(); //invoke the read transport of the DataSource
//Create the variables to create an object for insertion into the main parent object for the HierarchicalDataSource
var Rows = [ { Index: 0, Columns: [
{
Index: 0,
ResponsiveStyle: 0
}]
} ];
var SubType = 'Joined';
var WidgetName = 'widget name';
var Type = 'widget type';
var DisplayType = 'widget subtype';
var Title = 'widget title';
var Collapsible = true;
var Borders = 1;
var TitleBackground = 4;
var TitleColour = 6;
var kendoLayoutWidget = new layoutWidgetModel({ Title: Title, Type: Type, SubType: SubType, WidgetName: WidgetName, Collapsible: Collapsible, DisplayType: DisplayType, Borders: Borders, TitleBackground: TitleBackground, TitleColour: TitleColour, Rows: Rows });
//Get the uid of the new widget
var GUID = kendoLayoutWidget.uid;
//Get the current object from the HierarchicalDataSource
var VBdata = viewModel.dataSource.data();
//Push in the newly created widget object
VBdata[0].Widgets.push(kendoLayoutWidget);
//Replace the old data in the dataSource with the new multilevel object
viewModel.dataSource.data(VBdata);
//find the layoutwidget by getByUid()
var theWidget = viewModel.dataSource.getByUid(GUID);
console.log(viewModel.dataSource);
console.log(GUID);
console.log(theWidget);

Related

Getting id or name of folder in fuelux tree

I'm trying to get the id or name of the selected folder in a fuelux tree but couldnt manage to get it done.
My tree is a classic folder/file type tree and I want to be able to see the id of the folder when I click on a file.
this is my datasource for tree
var treeDataSource = new DataSourceTree({
data: [
{ name: 'Elektronik Belgelerim', type: 'folder', 'icon-class': 'blue', additionalParameters: { id: 'F1' } },
{ name: 'Gelen Kutusu', type: 'folder', 'icon-class': 'blue', additionalParameters: { id: 'F2' } },
{ name: 'Giden Kutusu', type: 'folder', 'icon-class': 'blue', additionalParameters: { id: 'F3' } },
{ name: 'Çöp Kutusu', type: 'folder','icon-class':'green', additionalParameters: { id: 'I1' } },
//{ name: 'Çöp Kutusu', type: 'item', 'icon-class': 'success', additionalParameters: { id: 'F4' } },
//{ name: 'Reports', type: 'item', additionalParameters: { id: 'I1' } },
//{ name: 'Finance', type: 'item', additionalParameters: { id: 'I2' } }
],
delay: 400
});
js function for tree begins like this inside tree-custom.js
var e = function (e, i) {
this.$element = t(e), this.options = t.extend({}, t.fn.tree.defaults, i), this.$element.on("click", ".tree-item", t.proxy(function (t) {
this.selectItem(t.currentTarget)
}, this)), this.$element.on("click", ".tree-folder-header", t.proxy(function (t) {
this.selectFolder(t.currentTarget)
}, this)), this.render()
};
and this is where I add the links under folders again inside trree-custom.js. Very primitive I know but that's all I can do with my current skillset. The part I added is between quotes. Rest came with beyondadmin theme and looks like usual fuelux.
selectFolder: function (e) {
//alert("testselectFolder");
//
//alert($('#myTree').tree({ dataSource: dataSource }));
var i, n, r, o = t(e),
s = o.parent(),
a = s.find(".tree-folder-content"),
l = a.eq(0);
//-----------------------------------------------
var li = $('<li>');
var TcgbLink = $('<a href=/E-Belge/Main/Folder/Inbox/?Type=1&DocumentTypeId=3>e-TCGB</div>' +"</br>");
var FaturaLink = $('<a href=/E-Belge/Main/Folder/Inbox/?Type=1&DocumentTypeId=4>e-Fatura</div>' + "</br>");
var Dolasim = $('<a href=>e-Dolasim Belgesi</div>');
li.append(FaturaLink);
a.append(li);
li.append(TcgbLink);
a.append(li);
li.append(Dolasim);
a.append(li);
//-----------------------------------------------
o.find(".fa.fa-folder").length ? (i = "opened", n = ".fa.fa-folder", r = "fa fa-folder-open", l.show(), a.children().length || this.populate(o)) : (i = "closed", n = ".fa.fa-folder-open", r = "fa fa-folder", l.hide(), this.options.cacheItems || l.empty()), s.find(n).eq(0).removeClass("fa fa-folder fa-folder-open").addClass(r), this.$element.trigger(i, o.data())
},
Now these links are being generated under all 4 folders. I want to be able to get the id (or name, preferably Id) of the folder so I can assign new Type parameters to querystring.
So far I tried to reach the id with this.data.id to no avail.
Instead of injecting the folder's children in the selectFolder callback, it is recommended to add the children via the dataSource callback (as in this example code: http://getfuelux.com/javascript.html#tree-usage-javascript).
The first argument to the dataSource is the "parent data" when you click on a tree node (with the second argument being the callback that you send the new array of child data).
This way you can use the selected event for getting your ID, because it gets the jQuery data passed to it.

How to filter select-box in devextreme

I'm having some problems to filter with 03 select boxes, country, state and city.
How can I get select boxes nested?
And How can I get some filter with these data?
My code in script.js using MySQL Database:
var serviceFilterCountry = "http://localhost:8000/filtercountry";
var serviceFilterProvince = "http://localhost:8000/filterprovince";
var serviceFilterCity = "http://localhost:8000/filtercity";
$scope.countries = new DevExpress.data.DataSource(serviceFilterCountry);
$scope.provinces = new DevExpress.data.DataSource(serviceFilterProvince);
$scope.cities = new DevExpress.data.DataSource(serviceFilterCity);
//var dataSourceCity = new DevExpress.data.DataSource(serviceFilterCity);
//var dataSourceF = new DevExpress.data.DataSource(serviceFilter);
$scope.selectedProvince = null;
$scope.filterProvincesByCountry = function(e) {
var countryP = e.value;
$scope.provinces.filter("country", countryP);
$scope.provinces.load().done(function(result) {
$scope.selectedProvince = result.state;
});
};
$scope.selectedCity = null;
$scope.filterCitiesByProvince = function(e) {
var provinceC = e.value;
$scope.cities.filter("country", $scope.countries.select('country'));
$scope.cities.filter("state", provinceC);
$scope.cities.load().done(function(result) {
$scope.selectedCity = result.city;
});
};
To filter data by a selectbox value you can use the onValueChanged event. For example, the following code shows how to filter cities by country id:
JS:
$scope.countries = new DevExpress.data.DataSource({
store: [{id: 1, text: "USA"}, {id: 2, text: "Canada"}]
});
$scope.cities = new DevExpress.data.DataSource({
store: [{id: 1, countryId: 1, text: "NY"}, {id: 2, countryId: 2, text: "Toronto"}]
});
$scope.filterCitiesByCountry = function(e) {
var countryId = e.value;
$scope.cities.filter("countryId", countryId);
$scope.cities.load();
};
HTML:
<div dx-select-box="{dataSource: countries, displayExpr: 'text', valueExpr: 'id', onValueChanged: filterCitiesByCountry}"></div>
<div dx-select-box="{dataSource: cities, displayExpr: 'text', valueExpr: 'id', bindingOptions: { value: 'selectedCity' } }"></div>
More information about the filter operation you can find here.
I've create a small sample that demonstrates this approach in action - http://plnkr.co/edit/SR93AIRSp9TUuA5fYmpa

Kendo grid drop down not translating numeric values

I have managed to set the options array on a kendo grid column after the grid has been initialised. During initialisation I pass the column in question an empty array then this array is populated with an array of objects after initialisation using JavaScript. The option objects are of the type { value: 1, text: 'text' } with the 'text' begin the displayed value & when selected translated into the corresponding value - 1.
However when the grid is loaded with data the number values are not being translated into their corresponding text values and are being displayed as numbers. Interestingly when you click on a cell of this column type the translation is then performed. How can I get the number value to be translated into its text value when the grid is loaded with data, is there an option setting that I am missing?
var optCategory = [];
$('#grid').kendoGrid({
dataSource: [],
columns: [ { field: 'Category', title: 'Category', width: '100%', values: optCategory } ],
editable: true
});
(function getCategoryValues () {
var grd = $('#grid').data('kendoGrid');
var o = { value: 1, text: 'Option 1' };
grd.columns[0].values.push(o);
var o = { value: 2, text: 'Option 2' };
grd.columns[0].values.push(o);
var o = { value: 3, text: 'Option 3' };
grd.columns[0].values.push(o);
})();
var products = [ { Category: 2 } ];
var ds = new kendo.data.DataSource({
data: products
});
$('#grid').data('kendoGrid').setDataSource(ds);
// $('#grid').data('kendoGrid').dataSource.read(); - no effect
// $('#grid').refresh(); - no effect
http://jsfiddle.net/EddyBu/c7kztssq/2/
Thank you!

kogrid with server-side paging+filtering: self.sortedData is not a function

I'm experiencing an issue with knockout and kogrid. After several tests, I managed to reproduce it in this fiddle:
http://jsfiddle.net/MVuUp/
In short, I have a sample VM (ItemsViewModel) which should provide data to a kogrid, with server-implemented filtering and paging. The vm exposes a gridOptions object with all the data required by kogrid, and a refresh function called to get data from the server. In the fiddle I replaced the ajax call to get real data with some dummy inline data.
Now, when loading the page I constantly get this error in the kogrid source:
Error: TypeError: self.sortedData is not a function Source File:
http://ericmbarnard.github.com/KoGrid/lib/KoGrid.debug.js Line: 1473
If instead I just use the observable array named dummyData with just a div for the grid, as in the basic kogrid sample (https://github.com/Knockout-Contrib/KoGrid), this error does not come out; so I'm supposing there is something wrong in my usage of the library.
Here is the relevant part of my VM:
function ItemsViewModel() {
var self = this;
self.dummyArray = ko.observableArray([{
name: "Goofy",
age: 27
}, {
name: "Mickey",
age: 33
}]);
self.items = ko.observableArray([]);
self.filterOptions = {
filterText: ko.observable(""),
useExternalFilter: true
};
self.pagingOptions = {
pageSizes: ko.observableArray([5, 10]),
pageSize: ko.observable(20),
totalServerItems: ko.observable(0),
currentPage: ko.observable(1)
};
self.gridOptions = {
data: self.items,
enablePaging: true,
multiSelect: false,
filterOptions: self.filterOptions,
pagingOptions: self.pagingOptions,
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "title",
displayName: "Title"
}]
};
self.refresh();
}
This function is used to get data (at present I left filtering out):
ItemsViewModel.prototype.refresh = function () {
var params = {
page: this.pagingOptions.currentPage(),
pageSize: this.pagingOptions.pageSize(),
sortBy: "datemodified",
isSortDesc: true
};
// dummy data (2 pages x 5)
var data = {
page: 1,
totalPages: 2,
totalRecords: 10,
records: []
};
for (var i = 0; i < 10; i++) {
data.records.push({
id: i,
title: "title " + i
});
}
ko.utils.arrayPushAll(this.items, data.records);
this.pagingOptions.totalServerItems(data.totalRecords);
}
My HTML is just a div with data-bind set to
koGrid: { data: gridOptions }
In your html, change
<div class="datagrid" data-bind="koGrid: { data: gridOptions }"></div>
to
<div class="datagrid" data-bind="koGrid: gridOptions "></div>

Tree is not displayed propery in DOJO

I am new to DOJO 1.6
I trying to display tree with sub folders.
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dijit.tree.TreeStoreModel");
dojo.require("dojo.store.Memory");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
// Create test store, adding the getChildren() method required by ObjectStoreModel
var data = [ { id: 1, name: "answerTypeLabel", type:'scenario', children:[{_reference: 2}]},
{ id: 2, name: "acceptRequestLabel", type:'paragraph', data: "acceptRequestLabel"},
{ id: 3, name: "rejectRequestLabel", type:'scenario', children:[{_reference: 5},{_reference: 6}]},
{ id: 4, name: "MoreInformationLabel", type:'scenario', children:[{_reference: 7},{_reference: 8}]},
{ id: 5, name: "rejectRequestStatusLabel", type:'paragraph', data: "rejectRequestStatusLabel"},
{ id: 6, name: "rejectRequestNotCoveredLabel", type:'paragraph', data: "rejectRequestNotCoveredLabel" },
{ id: 7, name: "MoreInformationDocumentLabel", type:'paragraph', data: "MoreInformationDocumentLabel"},
{ id: 8, name: "MoreInformationDataLabel", type:'paragraph', data: "MoreInformationDataLabel"}
];
// Building the store object
var sortableStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
label: 'name',
items: data
},
});
// building the model
var model = new dijit.tree.ForestStoreModel({
store: sortableStore,
query: {
id: "*"
},
rootId: "root",
rootLabel: "sorting of tree"
});
// Building the tree
var tree = new dijit.Tree({
model:model,
'class': "tundra"
},
"resourceTree");
});
.
Here Id 2 in a child of Id 1 , so while displaying Id 2 must be inside Id 1.
But here Id 2 appears inside id 1 and also on the same level of id 1.(There is a duplication of all the all the child ids ).
This is case with id 2,5,6,7,8.
I want to remove the duplication.
Ouptput should be like
Reason is that you apply a non-hierachial store onto a tree which is not supposed to display items that has parents as a sibling to the root.
To 'fix' this, the referenced id's needs to not get matched by the model query.
In your case of data, it looks like the type:'paragraph' is supposed to be leaves. Therefore set the query to match type:'scenario' as opposed to your current ' id: "*" '
var model = new dijit.tree.ForestStoreModel({
store: sortableStore,
query: {
type:'scenario'
},
rootId: "root",
rootLabel: "sorting of tree"
});

Categories