I am working with KendoUI grid. I want to assign an array as data-source to the grid instead of using array of objects.
dataSource: [
[ "User One", 3 ],
[ "User Two", 3 ]
]
instead of using
dataSource: [
{ name: "User One", age: 3 },
{ name: "User Two", age: 3 }
]
Is this possible?
It is possible, but it's not completely functional. It only works "to some extent" and certain things won't work(I.E. Editing and selection).
In the linked post they also mention that they don't have any plans to implement it, though that was a few years ago.
var source = [
[ "User One", 3 ],
[ "User Two", 33 ]
];
$('#myGrid').kendoGrid({
columns: [
{ field: "[0]", title: "User" },
{ field: "[1]", title: "Number" }
],
dataSource: {
data: source
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="myGrid"></div>
</body>
</html>
Related
I'm currently using the grid from Kendo UI version v2016.2.504 and have incorporated the pager functionality.
When clicking the "last page" button I'm looking to see how I can identify the source or sender is definitely the "last page" button when using change event in kendo's datasource. I don't see any discernible way in the "e" event or sender property. Does anyone know?
kendouipager
var dataSource = new kendo.data.DataSource({
data: $scope.datasource,
pageSize: 15,
change: function (e) {
var sender = e.sender; // help
},
});
You can add an event listener to the button and then either do the what you want to do in the callback or raise a flag and handle it in the page event handler.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var isLast = false;
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 35 },
{ id: 3, name: "John Smith", age: 40 }
],
pageSize: 1,
schema: {
model: { id: "id" }
}
},
pageable: true,
page: function(e) {
console.log("Page change", e.page);
console.log("isLast", isLast);
if (isLast) {
// You can do what you want to do here - option 2
}
isLast = false;
}
});
document.getElementsByClassName("k-pager-last")[0].addEventListener("click", (e) => {
isLast = true;
// You can do what you want to do here - option 1
});
</script>
</body>
</html>
Problem is that when I choose multiple checkbox and filter for something all checkbox selected returns to normal all checkbox's (un-checked)
my question is : Can I do the checked some checkbox's and filter for something without do any changes on my rows checked
please check photos in below :
1 - Checked some rows
2 - filter some rows where contains 'ss'
3 - here my problem, after press ok on filter get rows without
checked
when i'm using kendo ui v.2018 see image
please help me!!
Thanks UW.
Try setting the persistSelection property of your grid to true.
$("#grid").kendoGrid({
columns: [
{ selectable: true, width: "50px" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
{ id: 3, name: "Jim Doe", age: 30 },
{ id: 4, name: "Jack Doe", age: 33}
],
schema: {
model: { id: "id" }
}
},
filterable: true,
pageable: {
pageSize: 2
},
persistSelection: true
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="grid">
Starting with Kendo-UI 2017, I've noticed that the row filter now shows two "x" buttons to clear the filter (one inside the text box and one to the right of the text box). Why are there two rather than only one like in the older versions? More importantly,
is there a setting to remove the clear button from inside the text box without resorting to using CSS?
$("#grid").kendoGrid({
columns: [
{
field: "name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{ field: "age", filterable: false }],
filterable: { mode: "row" },
dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id="grid"></div>
The AutoComplete widget for filtering is to blame. I ended up using CSS anyway to hide it:
.k-clear-value {
display: none !important;
}
But the JavaScript answer was to put the following in the dataBound event:
this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
Here is the updated code:
$("#grid").kendoGrid({
columns: [
{
field: "name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{ field: "age", filterable: false }],
filterable: { mode: "row" },
dataBound: function(e) {
this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
},
dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id="grid"></div>
Source
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>
I have a grid with editable fields. If I add a new record I see the selected entry as [object Object]. But what I want is the "text" of the entry. How to achieve this?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<h3>Kendo UI Grid DropDown-Editor: How to access the selected text/value?</h3>
<div id="grid"></div>
<script>
function nameDropDownEditor(container, options) {
$('<input data-text-field="nameText" data-value-field="nameValue" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: [
{ nameText: "Jane", nameValue: 100 },
{ nameText: "Mike", nameValue: 200 },
{ nameText: "Harry", nameValue: 300 }
],
});
}
$("#grid").kendoGrid({
toolbar: ["create"],
columns: [
{ field: "id" },
{ field: "name", editor: nameDropDownEditor },
{ field: "age" }
],
dataSource: [
{ id: 3030, name: "Jane", age: 30 },
{ id: 5353, name: "Harry", age: 53 }
],
editable: "popup"
});
</script>
</body>
</html>
This screenshot shows the result after a selection:
http://i.imgur.com/PEhRt47.png
Have you tried giving the dropdown an id and binding to the save event:
...grid markup
.Events(events => events.Save("Grid_Save")
and in the save event
function Grid_Save(e) {
var nameValue = $("#dropdownName").data().kendoDropDownList.value();
//do something with the value
}