I have the following project. There you can click on the individual checkboxes and the ID is written (see Console).
Then I have tested the ServerPaging. This works in another project (there are no checkboxes). If I change the above project to ServerPaging, I can click on the checkbox, but it reloads the DataSource. What can I do here?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Grid with checkboxes</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/console.js"></script>
</head>
<body>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
label {
float: left;
line-height: 1;
}
[role='gridcell'] {
box-shadow: none !important;
}
.checkColumnCenter {
text-align: center;
width: 20px;
}
.fieldlist {
margin: 0 0 -1em;
padding: 0;
}
.fieldlist li {
list-style: none;
padding-bottom: 1em;
}
</style>
<div id="example">
<div id="grid"></div>
</div>
<script>
$(document).ready(function() {
var MainArray = [];
var subArray = [];
var selectedItems = [];
var pageNum;
var initialLength = 0;
var confirmedArray = [];
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
return kendo.data.transports["odata"].parameterMap(options, operation);
}
},
pageSize: 10,
type: "odata",
batch: true,
serverPaging: false,
serverSorting: false,
/*serverPaging: true,
serverFiltering: true,
serverSorting: true,
batch: true,*/
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 } }
}
},
data: function (response) {
return response.d ? response.d.results: response;
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
navigatable: true,
pageable: true,
sortable: true,
persistSelection: true,
filterable: {
extra: false,
mode: 'row',
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Equal",
neq: "Not equal"
}
},
messages: {
isTrue: "checked",
isFalse: "selectable"
}
},
resizable: true,
columns: [{
field: "Discontinued",
width: 150,
template: "<input type='checkbox' onclick='checkOne()' data-bind='checked:Discontinued' />",
headerTemplate: "<input id='checkAll' type='checkbox' onclick='checkAll(this)'/><span id='checkAllPtext'></span>",
attributes: {
"class": "checkColumnCenter",
style: "color:\\#0c0"
}
},
{
field: "ProductName",
title: "Product",
width: 150
},
{
field: "UnitPrice",
title: "Unit",
width: 120
},
{
field: "UnitsInStock",
title: "Costplace",
width: 120
},
],
dataBound: function(e) {
if(this.dataSource.filter()){
$('#checkAll').show();
$('#checkAllPtext').show().html("All");
} else {
$('#checkAll').hide();
$('#checkAllPtext').hide();
}
selectedItems = [];
var selectedItemsPage = [];
e.sender.items().each(function() {
var dataItem = e.sender.dataItem(this);
kendo.bind(this, dataItem);
if (dataItem.Discontinued) {
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(this);
selectedItemsPage.push(dataItem);
$(this).addClass("k-state-selected");
}
});
if (pageNum == e.sender.dataSource._page) {
// kendoConsole.log('initialLength', initialLength)
if (initialLength !== 0) {
// MainArray.splice(-initialLength);
// kendoConsole.log('subArray', MainArray.indexOf(subArray[0]))
subArray.forEach(function(item, i) {
MainArray.splice(MainArray.indexOf(item), 1);
});
}
if (selectedItemsPage.length > 0) {
selectedItems = selectedItemsPage;
}
subArray = selectedItemsPage;
initialLength = selectedItems.length;
} else {
selectedItemsPage.forEach(function(item) {
if (MainArray.indexOf(item) > -1) {
MainArray.splice(MainArray.indexOf(item), 1);
}
});
pageNum = e.sender.dataSource._page;
if (selectedItemsPage.length > 0) {
selectedItems = selectedItemsPage;
}
subArray = selectedItemsPage;
initialLength = selectedItems.length;
}
MainArray = MainArray.concat(selectedItems);
// kendoConsole.log(MainArray);
$("#checkAll")[0].checked = e.sender.items().find(":checked").length == e.sender.dataSource.view().length;
}
});
setTimeout(function() {
getMarked();
}, 500);
getMarked = function() {
dataSource.fetch(function() {
confirmedArray = dataSource._data.filter(function(item) {
return item.Discontinued;
})
var confirmedIDs = confirmedArray.map(function(item) {
return item.ProductID;
});
kendoConsole.log(JSON.stringify("Selected ID's: " + confirmedIDs));
})
}
// setTimeout(function () {
// getMarked();
// }, 200);
});
var getMarked;
function checkOne() {
setTimeout(function() {
getMarked();
}, 100);
}
function checkAll(input) {
var grid = $("#grid").data("kendoGrid");
var items = grid.items();
items.each(function() {
var dataItem = grid.dataItem(this);
if (dataItem.Discontinued != input.checked) {
dataItem.Discontinued = input.checked;
dataItem.dirty = true;
}
})
grid.dataSource.sync();
setTimeout(function() {
getMarked();
}, 100);
}
</script>
<div class="box wide">
<h4>Console log</h4>
<div class="console"></div>
</div>
<style>
.console div {
height: 6em;
}
</style>
</body>
</html>
I helped it with a simple check array.length > 0
getMarked = function() {
if (array.length > 0) {
// foo nothing
}
dataSource.fetch(function() {
confirmedArray = dataSource._data.filter(function(item) {
return item.Discontinued;
})
var confirmedIDs = confirmedArray.map(function(item) {
return item.ProductID;
});
})
}
The problem was that the grid was reloaded every time after an action. Since the changes in the grid have not been saved yet, he has discarded the changes each time. Is a good workaround for me.
Related
I created this Dojo Link that shows me resource by group. problem with this view is it shows long block only if it's a allDay event. for this view how can i apply a template that show a block with time range for each event?
currently it is showing small block and its hard to tell what it is or how long it is booked for.
I want all the event block to take full length despite the duration length.
similar to one highlighted below
Look at the code snippet below. I did a couple of things:
I removed the title data from the template of the event since you said you didn't want to see it.
I placed a space in the template after the <p> element so that the x action of the event will have a place to appear in. There are other ways to do this, I used a simple one.
I've made changes to the styles at the bottom of the code, specifically the following:
.movie-template {
overflow: auto !important;
width: fit-content !important;
}
.k-event {
width: fit-content !important;
}
.space {
width: 20px;
height: 15px;
display: inline-block;
}
.movie-template p {
margin: 5px 0 0;
display: inline-block;
}
EDIT
~~~~
Making the appointments fill the cells they belong to is either impossible or extremely complicated. I'll explain why:
The way the events are programmed, they exist on the same level on the DOM as the table of the scheduler and float above it. The scheduler calculates the position and size of the events based on their start and end times.
In order for you to place them as if they are full-day events you need to do one of two things:
Override the scheduler's automatic placement, with your own code that will calculate the position and size and set them accordingly. Note that this code will need to run every time the window is resized, re-focused, rotated and so on.
Define the events as "whole-day appointments" and store their real start and end times in other fields that you will use in your code. This might break other functionality you might already have in place.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template" style="width:100px">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<span class="space"></span>
</div>
</script>
<script>
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
numberOfDays: 7
},
name: "MyCustomTimelistView",
calculateDateRange: function() {
//create the required number of days
var start = this.options.date,
// start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
idx, length,
dates = [];
for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
},
previousDate: function() {
var date = new Date(this.startDate());
date.setDate(date.getDate() - this.options.numberOfDays);
return date
}
});
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "MyCustomTimelistView", selected: true,
},
"month",
"agenda",
"timeline"
],
timezone: "Etc/UTC",
dataBinding: function(e) {
var view = this.view();
$( ".k-scheduler-times > table > tbody > tr:eq(1)" ).hide();
$( ".k-scheduler-header-wrap > table > tbody > tr:eq(1)" ).hide();
},
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
});
</script>
<style>
.movie-template {
overflow: auto !important;
width: fit-content !important;
}
.k-event {
width: fit-content !important;
}
.space {
width: 20px;
height: 15px;
display: inline-block;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
display: inline-block;
}
.movie-template h3 {
padding: 0 0 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
</style>
</body>
</html>
you can create custom views like this and use it in your code
var CustomMonthView = kendo.ui.TimelineMonthView.extend({
options: {
name: "CustomMonth",
title: "Month"
},
name: "CustomMonth",
_positionEvent: function(eventObject) {
var eventHeight = this.options.eventHeight + 2;
var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
var left = this._adjustLeftPosition(rect.left);
var width = rect.right - rect.left - 2;
if (width < 0) {
width = 0;
}
if (width < this.options.eventMinWidth) {
var slotsCollection = eventObject.slotRange.collection;
var lastSlot = slotsCollection._slots[slotsCollection._slots.length - 1];
var offsetRight = lastSlot.offsetLeft + lastSlot.offsetWidth;
width = this.options.eventMinWidth;
if (offsetRight < left + width) {
width = offsetRight - rect.left - 2;
}
}
eventObject.element.css({
top: eventObject.slotRange.start.offsetTop + eventObject.rowIndex * (eventHeight + 2) + 'px',
left: left,
width: width
});
},
_arrangeRows: function (eventObject, slotRange, eventGroup) {
var startIndex = slotRange.start.index;
var endIndex = slotRange.end.index;
var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
var rectRight = rect.right + this.options.eventMinWidth;
var events = kendo.ui.SchedulerView.collidingEvents(eventObject.slotRange.events(), startIndex, endIndex);
slotRange.addEvent({
slotIndex: startIndex,
start: startIndex,
end: endIndex,
rectLeft: rect.left,
rectRight: rectRight,
element: eventObject.element,
uid: eventObject.uid
});
events.push({
start: startIndex,
end: endIndex,
uid: eventObject.uid
});
var rows = kendo.ui.SchedulerView.createRows(events);
if (eventGroup.maxRowCount < rows.length) {
eventGroup.maxRowCount = rows.length;
}
for (var idx = 0, length = rows.length; idx < length; idx++) {
var rowEvents = rows[idx].events;
for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
eventGroup.events[rowEvents[j].uid].rowIndex = idx;
}
}
}
});
hope this helps
I would like find out, what is the field name in a template function like:
{
field: "country",
template: function(e){
var tmp = "";
var guid = kendo.guid();
$.each( e.country, function( key, value ) {
tmp += '<span class="xyz">' + value.text + '</span>';
});
return tmp;
},
}
Sample: Associative array in grid cell
I don't have the field name "country" in the template: function(e). There are only the field data in the function from template.
Is there a method, like kendo.guid(), that I have the field name "country" for sample in the function.
See if this answers your needs:
{
field: "country",
title: "Country",
template: function(e, field = "country") {
console.log("Field name:", field);
console.log(e[field]);
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
},
}
You can see an example of how this can be used in the snippet.
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.input.val() #' ?
</div>
<br />
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>
<script>
function getTemplate(e, fieldName) {
if (fieldName === "country") {
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
} else {
return e[fieldName];
}
}
$(document).ready(function () {
var data = [
{
'id':'wpErpOs_1',
'name': 'Rolf',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_2',
'name': 'Hans',
'country': [
{ 'text':'Deutschland','id':'2'},
{ 'text':'Schweiz','id':'1'},
{ 'text':'Österreich','id':'3'}
],
'flag':false
}, {
'id':'wpErpOs_3',
'name': 'Esther',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_4',
'name': 'Daniela',
'country': [{ 'text':'Österreich','id':'3'}],
'flag':false
}
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function(e){
e.success(data);
},
update:function(e){
e.success();
},
destroy: function(e){
e.success();
},
create: function(e){
e.success();
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
country: { type: "object" },
flag: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
columns: [
{
field: "name",
title: "Name",
template: function(e) {return getTemplate(e, "name");}
}, {
field: "country",
title: "Country",
template: function(e) {return getTemplate(e, "country");}
}, {
field: "flag",
title: "Flag",
editor: wpErpOs_GridBoolean,
template: function(e) {return getTemplate(e, "flag");}
},
],
editable: "popup",
});
});
function wpErpOs_GridBoolean(container, options){
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
};
</script>
</div>
</body>
</html>
Since column is javascript object, could use a getter to build the template. This allows you to get values of other properties in object (e.g. field). (Self-references in object literals / initializers)
{
field: "country",
title: "Country",
get template() {
var fieldName = this.field;
return function(e) {
var tmp = "";
var guid = kendo.guid();
$.each(e[fieldName], function(key, value) {
tmp += '<span class="k-button" style="line-height:1.25em; cursor:default;">' + value.text + '</span>';
});
return tmp;
}
},
}
Since my formatting needs were simpler I just created a string template.
{
field: "Date",
get template() {
return "# if (" + this.field + ") { # #= kendo.toString(kendo.parseDate(" + this.field + ",'yyyy-MM-dd'), 'MM/dd/yyyy') # # } #"
}
}
Is there any method like that dataSource.getFieldType(field) in datasource:
var dataSource = new kendo.data.DataSource({
// somethings here,
schema : {
model : {
post_id : {type: "number" },
post_title : {type:"string"},
post_date : {type:"date"}
}
}
});
var fieldType = dataSource.getFieldType("post_title"); // it should return string
You should define a getFieldType function as:
function getFieldType(dataSource, field) {
return dataSource.options.schema.model.fields[field].type;
}
and using it would be:
var fieldType = getFieldType(dataSource, "post_title");
Alternatively, you can extend KendoUI DataSource for defining a new method called getFieldType by doing:
kendo.data.DataSource.prototype.getFieldType = function(field) {
return this.options.schema.model.fields[field].type;
}
and using it would be:
var fieldType = dataSource.getFieldType("post_title");
Check here the version using DataSource extension:
$(document).ready(function() {
kendo.data.DataSource.prototype.getFieldType = function(field) {
return this.options.schema.model.fields[field].type;
}
$("#show").on("click", function() {
var ds = $("#grid").data("kendoGrid").dataSource;
alert("Freight: " + ds.getFieldType("Freight"));
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
pageable: true,
columns: [
{
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShipCity",
title: "Ship City"
}
]
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<button id="show" class="k-button">Show Freight type</button>
<div id="grid"></div>
When using a editor grid and my button put a new row at the bottom, validation messages are being hidden by the grid.
I have set up an example here: http://jsfiddle.net/api2304/K54v3/1/
Click on a button Add
Leave the cell Name empty and press tab.
The message will show below the row.
Html:
<div id="grid"></div>
Javascript:
var _dsGrid;
var _grid;
var _this = this;
_this._dsGrid = new kendo.data.DataSource({
autoSync: true,
data: [{ Cod: 0, Name: 'Value0' },
{ Cod: 1, Name: 'Value1' }],
schema: {
model: {
fields: {
Cod: { editable: false },
Name: {
validation: {
required: true,
required: { message: "Custom message" }
}
}
}
}
}
});
_this._grid = $("#grid").kendoGrid({
columns: [
{ field: "Cod" },
{ field: "Name" }
],
selectable: true,
dataSource: _this._dsGrid,
editable: true,
toolbar: [
{ template: kendo.template("<a id='btnAdicionar' class='k-button k-button-icontext'><span class='k-icon k-add'></span>Adicionar</a>") }
],
edit: function(e) {
e.container.find("input[name='Nome']").attr('maxlength', '20');
e.container.find("input").bind("blur", function() {
$("#grid").scrollTop($("#grid")[0].scrollHeight + 200);
});
}
}).
data("kendoGrid");
$("#btnAdicionar").click(function () {
var total = _this._dsGrid.data().length;
var insert = _this._dsGrid.insert(total, {});
_this._dsGrid.page(_this._dsGrid.totalPages());
var ultimoId = _this._dsGrid.data()[total - 1].Nivel;
_this._grid.editRow(_this._grid.tbody.children().last());
});
I found the solution here: http://www.telerik.com/forums/hidden-validators-when-virtual-scrolling-createat-bottom
Put this css on the page:
#grid .k-tooltip-validation {
margin-top: 0 !important;
display: block;
position: static;
padding: 0;
}
#grid .k-callout {
display: none;
}
I am using a Kendo UI grid, which looks like this:
function refreshGrid()
{
$(".k-pager-refresh.k-link").click();
}
var editWindow;
var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
var gridColumns =
[{
width: 90,
command: {
name: "edit",
text: "Edit",
click: function(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow({
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
});
editWindow.data("kendoWindow").center().open();
return false;
}
}
},
{
width: 90,
command: {
name: "delete",
text: "Delete",
click: function(e) {
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
{
$.ajax({
type: 'POST',
url: '#Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
}
}
},
{
field: "FullName",
title: "Full Name",
type: "string"
},
{
field: "Email",
title: "Email",
type: "string"
},
{
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
}];
//getSorts the columns of the grid
function getColumns() {
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns) {
if (!!gridColumns[col].field)
{
if (columns.length > 0) {
columns += ";";
}
columns += gridColumns[col].field + "," + gridColumns[col].type;
}
}
return columns;
}
function getSorts(sortObject) {
if (!(sortObject)) {
return "";
}
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0)) {
return "";
}
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in gridColumns) {
if (gridColumns[col].field === arr[index].field) {
type = gridColumns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
var grid;
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "mydatasourceurl",
type: "POST",
},
parameterMap: function (data, type) {
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
}
},
schema: {
fields: fields,
data: "Data",
total: "Total"
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
toolbar: [{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: gridColumns
});
grid = $("#grid").data("kendoGrid");
});
My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this:
$(".k-button.k-button-icontext.k-grid-add").click(function () {
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
grids[gridContainerID].addWindow.kendoWindow({
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
});
}
//Otherwise we just open it
else {
grids[gridContainerID].addWindow.data("kendoWindow").open();
}
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
});
Thanks in advance.
Instead of using that complex selector use the one that Kendo UI creates from name:
toolbar: [
{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}
],
and then:
$(".k-grid-Add", "#grid").bind("click", function (ev) {
// your code
alert("Hello");
});
In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands.
To solve this problem you can reference following steps:
create a template for toolbar
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
apply tempate to toolbar
toolbar:[{text:"",template: kendo.template($("#grid_toolbar").html())}]
add event listener to button
$("#grid_toolbar_queryBtn").click(function(e) {
console.log("[DEBUG MESSAGE] ", "query button clicked!");
});