I'm trying to expand Kendo treeview all nodes on initialization.
But is not working. Here are solutions I have referenced:
1.http://dojo.telerik.com/UqOxa/2
2.http://www.telerik.com/forums/how-do-you-default-a-treeview-to-expanded-on-initialization
My source code:
html:
<div id="kendoTreeViewSelector"
kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem"
k-on-data-bound="onDataBound"
ng-click="kendoTreeViewToggle($event)">
<span k-template>
{{dataItem.text}}
</span>
</div>
Angular controller:
ServiceMenusRepository.getMenus(data.EmployeeNO, 2, selectType, SystemSN,
function (data) {
if (data.data) {
$scope.treeData = new kendo.data.HierarchicalDataSource({
data: data.data,
});
$scope.subMenuItems = data.data;
$scope.onDataBound = function (e) {
setTimeout(function () {
$scope.tree.expand(".k-item");;
});
}
$scope.kendoTreeViewToggle = function (e) {
var target = $(e.target);
var toggleIcon = target.closest(".k-icon");
if (!toggleIcon.length) {
this.tree.toggle(target.closest(".k-item"));
}
};
$timeout(function () {
initMenu();
menu2q.resolve();
}, 0);
} else {
menu2q.resolve();
}
}, menuq.reject);
By the way, I'm using Kendo UI v2015.1.429.
Is there any suggestion for this problem?
Many thanks!!
In the dataBound event of the TreeView, try:
e.sender.expand(".k-item");
It's from the demo at http://demos.telerik.com/kendo-ui/dialog/treeview-integration. I just used it yesterday and my tree is all expanded.
You can also try adding an expanded: true field to the items in data.data as this demo does when it sets the data for its HierarchicalDataSource: http://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog
Related
I have a problem with understanding how two way data binding works inside directive. Seems it's working only one way cause when i update value by typing directly in input field model is not being updated even though the datasource is set with '='. When i click change item button model is also updated. Why typing inside input fields doesn't update the model?
Also if factories/services are singletons why i'am able to create new instances of Item by clicking the button and each one of the holds separate value?
I wasn't sure if those two problems are related to each other or not that's why asking it this way. PLUNKR
angular.module('singletonServicesTest', [])
.controller('pageCtrl', function(Item) {
vm = this;
vm.items = [];
vm.addItem = function() {
console.log('changeItem');
var item = new Item();
vm.items.push(item);
};
vm.addItemWithContent = function() {
var item = new Item('some content');
vm.items.push(item);
};
vm.changeItem = function() {
console.log('change');
vm.items[0].content = Math.random();
};
})
.factory('Item', function() {
function Item(data) {
if (data) {
this.content = data;
}
}
Item.prototype.content = '';
return Item;
})
.directive('itemDirective', function() {
return {
scope: {
datasource: '='
},
template: '<div><input value="{{datasource.content}}" /></div>'
}
});
<body ng-app="singletonServicesTest" ng-controller="pageCtrl as page">
<h1>Hello Plunker!</h1>
<button ng-click="page.addItem()">Add item</button>
<button ng-click="page.addItemWithContent()">Add item with content</button>
<button ng-click="page.changeItem()">change item</button>
<div ng-repeat="item in page.items">
<item-directive datasource="item"></item-directive>
</div>
{{page.items}}
</body>
I have a requirement to create a multiselect dropdown using angularjs with values coming from database based on different parameters.I have implemented following code. It is working fine when the page loads at first time. If come to this page second time, the $http.get function is not executing and still showing the same data as in the first page load.
This is my .js file:
var app = angular.module("myModule", ["angularjs-dropdown-multiselect"]);
app.controller("myController", ['$scope','$http', function ($scope,$http) {
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
This is my html file :
<div ng-app="myModule" ng-controller="myController" >
<div class="container">
<div id="divRight" style="min-height:5px;display: inline-block; width: 40%; vertical-align: top;">
<label style="float:left;">Error Description : </label>
<div style="float:left;width:200px;margin-left:10px" ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="AllDescriptions" selected-model="DescriptionsSelected" checkboxes="true"></div>
</div>
</div>
</div>
This is my .cs file :
public JsonResult MethodName()
{
List<string> errorDescriptions = //Get from server
return new JsonResult() { Data=errorDescriptions,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
}
Kindly help me to execute this JSON method for every page request instead of only in the first page request. Thank you.
I think the problem is with cache. Try to put your get method in variable ($scope.GetDescriptions = function () { $http.get... }) and use ng-init directive
(<div class="container" ng-init="GetDescriptions()">). Also try to empty array before push elements in it ($scope.AllDescriptions = [], $scope.AllDescriptions.push(...)
Try adding $route.reload(), this reinitialise the controllers but not the services:
app.controller("myController", ['$scope','$http','$route' function ($scope,$http,$route) {
$route.reload(); // try pass parameter true to force
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
If you want to reset the whole state of your application you can use $window.location.reload(); instead route like:
app.controller("myController", ['$scope','$http','$route' function ($scope,$http,$route) {
$window.location.reload(); // try pass parameter true to force
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
Hope this works.
We have a method (onOpenNotitiesClicked) for showing a Modal view for entering notes. We have implemented the Backbone Modal plugin for this (https://github.com/awkward/backbone.modal).
There are two situations:
There are not yet notes in the backend: initialize and render the
modal
There are already notes in the backend => first collect them and
then pass the notes to the modal (initialize) and then render
In the first situation it works fine! The modal is shown.
In the second situation, the modal is not shown.
I have debugged both situations and in both situations, alle methods are executed and in the elements, I see the HTML of the modal view.
I suspect this looses some data during the Q/promise data get, but I can't see what/where/how/why....
Anyone any idea what I am doing wrong? Or what I am missing?
The creation of the modal:
onOpenNotitieClicked: function (event) {
var $element, taak, taakId, id, options = {};
$element = this.$(event.currentTarget).closest("li");
id = $element.data("id");
taakId = $element.data("taak-id");
taak = this.getCurrentTask(event);
options.taakKey = id;
options.taakId = taakId;
options.heeftNotities = taak.heeftNotities;
options.datacontroller = this.datacontroller;
this.notitiesOptions = options;
// this.renderNotitieModal(options);
if (taak.heeftNotities) {
this.getActiviteitNotities(taakId).then(_.bind(this.onSuccessGetNotities, this), _.bind(this.onErrorGetNotities, this));
} else {
this.renderNotitieModal(this.notitiesOptions);
}
},
In case there are notes to be collected:
getActiviteitNotities: function (taakId) {
return this.datacontroller.getNotities(taakId);
},
onSuccessGetNotities: function (notities) {
this.notitiesOptions.notities = notities;
this.renderNotitieModal(this.notitiesOptions);
},
onErrorGetNotities: function () {
this.renderNotitieModal(this.notitiesOptions);
},
To get the notes from the backend, Q/promises is used.
getNotities: function (taakId, refresh, klantorderId) {
return Q.promise(function (resolve, reject) {
var options = {};
if (!this.notitiesCollection || this.taakId !== taakId || refresh) {
delete this.notitiesCollection;
this.notitiesCollection = this.createCollection("NotitiesCollection", {
id: this.taakId,
resource: this.NOTITIES_RESOURCE
});
if (taakId) {
this.taakId = taakId;
options = {
data: {
parentId: this.taakId
}
};
} else if (klantorderId) {
options = {
data: {
klantorderId: klantorderId
}
};
}
resolve(this.notitiesCollection.fetch(options));
} else if (this.notitiesCollection) {
resolve(this.notitiesCollection.toJSON());
} else {
reject("ERROR");
}
}.bind(this));
},
Notities.js (the modal view):
(function () {
"use strict";
App.Bewaking.modals.BewakingNotitieModal = Backbone.Modal.extend({
template: JST.bewaking_notitie_modal, //jshint ignore:line
title: "Notities",
formatter: new App.Main.helpers.Formatter(),
events: {
"click #save-notitie": "onSaveNotitieClicked"
},
initialize: function (options) {
this.taakId = options.taakId;
this.taakKey = options.taakKey;
this.datacontroller = options.datacontroller;
this.notities = options.notities;
},
afterRender: function () {
console.log("afterRender");
this.$notitieModal = this.$("#notitieModal");
this.$nieuweNotitie = this.$("#nieuwe-notitie");
this.$notitieErrorTekst = this.$("#notitie-error-tekst");
this.$notitieModal.on("shown.bs.modal", function () {
this.$nieuweNotitie.focus();
}.bind(this));
},
render: function () {
console.log(this.notities);
this.$el.html(this.template({
formatter: this.formatter,
notities: this.notities
}));
return this;
}
});
}());
I have used syncfusion grid and i want to bind data to syncfusion grid from API
but data binding to syncfusion grid is not working
here is HTml code for grid
<div ng-controller="ContactsController as contact">
<div id="Grid" ej-grid e-datasource="contact.Cdata" e-columns="contact.columns" e-toolbarsettings='contact.tools' e-toolbarclick="contact.toolbarHandler"
e-editsettings="contact.edittsetings" e-allowsorting="contact.allowsorting" e-sortsettings="contact.sortsettings" e-actionbegin="contact.actionBegin" e-allowpaging="contact.allowpaging"
e-pagesettings="contact.pagesettings" e-editsettings="contact.editsettings" e-allowreordering="contact.allowReordering" e-allowresizing="contact.allowResizing">
</div>
</div>
Here is Controller method::
function ContactsController(CommonService) {
this.Cdata = [];
var d = CommonService.getCantactList();
d.then(function (response) {
ContactsController.prototype.Cdata = response.data.Items;;
console.log("success");
}, function (error) {
console.log("error");
});
}
and the commonService is
this.getCantactList = function () {
return $http.get("http://localhost:63138/api/Contact/GetContactsbyClientId?clientId=1", { cache: true });
}
And the API method is::
public object GetContactsbyClientId(int clientId)
{
try
{
//return (ContactService.GetListByClientId(clientId));
return new { Items = ContactService.GetListByClientId(clientId) };
}
catch (Exception)
{
throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.InternalServerError)
{
Content = new StringContent("An error occurred, please try again or contact the administrator."),
ReasonPhrase = "Critical Exception"
});
}
}
The problem might be due to the below line.
ContactsController.prototype.Cdata = response.data.Items;;
It should be as follows.
function ContactsController(CommonService) {
this.Cdata = [];
proxy = this;
var d = CommonService.getCantactList();
d.then(function (response) {
proxy.Cdata = response.data.Items;
console.log("success");
}, function (error) {
console.log("error");
});
Now it will work as expected.
I am fairly new to AngularJS, and really struggling to re-bind a Wijmo tree (or even a tree implemented using UL and LI elements wth ng-repeat) with new data on changing of value of a Wijmo combobox (or, even a regular dropdown of HTML select elem).
Below is the code I have written, which is working fine in initial page load. But on changing the dropwdown, the tree is not being reloaded with new data fetched by loadDomainTree method; it is still showing old data. Can somebody help me figure out what's wrong with this code?
HTML:
<div ng-controller="DomainCtrl">
<select id="domain" ng-model="currentDomain" ng-options="item.Name for item in domainList"></select>
<div>
<ul id="wijtree">
<li ng-repeat="item in domainEntityList" id={{item.Id}}>
<a>{{item.Name}}</a>
</li>
</ul>
</div>
</div>
JS:
$(document).ready(function ()
{
$("#domain").wijcombobox({
isEditable: false
});
$("#wijtree").wijtree();
});
function DomainDropdownModel(data) {
this.Id = data.Id.toString();
this.Name = data.Name;
};
function DomainTreeModel(data) {
this.Id = data.Id;
this.Name = data.Name;
};
function DomainCtrl($scope, $locale) {
$scope.domainList = [];
$.ajax({
url: dropDownUrl,
async: false,
success: function (data) {
$(data).each(function (i, val) {
var domain = data[i];
var domainId = domain.Id.toString();
var domainName = domain.Name;
$scope.domainList.push(new DomainDropdownModel({ Id: domainId, Name: domainName }));
});
}
});
$scope.currentDomain = $scope.domainList[0];
$scope.loadDomainTree = function (domainId) {
domainEntitiesUrl = DOMAIN_API_URL + DOMAIN_ID_PARAM + domainId;
//alert(domainEntitiesUrl);
$scope.domainEntityList = [];
$.ajax({
url: domainEntitiesUrl,
async: false,
success: function (data) {
$(data).each(function (i, entity) {
var domainEntity = data[i];
var domainEntityId = domainEntity.Id.toString();
var domainEntityName = domainEntity.Name;
$scope.domainEntityList.push(new DomainTreeModel({ Id: domainEntityId, Name: domainEntityName }));
});
}
});
};
//Will be called on setting combobox dfault selection and on changing the combobox
$scope.$watch('currentDomain', function () {
$scope.loadDomainTree($scope.currentDomain.Id);
});
}
You may $watch for the selectedItem of WijCombobox and then, re-load the wijtree accordingly. Here is the code:
$scope.$watch('selectedItem', function (args) {
if (args === 'Tree 1') {
$("#wijtree").wijtree("option", "nodes", $scope.nodes1);
}
else {
$("#wijtree").wijtree("option", "nodes", $scope.nodes2);
}
});
HTML Code
<wij-combobox data-source="treeList" selected-value="selectedItem">
<data>
<label bind="name"></label>
<value bind="code"></value>
</data>
</wij-combobox>