is it possible to activate virtual scrolling ListView control instead pageing as in the grid? I try this but don't work
var options = {
autoBind : true,
dataSource : kendoDataSource,
selectable: true,
template: function (record) {
var tmpl = kendo.template(m_DataSet.getReadTemplate(record));
return tmpl(record);
},
filterable: {
field : "ID"
},
scrollable: {
virtual: true
},
serverPaging: true,
edit : function (e) {
$(e.item).find("input:eq(0)").focus();
}
};
$(m_ListViewItemTag).kendoListView(options);
The Kendo UI ListView does not support virtual scrolling.
Related
I'm quite new using kendo grids.
So far I've managed to do a few stuff and got a workaround for all my problems.
I have a grid with 2 columns.
One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.
The product quantity is obtained by a service.
So far I have the following code:
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: false,
data: [],
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductCode: { type: "string", validation: { required: true } },
ProductQuantity: { type: "number", validation: { required: false, editable: false } }
}
}
},
edit: function (e) {
if (e.model.isNew() == false) {
$('[name="ProductQuantity"]').attr("readonly", true);
}
},
change: function (e) {
if (e.action == "itemchange") {
debugger;
apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
var data = JSON.parse(data.Response);
})
//how to access next cell???
$("#ap-grid").data("kendoGrid").saveRow();
}
}
});
$("#ap-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductCode", title: "Product Code" },
{ field: "ProductQuantity", title: "Quantity" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
});
I can't find a way how to access the next cell to add the data to it.
Can you give me a hint?
thanks in advance,
André
When you set e.items[0].ProductQuantity in OnChange event handler grid cell should automatically update value if datasource bind correctly.
According to kendo docs:
e.items - The array of data items that were affected (or read).
That means it reference at original row of datasource.
I would like to use the Kendo grid with remote data virtualization. I also need to have a custom method for the transport.read property.
My grid is configured like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
}
},
schema: {
total: function(response) {
return 2000;
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
});
function getTemplateItems() {
var deferred = $q.defer();
smartseoEntityMapping.getEntityInfo({ mappedEntityType: mappedEntityType.Product }).$promise.then(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
The problem is that the read method is only called once when the grid is initialized. It is not called when the scroll reaches the last item in the current visible set.
I suspect that the grid needs the total number of items but I cannot understand how to set the total number of items. Setting a method for the schema.total property does not work because the method is never called.
So I would like to ask you, is this scenario possible at all, to have the virtualization work with a custom transport.read method, which needs to be called every time to get the next page of data?
Why I am using a custom read? Well I cannot just set an url for the transport.read property because my remote call is made via an angularjs resource, involves setting authentication, etc...
schema is a property of a kendo datasource. It looks like you have it outside of the datasource.
Should be:
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
},
schema: {
total: function(response) {
return 2000;
}
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
I am using Kendo Grid and filterable mode row. One of the columns is using a kendoDatePicker.
I filter on server and my problem is, when I pick a value on the datePicker, filtering works fine, but when it shows the data, the value doesn't stay in filter input, it disappears.
I am using to set the DatePicker:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/kukatko/search",
dataType: "json",
cache: false
},
parameterMap: function (data, type) {
if (type == "read") {
var paramMap = kendo.data.transports.odata.parameterMap(data.filter);
return paramMap;
}
}
},
serverFiltering: true,
pageSize: 10
},
filterable: {
mode: "row"
},
sortable: true,
pageable: true,
reorderable: true,
columns: [{...(some other columns)...
}, {
field: "datumZalozenia",
title: "Dátum založenia",
width: "150px",
parseFormats: ["d.M.yyyy"],
format: "d.M.yyyy",
template: "#=kendo.toString(new Date(datumZalozenia), 'd')#",
filterable: {
cell: {
showOperators: false,
operator: "contains",
format: "{0:d.M.yyyy}",
template: function (args) {
args.element.kendoDatePicker({
format: "d.M.yyyy"
});
}
}
}
Here is an image of how it looks (before, select value and after):
I selected 15.7.2015 so filtering on server runs without any problems.
I would like to disable DiscountPercentageMRC/NRC/Usage columns for certain CatalogProductId's. Please find below javascript for the grid. Any help would be greatly appreciated.
<h2>Kendo Grid bound to ASP.NET MVC action methods</h2>
#* The DIV where the Kendo grid will be initialized *#
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "CompanyId"},
{ field: "CompanyName" },
{ field: "DiscountPercentageMRC" },
{ field: "CatalogProductId"},
{ field: "DiscountPercentageMRC" },
{ field: "DiscountPercentageNRC" },
{ field: "DiscountPercentageNRC" },
{ field: "DiscountPercentageUsage"}
],
height: 400,
editable: true, // enable editing
pageable: true,
sortable: true,
filterable: true,
toolbar: ["create", "save", "cancel","edit"], // specify toolbar commands
dataSource: {
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 10,
batch: true,
editable: "inline",
transport: {
read: {
url: "#Url.Action("ResellerDiscountsGet", "AccountDetail", new { BusOrdId = #ViewBag.Message })",
type: "POST",
}
}
},
selectable: true
});
});
</script>
You would use the Edit event to enable/disable cells. I created a working example here: http://jsfiddle.net/Eh8GL/151/
function OnEdit(e) {
// Make sure it's not a new entry
if (!e.model.isNew()) {
var catalogproductid = e.container.find("input[name=CatalogProductId]").data("kendoNumericTextBox").value();
// Disable DiscountPercentageMRC if catalog productid = 100
if (catalogproductid == 100) {
var disableField = e.container.find("input[name=DiscountPercentageMRC]").data("kendoNumericTextBox");
disableField.enable(false);
}
}
}
I am using kendo ui v.2013.1.514, however a really terrible bug was encountered when I was using the grid widget.
As u can see, I set the virtual scroll option to 'true', and have a page size of 25. After I add a new row to the grid using addRow function, the web browser will crash every time scrolling down the grid. That was really bad, cause I need the virtualization and I need to add some new records to the grid, too. I paste some test codes below, hope this could do some help.
BTW, I test on your local demo 'virtualization-local-data.html', all the same. Seems the code just run loops in the 'range' function of DataSource widget.
<script>
$(function() {
var arrayDataSource = [];
for (var i = 0; i < 1000; i++) {
arrayDataSource.push({
check: true,
ip: "10.1.201.3"
});
}
$('#grid').kendoGrid({
height: 600,
dataSource: {
data: arrayDataSource,
schema: {
model: {
fields: {
check: { type: 'boolean' },
ip: { type: 'string' }
}
}
},
pageSize: 25
},
columns: ['check', 'ip'],
editable: false,
scrollable: {
virtual: true
}
});
$('#add').click(function() {
$('#grid').data('kendoGrid').addRow();
});
});
</script>
</head>
<body>
<div id="grid"></div>
<button id="add">add</button>
</body>
</html>
running the same problem, didn't find any workaround in internet, so after digging in kendo sources found workaround that seems to be working, but only with full datasource refresh
so, scenario is next:
add item to data array
set grid.dataSource._skip = 0;
refresh dataSource like grid.dataSource.data(data);
refresh scroll like $("#grid .k-scrollbar-vertical").scrollTop(0);
I've updated fiddle: http://jsfiddle.net/rDPBu/7/
<button id="add">addRow - not working</button>
<button id="add-top">add top</button>
<button id="add-bottom">add bottom</button>
<div id="grid"></div>
var data = [];
for(var i = 0; i < 100; i++) {
data.push({
check: i + 1,
ip: '10.1.201.3'
});
}
var grid = $('#grid').kendoGrid({
height: 300,
dataSource: {
data: data,
pageSize: 10,
schema: {
model: {
id: "check",
ip: "ip"
}
}
},
columns: [
{ field: "check" },
{ field: "ip" }
],
editable: true,
scrollable: {
virtual: true
}
}).data('kendoGrid');
var scroller = $("#grid .k-scrollbar-vertical");
$('#add').click(function () {
grid.addRow();
});
$('#add-top').click(function () {
data.splice(0,0,{check: 0, ip: '1.1.1.1'});
grid.dataSource._skip = 0; // fix databind
grid.dataSource.data(data);
scroller.scrollTop(0); // should refresh scroll
});
$('#add-bottom').click(function () {
data.push({check: 999, ip: '9.9.9.9'});
grid.dataSource._skip = 0; // fix databind
grid.dataSource.data(data);
scroller.scrollTop(scroller.prop("scrollHeight")); // should refresh scroll
});
Try to build up at this fiddle: http://jsfiddle.net/vojtiik/rDPBu/3/
var grid = $('#grid').kendoGrid({
height: 300,
dataSource: {
data: [
{check: 1,ip: "10.1.201.3"},
{check: 2,ip: "10.1.201.3"},
{check: 3,ip: "10.1.201.3"},
{check: 4,ip: "10.1.201.3"},
{check: 5,ip: "10.1.201.3"},
{check: 6,ip: "10.1.201.3"},
{check: 7,ip: "10.1.201.3"},
{check: 8,ip: "10.1.201.3"}
],
schema: {
model: {
id: "check",
ip: "ip"
}
}
},
columns: [
{ field: "check" },
{ field: "ip" }
],
editable: true,
scrollable: {
virtual: true
}
}).data('kendoGrid');
$('#add').click(function () {
grid.addRow();
});
EDIT :
Answer from Kendo support :
Adding new elements to a grid with virtual scrolling enabled is not a supported setup. Please keep in mind that you can always submit it in our feedback forum, so it can be taken into consideration for our future releases.