I have a tree view, with dragAndDrop set to true. When a leaf node of the tree is converted into an internal node, by dropping some child in it, it starts to behave strangely. If I collapse this node, it won't expand again. It gets even weirder if I drop another child to it. Here is the code I used:
var inline = new kendo.data.HierarchicalDataSource({
data: [
{ categoryName: "Storage", subCategories: [
{ subCategoryName: "Wall Shelving" },
{ subCategoryName: "Floor Shelving" },
{ subCategoryName: "Kids Storage" }
] },
{ categoryName: "Lights", subCategories: [
{ subCategoryName: "Ceiling" },
{ subCategoryName: "Table" },
{ subCategoryName: "Floor" }
] }
],
schema: {
model: {
children: "subCategories"
}
}
});
$("#label-tree").kendoTreeView({
dragAndDrop: true,
loadOnDemand: false,
dataSource: inline,
dataTextField: [ "categoryName", "subCategoryName" ]
});
I tried other ways of defining the datasource, but they end up the same. Am I doing it wrong?
This was a bug in Kendo UI but was solved in version 2013.1.514. Trying using:
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet">
<script src="http://cdn.kendostatic.com/2013.1.514/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
Related
Tried this How to customize edit event in JsGrid as below. But doesnt seem to work
$("#jsgrd").jsGrid({
data: ds,
fields: [{
type: "control",
editItem: editrow(item)
}, ]
});
function editrow(item) {
var $row = this.rowByItem(item);
if ($row.length) {
console.log('$row: ' + JSON.stringify($row)); // I modify this
this._editRow($row);
}
}
The error I get now is "item" not defined.
What I m looking for is, when user clicks edit, I want to get the rowid stored in a hidden col and use it to fetch more data from server and populate outside jsgrid. And avoid changing the row to edit mode
You are not using the documented way. You should use editTemplate.
A simple working example is:
$(document).ready(function() {
$("#grid").jsGrid({
width: "100%",
editing: true,
autoload: true,
data: [ { id:1, name:"Tom"}, {id:2, name:"Dick"}],
fields: [
{ name: "id", type: "text", title: "Id"},
{ name: "name", type: "text", title: "Name",
editTemplate: function(item) {
return "<input type='checkbox'>" + item;
}},
{ type: "control"}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid">
Test
</div>
For the purpose of illustration, I turn the edit of the name field from the standard text box into a check box.
You could use itemTemplate to get the required result.
itemTemplate is a function to create cell content. It should return markup as string, DomNode or jQueryElement. The function signature is function(value, item), where value is a value of column property of data item, and item is a row data item.
Inside of itemTemplate you can customise your dom element based on your requirement.
Run Demo
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
paging: false,
//for loadData method Need to set auto load true
autoload: true,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
var data = [{
id: 1,
nickname: "Test",
email: "t#gmail.com"
}, {
id: 2,
nickname: "Test 1",
email: "t1#gmail.com"
}, {
id: 3,
nickname: "Test 2",
email: "t2#gmail.com"
}, {
id: 4,
nickname: "Test 3",
email: "t3#gmail.com"
}];
return data;
}
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}, {
type: "control",
itemTemplate: function(value, item) {
var editDeleteBtn = $('<input class="jsgrid-button jsgrid-edit-button" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button" type="button" title="Delete">')
.on('click', function (e) {
console.clear();
if (e.target.title == 'Edit') {
//Based on button click you can make your customization
console.log(item); //You can access all data based on item clicked
e.stopPropagation();
} else {
//Based on button click you can make your customization
console.log('Delete')
}
});
return editDeleteBtn; //
},
}]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
I have been trying to add plotBands by date on a kendo chart as in the snippet. plotBands doesn't seems to be at the correct position.
Note the TimeWindows object at the snippet. It should start after the first point.
tideSet is the object with Tides and TideWindows collections
How can I configure plotBands in the correct positions?
var tideSet={
"Tides":[
{
"timeStamp":"2018-07-24T00:33:00",
"pred":0.660
},
{
"timeStamp":"2018-07-24T06:09:00",
"pred":6.350
},
{
"timeStamp":"2018-07-24T12:32:00",
"pred":0.400
},
{
"timeStamp":"2018-07-24T18:51:00",
"pred":7.410
},
{
"timeStamp":"2018-07-25T01:19:00",
"pred":0.570
},
{
"timeStamp":"2018-07-25T06:58:00",
"pred":6.380
}
],
"TideWindows":[
{
"WindowsStart":"2018-07-24T02:03:00",
"WindowEnd":"2018-07-24T08:39:00"
}
]
};
var plots = new Array();
for (var i = 0; i < tideSet.TideWindows.length; i++) {
plots.push(
{
from: new Date(tideSet.TideWindows[i].WindowsStart),
to: new Date(tideSet.TideWindows[i].WindowEnd),
color: "#007eff"
});
}
$("#kendoChartTides").kendoChart({
dataSource: {
data: tideSet.Tides,
schema: {
model: {
fields: {
pred: { type: "string" },
timeStamp: { type: "date" }
}
}
}
},
series: [{
type: "line",
style: "smooth",
field: "pred",
categoryField: "timeStamp"
}],
title: {
text: "Tides"
},
valueAxis: {
title: {
text: "Predictions"
}
},
categoryAxis: {
field: "timeStamp",
type: "date",
labels: {
rotation: 40,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #"
},
baseUnit:"minutes",
baseUnitStep: "auto",
plotBands: plots
},
tooltip:
{
visible: true,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(category)) # <br /> Value: #= value # "
}
});
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head>
<div id="kendoChartTides"> </div>
This happens because the plot bands are aligned to the category axis' steps. You currently have your chart's baseUnitStep to "auto". This causes the steps to be too far apart and your plot bands get "rounded" to the nearest steps, so to speak. Here's what you can do to work around this problem:
Change the baseUnitStep to 1. This will give you a precision of 1
minute for your plot bands. However this will also result in grid
lines and axis labels at an interval of 1 minute, which will be slow
and look horrible. We'll fix that in the following steps.
Add a step value of 180 (or similar) to your labels' config. This will make the
category labels appear every 3 hours.
Add a majorGridLines configuration section and set the step of the grid lines to 180, so that they appear as frequently as the labels.
Add a majorTicks config section and set the step interval to 60 or something.
Your categoryAxis config section should look similar to this:
categoryAxis: {
field: "timeStamp",
type: "date",
labels: {
rotation: 40,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #",
step: 180
},
baseUnit:"minutes",
baseUnitStep: 1,
plotBands: plots,
majorTicks: {
step: 60
},
majorGridLines: {
visible: true,
step: 180
}
}
You can see your code snippet with these changes on this dojo: https://dojo.telerik.com/EFEjezoR
I'm trying to set filter column to be multi and search operator to be contains. Unfortunately, the filter makes a request with the equals operator instead. My Kendo version is 2015.3.930. My column configuration object looks like this:
filterable: {
operator: "contains",
multi: true,
dataSource: {
transport: {
read: filterReadMethod
}
}
}
What I want is a column filter (in grid) that contains chechboxes and filter by contains. Any suggestions?
What I've already tried:
cell: {
showOperators: false,
operator: "contains"
},
And
operators: {
string: {
contains: "Contains"
}
}
Check out this example on the Kendo API reference. I think your code needs to be like:
filterable: {
multi: true,
operators: {
string: {
contains: "Contains"
}
}
},
UPDATE
After a bit of testing, I am going to say that no. No you cannot use both multi and contains. It appears that by setting multi: true, under-the-hood Kendo creates filter with the operator set to eq. The change event of the datasource actually let's you peek under the hood, but even manually setting the value does not work.
I tested in the Kendo Dojo. The code I ended up with is below. By looking at the Kendo datasource reference, you can see that there are some ways to get to the filters that are being used.
So let me qualify my definitive "no" by saying that it is JavaScript and there is certainly a "hacky" way to get around this.
However, if this is really a feature that you need, then I would recommend hitting up the support forums on Telerik's site. Even if you no longer have a valid contract, they are pretty cool about answering simple questions, albeit it will be a few days before they get to it.
Wish I had a better answer for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
search: true,
dataSource: [
{ country: "BG" },
{ country: "USA" }
]
},
} ],
filterable: true,
dataSource: {
data: [
{ country: "BG" },
{ country: "USA" },
{ country: "1BG3" },
{ country: "1USA4" }
],
/*filter: {
logic: "or",
filters: [
{ field: "country", operator: "contains", value: "BG" }
]
},*/
change: function(e) {
try{
//e.sender._filter.filters[0].operator = "contains";
this.filter().filters[0].operator = "contains";
var f = this.filter().filters[0].value;
console.log(f);
}catch(e1) {
console.log(e1);
}
}
}
});
</script>
</body>
</html>
enter image description hereI´m trying to use a treeview with checkboxes for definition User Rights. (2 actions - enabled/disabled right)
How can I to get value (id) from parent node ?
Kendo tree view
This example will return the parent id for the selected node.
treeView.select().parentNode().id;
If you need to find the parent for a specific node, you must specify a selector in the select() function: treeView.select($("search criteria"))
If you want to loop in the parent, you can do this
var parentNode = treeView.select().parentNode();
while (parentNode) {
//Add your parent logic here
//...
parentNode = parent.parentNode();
}
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<p id="result">No nodes checked.</p>
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "1", expanded: true, items: [
{
id: 2, text: "2", expanded: true, items: [
{ id: 3, text: "3" },
{ id: 4, text: "4" },
{ id: 5, text: "5" }
]
},
{
id: 6, text: "6", expanded: true, items: [
{ id: 7, text: "7" },
{ id: 8, text: "8" },
]
},
{
id: 9, text: "9", expanded: true, items: [
{ id: 10, text: "10" },
{ id: 11, text: "11" },
{ id: 12, text: "12", expanded: true, items: [{ id: 13, text: "13", expanded: true, items: [{ id: 14, text: "14" }, { id: 15, text: "15" }] }] }
]
}
]
}]
});
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
getParentIds(nodes[i], checkedNodes);
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
function getParentIds(node, checkedNodes) {
if (node.parent() && node.parent().parent() && checkedNodes.indexOf(node.parent().parent().id) == -1) {
getParentIds(node.parent().parent(), checkedNodes);
checkedNodes.push(node.parent().parent().id);
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
</script>
</body>
</html>
Let me know if any concern.
i want to add a background to a list that is in a tab panel. but as soon as i make the layout fit, the background disappears...if i remove layout, the list disappears..
the list only seems to appear when the layout is fit...
can any one help out?
plz thanks...
**************************** Bollist.js **********************
Ext.define('tabla.view.Bollist',
{
extend:'Ext.Panel',
xtype:'Bollist',
config:{
title:'Bols',
iconCls:'music2',
layout:'fit',
items:[
{
xtype:'list',
store:'BolStore',
itemTpl:'{name}'
}
]
}
});
*************** Main.js **************
Ext.define("tabla.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.dataview.List'
],
config: {
tabBarPosition: 'bottom',
items: [
{
style:{
backgroundImage:'url(resources/images/bg.png)',
backgroundRepeat:'repeat',
backgroundPosition:'center',
backgroundSize:'cover'
},
xtype:'home'
},
{
style:{
background:'red',
backgroundRepeat:'repeat',
backgroundPosition:'center',
backgroundSize:'cover'
},
xtype:'Bollist'
}
]
}
});
Ext.define('tabla.store.BolStore',{
extend:'Ext.data.Store',
config:
{
model:'tabla.model.Bol',
data:[
{ name: 'Na/Ta' },
{ name: 'Ti' },
{ name: 'Tin' },
{ name: 'Ri'},
{ name: 'Ge' },
{ name: 'Ka/Kat'},
{ name: 'Dha'},
{ name: 'Dhi'},
{ name: 'Dhin'},
{ name: 'Toon'}
]
}
});
Try this approach this is working for me.
Remove style from your list :
style:{
background:'red',
backgroundRepeat:'repeat',
backgroundPosition:'center',
backgroundSize:'cover'
}
Add CSS file in your index.html like this :
<link href="app.css" rel="stylesheet" type="text/css" />
In your app.css add the following code :
.x-list
{
background:'red';
}
Hope this helps.