I have a kendo ui grid. Let's say that the JS variable pointing to the grid is called grid. How can I go to page 3 programmatically? Thanks.
You might to use:
grid.dataSource.query({ page: 3, pageSize: 20 });
Documentation in here.
or:
grid.dataSource.page(3);
Documentation in here
Answer is just set it pate: 1 when datasource created
var dataSource = new kendo.data.DataSource({
data: [
{ name: "Tea", category: "Beverages" },
{ name: "Coffee", category: "Beverages" },
{ name: "Ham", category: "Food" }
],
page: 1,
// a page of data contains two data items
pageSize: 2
});
Related
Is it possible to call an API while typing filters in kendo grid or can we add pagination in filters itself.
We have around 5000000 filters,and we are populating data for only 5 filters,If the user wants any other filter,he can type in kendo text box and then we can make api call and show data for all related filters.
I am trying keydown event,but this will close grid and user need to enter again
Sample :
$('body').on('keydown', '.k-textbox','#grid' ,function (event) {
var grid=$('#grid').data("kendoGrid");
grid.setOptions({
columns: [{
field: "ProductName",
title: "Product Name",
filterable: {
mode: "menu,row",
multi: true, search: true,
dataSource:
[{ "ProductName": "abc" }, { "ProductName": "bh" }, { "ProductName": "li" }]
}}]
});
I have an existing grid creating in Kendo UI for Jquery. I want to put a static drop down/select box in the first field/cell of the grid on each row. When I do it shows up as "undefined".
Most of the examples I see on her and the Telerik site use an editor. In my case the drop down is static. Once they click on an item they will be redirect to another page to do something. At the moment I just want to get the drop down to show up with hard coded options.
jQuery(function($){
"use strict";
var grid = $("#grid").kendoGrid(){
....
columns: [{
field: "my_links",
title: "My Links",
template: "#=getMyLinks(DATA.user_id)#"
},{
....
}_.data("kendoGrid");
function setGridData(){
....
});
grid.setDataSource(dataSource);
}
setGridData();
});
function getMyLinks(user_id){
$('<input id="my_links" name="my_links/>')
.kendoDropDownList{[
dataSource: [
{ id: 1, name: "View" },
{ id: 2, name: "Create },
{ id: 3, name: "Delete"}
],
dataTextField: "name",
dataValueField: "id"
});
}
I would expect a drop down in the
You should provide DOM element for drop down widget in columns.template field and then initialize all widgets in dataBound event.
$("#grid").kendoGrid({
columns: [{
field: "my_links",
title: "My Links",
template: "<input id="my_links" name="my_links/>"
}],
dataBound: function (){
getMyLinks(DATA.user_id);
}
}).data("kendoGrid");
I have a Kendo Grid where the COR ABA No. may or may not be editable, depending on a value in the first column. So, if NOC Code=='C01', then COR ABA No. is editable, otherwise it is not.
I have achieved this by adding the Edit event on the columns and in that edit handler disabling the HTML input Kendo creates, when no editing is allowed. (In the grid definition, I have Editable(true) to start). I want instead to do this by doing the logic check in the DataBound event for the grid. That is, after all data is bound, iterate over the data, determine when the column should NOT be editable, and prevent this somehow. My idea is to simply remove the click handler that I ASSUME Kendo adds for a cell when using Editable(true) as stated above. Is this the way? Or how? Thanks!
I suggest another way, instead call closeCell() on edit event, if you do not want to allow the user to edit the cell. In doing so, the cell will not display an input when the user clicks it to edit it.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
editable: "incell",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew() && e.container.index() == 0) {
var grid = $("#grid").data("kendoGrid");
grid.closeCell();
}
}
});
</script>
I use jquery.dataTables.min.js for Data table..
then i try to use highcharts. but when i put highcharts code in document ready function then dataTable lost his functionality.. such as search box, scroll, design.
$(function() {
/*For Highcharts*/
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'my_chart',
type: 'line'
},
title: {
text: 'Monthly National Trend of SOMA-JECT Administration'
},
xAxis: {
categories: ['January', 'February', 'March']
},
yAxis: {
title: {
text: 'No. of SOMA-JECT Administration'
}
},
series: [{
name: 'Soma-JECT',
data: [1, 0, 4]
}, {
name: 'Sayana PRESS',
data: [5, 7, 3]
}]
});
/*For Data Table*/
$('#example').DataTable({
scrollX: true
});
});
Try to change order of scripts. highcharts scripts move to bottom of dataTable scripts then may be everything is OK.
I'm trying to implement some functionality in "onchange" of text box in telerik kendo grid. But it is not firing in change; instead it's firing on onBlur.
The code is here. demo
To track the changes in the editors inside the column templates you should use different approach. Please check the example below:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: {
data: [ {id: 1, name: "Jane Doe" }, {id: 2, name: "John Doe" } ],
//schema is required for enabling valid CRUD operations
schema: {
model: {
id: "id",
fields: {
id: {type: "number"},
name: {type: "string"}
}
}
}
}
});
var grid = $("#grid").data("kendoGrid");
grid.table.on("change", "input", function(e) {
alert("change");
//optionally update the underlying model:
var editor = $(this);
var dataItem = grid.dataItem(editor.closest("tr"));
dataItem.set("name", editor.val());
});
Another option is to use the MVVM approach shown in the following demo:
http://dojo.telerik.com/Utino
I've used "onkeyup" event. It works :)
You should try "onkeypress" event. It will work as per your requirement.