i have a few items in Kendo Grid Toolbar.
Everything works fine excepts last item called "test".
Click event not firing defined action.
Question is: How to solve that to fire another AngularJS function in the same Controller?
toolbar: [
{ template: kendo.template($("#preparedViewsToolbar").html()) },
{ name: "create" },
{ name: "save" },
{ name: "cancel" },
{
name: "test",
text: "testme",
click: function(e){
console.log("TEST");
}
}
]
Thanks for any help and advice.
This is because Kendo UI does not understand the click property on a toolbar item. It is not supported [reference]. Instead, you should define a template for the toolbar item, and in that template you can bind your click function.
JSBin example
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
console.log("Toolbar command is clicked!");
return false;
}
$("#grid").kendoGrid({
toolbar: [
{ name: 'create' },
{ name: 'save' },
{ name: 'cancel' },
{ template: kendo.template($("#template").html()) }
],
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
var tableDIV = $("<div id='grid'> </div>");
$("body").append(tableDIV);
//set toolbar options and custom events.
var toolBar = [
{
name: "Add",
text: "Add new record",
events:{
click:function(e){
alert($(this).text());
}
}
}
];
//initialize grid with toolbar options.
tableDIV = tableDIV.kendoGrid({
toolbar: toolBar,
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
}).data("kendoGrid");
//now bind events here.
tableDIV.element.find(".k-header.k-grid-toolbar > a").each(function(i){
console.log(i,toolBar);
$(this).bind((toolBar[i].events != undefined ? toolBar[i].events : null));
});
Related
I have a very large treeGrid (~2000 elements in one node). And it seems to be frozen when I click [+] to expand it. I want to change mouse cursor state to 'wait' once clicked, but then to 'default' once expanded. Assume I can put it in onRowClick or onOpen event but what is onComplete event where I can reset the cursor? Also is there a way/property to see if row is expanded or collapsed? I want to change its style then.
var layout = [
{
cells: [
[
{ field: "userid", name: "User Id" },
{
field: "childItems",
children: [
{ field: "unid", name: "unid" },
{ field: "username", name: "User Name" },
{ field: "budget", name: "Budget" }
],
aggregate: "sum"
}
]
]
}
]
var jsonStore = new dojo.data.ItemFileWriteStore({ url: <...............>});
var grid = new dojox.grid.TreeGrid(
{
structure: layout,
store: jsonStore,
query: { type: 'userid' },
queryOptions: { deep: true },
rowSelector: true,
openAtLevels: [false],
autoWidth: true,
autoHeight: true,
onRowClick: function (evt) {
var idx = evt.rowIndex,
item = this.getItem(idx);
// ??????
}
},
dojo.byId("treeGrid")
);
What is the best approach to implement:-
Filter column in kendogrid based on idcolumn(key) in datasource.
The id column is not visible in kendogrid however filter must be applied based on the value
One possible solution is displaying the column but hiding the value. Not sure if this is very user-friendly (how will the user know which values to filter). If this is something doable for you, you can define a template for the id column that is empty.
Example based on your dojo.
var ds = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30, id: 1 },
{ name: "John Doe", age: 33, id: 2 }
],
filter: [
// omit all items, which id is equal to 1"
{ field: "id", operator: "eq", value: 1 }
]
});
$("#grid").kendoGrid({
columns: [
{ field: "name", filterable: { multi: true } },
{ field: "id", template: "" },
{ field: "age", filterable: { multi: true } }
],
dataSource: ds,
filterable: true
});
var ds = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30, id: 1 },
{ name: "John Doe", age: 33, id: 2}
],
filter: [
// omit all items, which id is lesser than 10"
{ field: "id", operator: "eq", value: 1 }
]
});
$("#grid").kendoGrid({
columns: [
{ field: "id", template: "", filterable: { multi: true }, width: 50 },
{ field: "name",filterable:{ multi: true} },
{ field: "age" ,filterable:{ multi: true} }
],
dataSource: ds,
filterable: true
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<div id="grid"></div>
Well considering a grid I create in my application:
{
xtype: 'ordergrid',
itemId: 'ordergrid',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
}
}]
},
With ordergrid being defined with:
extend: 'Ext.grid.Grid',
xtype: 'ordergrid',
I wish to modify the items of the menu dynamically. I've first tried doing this through a store:
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
store: { type: 'status' }
Though this doesn't seem to work. Then I tried accessing this menu through a component query, during the init function of some controller:
Ext.define('BinkPortalFrontend.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
init: function () {
console.log('..... initializing ......');
const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
const menu = menus[0];
menu.setItems([{
text: 'some',
value: 'some'
}, {
text: 'new',
value: 'mew'
}]);
},
};
However this returns an error: "Cannot read property 'setItems' of undefined"
Debugging shows the obvious problem: it doesn't find any menu.
What's more, even a "catch all" query like
Ext.ComponentQuery.query('menu');
or
Ext.ComponentQuery.query('#status_menu');
Shows an empty array: so what's going on? (I most definitely see the menu from its initial load).
There is one reason your menu is not created. Menu will created whenever button will tap or whenever getMenu() method get called.
If you want to get your menu using Ext.ComponentQuery.query(), so for this you need to do use initialize event of button and forcefully create menu using getMenu() method like below :-
{
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function(btn) {
Ext.defer(function() {
// This will print undefined because menu have not created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will print menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}
Another way you can use getMenu() method of button. It will return the menu component.
In this FIDDLE, I have created a demo using grid, button and menu. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Change menu items dynamically',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
itemId: 'statusbtn',
menu: {
itemId: 'status_menu',
defaults: {
// handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function (btn) {
Ext.defer(function () {
// This will undefined because menu has not been created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}, {
xtype: 'button',
align: 'right',
text: 'Change Items',
handler: function (btn) {
var newItems = [];
store.each(rec => {
newItems.push({
text: rec.get('name'),
value: rec.get('name')
})
});
/*
* You can also get menu using button
* btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
*/
Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
Ext.toast('Menu items has been change. Please check', 2000);
}
}]
},
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true
});
}
});
For more details about component you can also see this ComponentManager
I have a Grid and on grid context menu I am calling one function as follows-
On grids context menu I have added the following item
{ text: 'Preview', handler: 'PreviewGrid', scope: cnt, };
In controller-
previewGrid: function (contextMenuItem) {
// Here I am getting the item i.e. contextmenu item.
// But I want here is grid on which there was right click
}
I tried using item.ownerCt.up('grid')
but it is not working.
Any help will be appreciated.
Sample code: https://fiddle.sencha.com/#fiddle/1i9o
Ext.application({
name: 'Fiddle',
launch: function() {
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 500,
title: 'itemcontextmenu',
store: {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": ""
}]
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}]
});
var contextMenu = Ext.create('Ext.menu.Menu', {
width: 200,
items: [{
text: 'Preview',
handler: function() {
var record = grid ? grid.getSelection()[0] : null;
if (!record) {
return;
}
alert(record.get('name'));
}
}]
});
grid.on("itemcontextmenu", function(grid, record, item, index, e) {
e.stopEvent();
contextMenu.showAt(e.getXY());
});
}
});
This works for me.
In grid listeners:
listeners: {
itemcontextmenu: function (grid, record, item, index, e) {
var contextMenu = Ext.create('Ext.menu.Menu', {
height: 200,
width: 250,
items: [{
text:'Preview',
handler: function () {
//code...
}
}]
});
e.stopEvent();
contextMenu.showAt(e.getXY());
}
}
I have simple treeview with hierarchical data in 3 level in deep.
I load all data on load page.
I have simple schema
model: {
hasChildren: function (item) {
return item.items && item.items.length > 0;
},
id: "id",
children: "items"
}
Default filter work only on first level, How can I change this logic?
Not sure what you mean but default filter does not work only on first level. Check the following example where I show anything that starts with "F". You will see that it shows the root and node in the first level. What it does not show are nodes bellow a node that does not meet the condition of starting with "F" but that's what I would have expected.
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{
text: "Full",
items: [
{
text: "Furniture",
items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor",
items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
}
],
filter: { field: "text", operator: "startswith", value: "F" }
});
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="treeview-left"></div>