When using virtual scrolling kendo-ui grid there is no visible scroll.
I'm using virtual scrolling in manner to show some records from DataBase but I don't see any scroll in my grid and it displays just six first rows.
I can't understand where is my problem.
This is my code:
$("#cargoGrid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 20,
transport: {
read: {
url: "/frmPermission/api/readAllCargo",
type: "POST",
contentType: "application/json",
dataType: "json",
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
data: "data",
total: "total",
model: {
fields: {
cargoId: {
type: "number"
},
title: {
type: "string"
},
}
}
},
},
scrollable: {
virtual: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "تعداد {2} رکورد نمایش داده شده است",
empty: "اطلاعاتی برای نمایش وجود ندارد"
}
},
columns: [
{field: "cargoId", title: "Id", hidden: true},
{field: "title", title: "نوع بار"},
{
filed: "",
title: "انتخاب",
template: "<button class='select k-button' onclick=\"clickSelectCargo( #=cargoId# , '#=title#' )\">انتخاب</button>",
width: "200px"
}
],
selectable: "single",
// sortable: true
});
I found when I use "sortable: true," and I clicked on header column it worked but before click dosen't display Virtual scrolling
scrollable: {
endless: true
},
Related
Im relatively new to javascript/jquery so forgive me if this sounds like a silly question.
I have a Kendo UI grid which is bound to a url from a controller method. This all works fine, but I want the user to be able to change the value on some of the fields. I have enabled the 'editable' flag on the table itself to allow these values to be changed, but when the button is clicked, it passes over the original value instead of the updated ones. Am i missing something simple?
<div id="productlist-grid"></div>
<script>
$(function() {
$("#productlist-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "#Html.Raw(dataUrl)", type: "POST", dataType: "json", data: additionalData }
},
schema: { data: "Data", total: "Total", errors: "Errors" },
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(gridPageSizes)]
},
editable: true,
scrollable: false,
columns:
[
{ field: "ProductPictureUrl", title: "Picture", template: '<img src="#=ProductPictureUrl#" />', width: 100, editable: false },
{ field: "ProductName", title: "Product Name", editable: false },
{ field: "ProductSku", title: "Sku", editable: false},
{ field: "Quantity", title: "Quantity", type: "number"},
{ field: 'SplitPack', title: 'Split Pack', template: kendo.template($("#template").html())},
{ field: "AddToCart", title: "", template: 'Add To Cart', editable: false}
]
});
});
</script>
Many Thanks in advance!!
I'm using a kendo grid on a edit modal. When the modal pops up i need to check the specific rows. this my kendo grid.
function LoadControllerGrid(list) {
var ListofrowIds = list
$("#controllerGrid1").kendoGrid({
dataSource: {
type: "json",
// contentType: "application/json; charset=utf-8",
transport: {
read: {
url: "#Html.Raw(Url.Action("GetControllerList", "Account"))",
type: "POST",
dataType: "json"
},
},
schema: {
model: {
id: "UserId",
fields: {
'Id': { type: "string" },
'Name': { type: "string" },
'Description': { type: "string" },
'URL': { type: "string" },
},
},
data: 'data',
total: 'TotalCount'
},
complete: function (jqXHR, textStatus) {
// HidePageLoader();
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
columnMenu: true
},
height: 300,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: 5000
},
columns: [{ template: '<input type="checkbox" class="checkbox" />', width: "35px" },
{ field: "Description", title: "Actions" }, ]
});
}
I pass the ids of specific rows that need to be checked to the function. kendo grid above display the all the rows.how can i check the check boxes of those particular rows.
I'm trying to find a solution to count invalid rows in Kendo Grid and show it footer. I tried with adding a display property in Messages but it's basically modifying right side footer message such as "1 - 6 of 6 items" Enclosed screen shot. I'm a quite a new in Kendo. Can anyone suggest me how I achieve that goal ? Here is how grid is initialized in DataTable.cshtml
function initializeDetails(e) {
var detailRow = e.detailRow;
var datatableDetailsDataSource = new kendo.data.DataSource({
autoSync: true,
batch: false,
error: datatableDeletedErrorHandler,
pageSize: 5,
schema: {
data: "Data",
errors: "Error",
model: {
"Id": "ID",
"RevisionDate": { "type": "date" },
"UserName": { "type": "string" },
"NewData": { "type": "string" }
},
total: "Total"
},
serverFiltering: true,
serverPaging: true,
serverSorting: true,
sort: { field: "Audit_Date", dir: "desc" },
transport: {
parameterMap: function(options) {
options = refactorKendoDataSourceOptions(options);
return $.extend({}, options, {
ReportId: $("#reports").val(),
AdviserId: $("#advisers").val(),
FundId: $("#funds").val(),
RecordId: e.data.ID,
TableName: conceptSettings.tablename,
TimeZoneOffset: getTimeZoneOffset()
});
},
read: {
cache: false,
dataType: "json",
type: "GET",
url: "/RequestAction/ReadDetails"
}
},
type: "json"
});
detailRow.find(".datatable_details").kendoGrid({
altRowTemplate: kendo.template($("#datatableDetailsRowTemplateAlt").html()),
autoBind: true,
columns: #{ ViewContext.Writer.Write(JsonConvert.SerializeObject(datatableDetailsColumns)); },
dataSource: datatableDetailsDataSource,
pageable: {
input: true,
messages: {
itemsPerPage: " items per page",
},
pageSizes: [5, 10],
refresh: true
},
resizable: true,
rowTemplate: kendo.template($("#datatableDetailsRowTemplate").html()),
scrollable: true,
sortable: true
});
}
</script>
I have a small grid that only has vertical space to display 10 records. A vertical scroll bar should be able to be used to navigate beyond the first 10 records. I do not want a pager in the grid.
I am having trouble getting it to work (the grid is not scrollable):
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
},
pageable: false,
scrollable: true,
columns: [{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
As you can see, I am setting pageable to false and scrollable to true, but again, there is no way to scroll the grid.
Here is a plunker: http://plnkr.co/edit/JlMsPa4tey4NBsQbsNp5?p=preview
I got this working. I had to set the height as well:
pageable: false,
scrollable: true,
height: 300,
http://plnkr.co/edit/JlMsPa4tey4NBsQbsNp5?p=preview
I'm using a KendoGrid and doing a inline batch edit. Only a select few columns are editable. When hit tab the next column selected but it is not the next editable column. Is there a way to control the tab order in a KendoGrid? How would I make the tabs skip columns that are not editable?
My Mark-UP:
<div id="employeeGoalsGrid"></div>
My Javascript:
var goalsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/MVC/ResearcherPoints/GetEmployeeResearchers',
type: 'POST',
contentType: 'application/json'
},
update: {
url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
type: 'POST',
contentType: 'application/json'
//dataType: "jsonp"
},
parameterMap: function (options, type) {
debugger;
$.extend(options, { ID: options.id });
return JSON.stringify(options);
}
},
batch: false,
schema: {
model: {
id: 'ID',
fields: {
id: { editable: false, nullable: false },
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false, nullable: true },
TeamName: { editable: false, nullable: true },
PointsGoal: { type: "number", nullable: true, validation: { required: false, min: 1 } }
}
}
},
sortable: true,
filterable: true,
columnMenu: true
});
$('#employeeGoalsGrid').kendoGrid({
dataSource: goalsDataSource,
navigatable: true,
sortable: true,
resizable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "FirstName", title: "First Name", width: 200},
{ field: "LastName", title: "Last Name", width: 200 },
{ field: "Title", title: "Title", width: 200 },
{ field: "TeamName", title: "Team", width: 200 },
{ field: "PointsGoal", title: "Goal", width: 200 }],
editable: true,
filterable: true,
});
Any suggestions would be greatly appreciated.
To skip cell you need to use tabindex="99999"
I created a jsfiddle for testing purposes: http://jsfiddle.net/danieltulp/kfG7y/
I think you need to look at using attributes: { tabindex: "999999" } in
{ field: "UnitsInStock", title: "Units In Stock", width: 110, attributes: { tabindex: "999999" } }
but this doesn't seem to work. Anyone a better idea?
Perhaps this just isn't possible?
Can you try changing the editable property on the grid options from true to "inline" and let me know if that fixes the issue? I've created a similar scenario in this JSBin and the tab order works fine (Chrome on OSX) when I edit a row.