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.
Related
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
},
today i'm trying to implement a kendo gridview to my website, actually i'm using a webservice that give me a JSON Result.
This is the result:
[{"IdComponente":"8","NoParte":"12","Descripcion":"Componente A","CostoUnitario":"0.12"},{"IdComponente":"9","NoParte":"123","Descripcion":"Componente B","CostoUnitario":"0.23"},{"IdComponente":"10","NoParte":"1234","Descripcion":"Componente C","CostoUnitario":"0.54"},{"IdComponente":"11","NoParte":"12345","Descripcion":"Componente D","CostoUnitario":"0.90"},{"IdComponente":"12","NoParte":"123456","Descripcion":"Componente E","CostoUnitario":"1.25"},{"IdComponente":"13","NoParte":"1234567","Descripcion":"Componente F","CostoUnitario":"0.12"},{"IdComponente":"14","NoParte":"12345678","Descripcion":"Componente G","CostoUnitario":"0.12"},{"IdComponente":"16","NoParte":"123456789","Descripcion":"Componente H","CostoUnitario":"0.98"}]
And i'm using this script, the problem is that i don't get any error in the console, but it doesn't show me the information in the grid.
So, i don't know why, because the json result its okay..
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "WSComponentes.asmx/obtenerComponentes",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json", // dataType is json format
success: function OnSuccess(response) {
cargarGrid(response);
},
error: function onError(error) {
console.log(error.d);
},
});
});
function cargarGrid(datos) {
console.log(datos);
$("#grid").kendoGrid({
dataSource: {
dataType: 'json',
data: datos,
schema: {
data: "d",
type: "json",
model: {
fields: {
IdComponente: { editable: false, type: "string" },
NoParte: { editable: false, type: "string" },
Descripcion: { editable: false, type: "string" },
CostoUnitario: { editable: false, type: "string" }
}
}
},
pageSize: 10
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "IdComponente",
title: "IdComponente",
}, {
field: "NoParte",
title: "NoParte"
}, {
field: "Descripcion",
title: "Descripcion"
}, {
field: "CostoUnitario",
title: "CostoUnitario",
}
]
});
}
</script>
You're not far away with what you have.. You need to declare a kendo.data.DataSource:
var dataSource = new kendo.data.DataSource({
dataType: 'json',
data: datos,
schema: {
model: {
fields: {
IdComponente: { editable: false, type: "string" },
NoParte: { editable: false, type: "string" },
Descripcion: { editable: false, type: "string" },
CostoUnitario: { editable: false, type: "string" }
}
}
},
pageSize: 10
});
Which is then used in your grid declaration like so:
$("#grid").kendoGrid({
dataSource: dataSource, ....
Here is a Dojo example to demonstrate implementation changes required.
I am very new to Kendo and am having some difficulties.
I am having trouble creating a kendo grid where I can use the grid selection feature (http://demos.telerik.com/kendo-ui/grid/selection 2nd example) to do batch inline editing (http://demos.telerik.com/kendo-ui/grid/editing).
Essentially, I want to be able to select multiple CELLS (not rows - so the second example in the link above), and start typing to edit all of the selected cells.
The closest I've gotten so far is creating something where I can select multiple cells and press a button to generate a predetermined value, but this is not what I want.
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#cellSelection").kendoGrid({
dataSource: dataSource,
selectable: "multiple cell",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
Thanks for any help
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 need to pass an additional parameter along with my grids datasources create routine but I am having trouble getting it to work.
I have tried:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem.set('phoneId', phoneId)
but this gives me the error Cannot read property 'set' of undefined.
Code for my grid:
function contactPhoneGrid() {
var contactPhoneGrid = $('#contactPhonesGrid').kendoGrid({
dataSource: {
pageSize: 25,
serverSorting: false,
serverFiltering: true,
sort: {
field: "ref",
dir: "asc"
},
transport: {
read: {
url: ROOT + 'Contact/contactPhoneGrid',
dataType: 'json',
type: 'POST'
},
create: {
url: ROOT + 'Contact/createContactPhone',
type: 'POST'
},
update: {
url: ROOT+'Contact/updateContactPhone',
dataType: 'json',
type: 'POST'
},
destroy: {
url: ROOT+'Contact/deleteContactPhone',
dataType: 'json',
type: 'POST'
}
},
error: function(e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
type: {
type: 'string',
editable: true
},
tel: {
type: 'string',
editable: true
},
typeId: {
type: 'number',
editable: true
}
}
}
}
},
autoBind: false,
columns: [
{
field: 'phoneId',
headerTemplate: '<b>Phone Id</b>',
filterable: false,
width: '50px',
hidden: true
},
{
field: 'type',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
// template: '#=type#'
},
{
field: 'tel',
headerTemplate: '<b>Number</b>',
filterable: false,
}
],
edit: function(e) {
var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
if (ddl) {
ddl.open();
}
},
height: '75',
filterable: true,
editable: true,
sortable: true,
scrollable: true
}).data("kendoGrid");
}
dataItem is a method so you should not use it as:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem
but as:
$('#contactPhonesGrid').data("kendoGrid").dataSource.dataItem(something here)
See documentation here : http://docs.telerik.com/kendo-ui/api/web/grid#methods-dataItem