I am having great difficulty trying to render a treeview with angular and kendo. Here is the code I have so far:
Website1.controller("FieldsController1", function ($scope) {
$scope.things = {
data: [
{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
};
Above is the controller. And here is the markup.
<ul kendo-tree-view k-hierarchical-data-source="things">
</ul>
Also, is there any documentation on how to do this?
I got it working via k-options.
http://jsfiddle.net/M84qj/1/
The only documentation I could find was this page, which, judging from your use of "things", you found as well :p
http://kendo-labs.github.io/angular-kendo/#/
Good luck with Kendo + Angular :)
While this post is a bit old it's one of the first ones that come up on a Google search. When creating a treeview make sure you create a HierarchicalDataSource. This allows you to define child nodes and other properties such as whether or not the item should have child nodes. This helps a ton when using a remote data source.
Related
I use ExtJs 6.6.0 Classic. The grid component supports multi-column sorting (I use remoteSort: true, remoteFilter: true). Whenever the user clicks on a column header, that column becomes the first column in the order by list. But I cannot find how an end user is supposed to clear the sorting for a column. The context menu available through the column header doesn't have a "Clear Sort" option.
See also this kitchensink example.
I feel like I am missing something. There is a sortClearText config for the column inherited from the header, but I could not find a place where it's used (I thought that perhaps there is some config I can use to add the Clear Sort menu item to the column context menu).
I could add a button to execute the action of clearing the sorting of the store, as a last resort, but I don't like it.
Is there a simple way to add a Clear Sort option for a grid column through the Extjs components configuration?
Thank you
I also did not find, but you can use the following override:
Ext.define('overrides.grid.header.Container', {
override: 'Ext.grid.header.Container',
getMenuItems: function() {
var me = this,
menuItems = [],
hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null;
if (me.sortable) {
menuItems = [{
itemId: 'ascItem',
text: me.sortAscText,
iconCls: me.menuSortAscCls,
handler: me.onSortAscClick,
scope: me
}, {
itemId: 'descItem',
text: me.sortDescText,
iconCls: me.menuSortDescCls,
handler: me.onSortDescClick,
scope: me
}, {
itemId: 'dropSortItem',
text: me.sortClearText,
//iconCls: me.menuSortDescCls, // Your icon
handler: me.onSortClearClick,
scope: me
}];
}
if (hideableColumns && hideableColumns.length) {
if (me.sortable) {
menuItems.push({
itemId: 'columnItemSeparator',
xtype: 'menuseparator'
});
}
menuItems.push({
itemId: 'columnItem',
text: me.columnsText,
iconCls: me.menuColsIcon,
menu: hideableColumns,
hideOnClick: false
});
}
return menuItems;
},
onSortClearClick: function() {
var menu = this.getMenu(),
activeHeader = menu.activeHeader,
store = this.up('grid').getStore();
store.getSorters().each(function(sorter) {
if(sorter.initialConfig.property == activeHeader.dataIndex) {
store.getSorters().remove(sorter)
}
}, this);
}
});
Using React with TypeScript
Please could somebody provide an example of how I might be able to use a Kendo DataSource to read from a method which internally uses Axios to prod an external API for JSON data..? I must have flown through 20 different versions of this code trying different approaches, nothing seems to fit...
All I'm trying to do currently is supply a Kendo ComboBox with an array of {id: number, name: string}
Very basic stuff at the moment, but I do have to use a similar approach to this later on with a Kendo Grid which handles server side sorting and pagination so I'd like to get this working now then that should be somewhat easier later on...
The reason I want to use Axios is because I've written an api.ts file that appends appropriate headers on the gets and posts etc and also handles the errors nicely (i.e. when the auth is declined etc...)
A basic example of what I'm trying, which isn't working is this: -
public dataSource: any;
constructor(props: {}) {
super(props);
this.dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: function() {
return [{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }];
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
}
<ComboBox
name="test"
dataSource={this.dataSource}
placeholder={this.placeholder}
dataValueField="id"
dataTextField="name"
/>
Anybody got any thoughts on this please? :)
Easy fix in the end...
this.dataSource = new kendo.data.DataSource({
transport: {
read: function(options: any) {
options.success([{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }]);
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
2 things were wrong..
Removed the type: "odata",
and
Added the usage of options in
All working fine now with the async await function also, just passing the data into the options.success in the .then on the promise. Job done :-)
So I'm trying to put items dynamically to the panel that has slidenavigation feature:
// FlyoutNavigation.js
Ext.define("APN.view.FlyoutNavigation", {
id: "flyoutNavigationPanel",
extend: 'Ext.ux.slidenavigation.View',
Here is the initialisation of the view in another view:
// MainViewContainer.js
this.home = "Some var"
this.flyout = Ext.create('APN.view.FlyoutNavigation', {
id: 'flyoutNavigationPanel',
home: this.home
});
Than I'm trying to use this variable in the this.config.items section, however that doesn't work, it seems that Sencha compiles everything first and than initialiases the components, I might be wrong, I'm really new to Sencha Framework.
So here is the view where the home variable is used:
Ext.define("APN.view.FlyoutNavigation", {
id: "flyoutNavigationPanel",
extend: 'Ext.ux.slidenavigation.View',
xtype: 'flyoutnavigation',
requires: [
... heaps of things omitted ...
],
initialize: function () {
this.callParent();
this.setupDynamicItems();
},
config: {
items: [
{
itemId: 'nav_home',
id: 'homeView',
items: [{
xtype: 'articlelist',
id: 'latestNews',
feedUrlName: this.home, // - that's the place where UNDEFINED occurs
flex: 1
}
],
},
So this.home is undefined...
One possible solution
Comming from this question: How to dynamically create xtype templates in Sencha Touch
I decided to put all the code in this.config.items.add({ ... my items ... }) however Ext.ux.slidenavigation.View looks like gave me the BUG! :( as the initialise method occurs after the binding methods on items of FlyoutNavigation view.
Here is the message from of the bug: Uncaught TypeError: Cannot read property 'raw' of undefined View.js:310 which is basically this line: if (Ext.isFunction(item.raw.handler)) {
So my questions would be
How to get the instance variable in the config.items section? If that's possible, than all is OK
Or do you know the work around of this issue?
Thanks
I don't think you can use this.config when defining the class, instead you can use initialize function as I told you earlier. So you should be able to do this:
initialize : function() {
var me = this;
var home = me.config.home;
me.add({
itemId: 'nav_home',
id: 'homeView',
items: [{
xtype: 'articlelist',
id: 'latestNews',
feedUrlName: home,
flex: 1
}
],
});
}
OR if you have defined homeView in parent class, you can do this:
initialize : function() {
var me = this;
var home = me.config.home;
me.down('#homeView').add({
xtype: 'articlelist',
id: 'latestNews',
feedUrlName: home,
flex: 1
});
}
I've followed the documentation provided by Sencha and made myself a list of items, converted it to a navigationview and a following details page. This is a many-to-1 solution and described with the picture below:
With this solution I can send the title of the item in the list into the detailsview, and type something like this:
[code]`
Ext.define('navigation.view.PresidentDetails', {
extend: 'Ext.Panel',
xtype: 'presidentdetail',
config: {
styleHtmlContent: true,
scrollabe: 'vertical',
title: 'Details',
tpl: 'Hello {firstName}!'
}
});
`[/code]
It seems I cant use statements in this code so I can specify what content I want depending on what item I clicked on. So then my question is - how do I create a more static perspective into this? Can I create a 1-to-1 relationship instead? (See image below)
Anyone knows how to achieve this? I'm currently using MVC and this is the current state of "my" (read: Senchas) controller just to get a hang of it:
Ext.define('navigation.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainpanel'
},
control: {
'presidentlist': {
disclose: 'showDetails'
}
}
},
showDetails: function(list, record) {
this.getMain().push({
xtype: 'presidentdetail',
data: record.data
});
}
});
This problem is now solved, and it was alot easier than I thought it would be. I looked up the itemTap event in the docs and used the index of the item as an ID and wrote this little snippet.
showDetailsonItemTap: function(list, index, target, record) {
var page;
switch(index) {
case 0:
page = 'presidentdetail';
break;
case 1:
page = 'presidentdetail2';
break;
}
this.getMain().push({
xtype: page,
data: record.data
});
console.log(index);
}
After that, its just creating views manually and hit their xtype within the switchstatement.
I have a problem in my ext JS applicatiom. Use MVC architecture:
Ext.define('ME.controller.Stocks', {
extend:'Ext.app.Controller',
models:[
'Logs'
],
stores:[
'Logs'
],
views:[
'portal.portalItems.logGridPanel.LogGridPanel',
'portal.portalItems.logGridPanel.LogGrid',
'portal.PortalPanel',
'portal.PortalDropZone',
'portal.PortalColumn',
'portal.Portlet',
'portal.portalItems.base.Panel',
]
});
Component with name 'LogGrid' adds to viewport dynamically. Its initcomponent function looks like:
initComponent: function()
{
var me=this;
var store= Ext.create('ME.store.Logs', {
storeId:Utils.formUID(LOGS_GRID.LOGS_STORE_ID, me[FIELDS_MAPPER.BASE_PANEL.CLIENTSIDE_GUID]),
sorters:[
{
property:FIELDS_MAPPER.LOGS_GRID.LOG_DATE,
direction:'DESC'
}
]
});
this.store=store;
this.columns=[
{
text:Message.get('console.portal.logGrid.DateHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.LOG_DATE,
renderer:Ext.util.Format.dateRenderer('H:i:s<br>d.m.Y')
},
{
text:Message.get('console.portal.logGrid.DepartmentHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.DEPARTMENT_NAME
},
{
text:Message.get('console.portal.logGrid.ProtectionSystemsHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.PROTECTION_SYSTEM_NAME
},
{
text:Message.get('console.portal.logGrid.PlanHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.PLAN_NAME
},
{
text:Message.get('console.portal.logGrid.SourceHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.SECTION_NAME
},
{
text:Message.get('console.portal.logGrid.MessageTextHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.EVENT_TYPE_NAME,
minWidth:200
},
{
dataIndex:FIELDS_MAPPER.LOGS_MODEL.EVENT_STATE_NAME,
text:Message.get('console.portal.logGrid.StateHeaderText')
// renderer:changeStateColor
}
];
me.callParent(arguments);
}
Logs store is:
Ext.define('ME.store.Logs', {
extend:'Ext.data.Store',
model:'ME.model.Logs',
proxy:{
type:'ajax',
url:URLS.JOURNAL_CONTROLLER,
extraParams:{action:'getEvents'},
actionMethods:{
read:'POST'
},
reader:{
type:'json',
idProperty:FIELDS_MAPPER.LOGS_GRID.LOG_ID
},
autoLoad:false
},
pageSize:LOGS_GRID.ITEMS_PER_PAGE
});
PROBLEM IS:
When I have one instance of grid, everything OK, but when I add new instance of grid, rows (selection model) dissapears from both grids. Such bug appears also when I collapse grids.
If it will be useful, grid component is situated in different panels.
And also I saw such thing:
When I create LogsGrid in one container with grid that uses different store, such bug appears too, but now rows from logGrid moves to another grid.. I don't know what to do.. Second day can't find an answer