Hi,
I had follow the link below to append row while scrolling..
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/binding/load-and-append-records
I created some textbox to let user fill in and I put it inside the detail template.. But after scrolling the grid, it rebind the data..
Is there any method not to refresh the datasource in grid and just append new row at the bottom while scrolling the grid?
Thanks.
Regards,
Su Pei
Can dropzone be used without async?
I am using the Kendo AngularJS date/time picker i.e. <input kendo-date-picker ... />
I use the componentin all kinds of places in my web application. However on one page, clicking a datepicker causes it to disappear. See the following GIF of the behaviour: http://imgur.com/a/UAJug
The other datepickers in the GIF mostly work okay, but the featured one does not. Funnily enough, when you scroll back up the page and then scroll down - or when you make your window height smaller - the datepicker works correctly and the calendar does not disappear.
This is the snippet of the datepicker in question:
<
div
class
=
"form-group"
>
<
label
class
=
"col-xs-3 control-label"
title
=
"Default value"
>
{{'DATASOURCE.VARIABLES.DEFAULT_VALUE' | translate}}
</
label
>
<
div
class
=
"col-xs-8"
ng-switch
=
"stagedVariable.type"
>
<
input
ng-switch-when
=
"Date"
kendo-date-time-picker
k-ng-model
=
"stagedVariable.defaultValue"
/>
<
input
ng-switch-when
=
"number"
class
=
"form-control"
ng-model
=
"stagedVariable.defaultValue"
type
=
"number"
max
=
"9007199254740991"
min
=
"-9007199254740991"
/>
<
input
ng-switch-when
=
"string"
class
=
"form-control"
ng-model
=
"stagedVariable.defaultValue"
type
=
"text"
/>
<
select
ng-switch-when
=
"option"
class
=
"form-control"
ng-model
=
"stagedVariable.defaultValue"
ng-options
=
"val as val for val in stagedVariable.allowedValues"
>
</
select
>
</
div
>
</
div
>
Hello,
I'm trying to replace filter widget in filter row in grid and detail grids.
My replacement should be standard text box input: <input class="k-input" id="fullName" style="width: 100%;" placeholder="Hledat subjekt">
It would be perfect if i can set template of this filter cell when defining columns like this:
columns: [
{
field: "color",
filterable: {
cell: {
template: <input class="k-input" id="fullName" style="width: 100%;" placeholder="Hledat subjekt">
},
showOperators: false
}
}
}
I'd like to define it by html element or by kendo element if there is such (i have not found any)
Can you help me with solution please?
I have tried to put "All" in the PageSize = 'All'
which didn't work, then i haven't provide any default value for the PageSize
then Grid started showing all the records at pageload. But at the bottowm righ
of the Grid it is showing as "NaN - NaN of 115 items".
What my client want is by default All option should be
selected on the Grid pager dropdown and that should show all the records in the
Grid with correct paging. Can someone please help me by providing solution for
this problem please?
Data I am getting form the database to bind the Grid.
Thanks in advance.
My Code:
BindMyGrid: function (gridData) {
$("#MyGrid").empty();
if (gridData !== undefined && gridData !== null && gridData.length > 0) {
$("#MyGrid").kendoGrid({
dataSource: {
data: gridData
// pageSize: 'All'
},
sortable: {
mode: "multiple",
allowUnsort: true
},
selectable: 'multiple',
scrollable: false,
pageable: {
input: false,
numeric: true,
previousNext: true,
butonCount: 5,
pageSizes: [10, 20, 30, 40, ALL]
},
dataBound: function (e) {
var grid = e.sender;
grid.select(grid.tbody.find(">tr:first"));
},
detailInit: WorkPartyAllocationsData.detailInit,
columns: [
{ field: "ProductName", title: "Product Name", width: "400px" },
{ field: "TotalItems", title: "Total Items", width: "175px" }
]
});
}
},
Inside the filter of the grid I need to change the order of the items "And" & "Or" inside the list to show "Or" by default.
I tried declaring the grid with jquery but I can only change the text of the item:
$("#testgrid").kendoGrid({
columns:
[
{field: "name"},
{field: "age"}],
dataSource:[
{name: "John", age:"30"},{name: "Mike", age:"32"}],
filterable:{
messages:{
or: "filterOr",
and: "And"
}
}
})
Is it possible to change the order of the items?
Thanks
We have a header/detail accounting application with a data-entry form and an editable grid. When tabbing off of the form to the grid the first cell will not go into edit mode except with some workaround 'hack' code in the 'navigate' event (see below). The problem is the grid edit mode literally works differently when tabbing to the first cell of the grid from a form input field vs. clicking in the same cell. Clicking (rather than tabbing) into the first cell does put the cell into edit mode, but
clears the field contents. Here's the code
let grid = $("#" + target).kendoGrid({
dataSource: {
data: rows,
schema: {
model: {
fields: columnSetup.modelFields
}
}
},
edit: function (e) {
// This does not fire when tabbing to the grid. It will fire if a cell is clicked.
},
editable: {
mode: "incell",
createAt: 'bottom'
},
navigatable: true,
navigate: function (e) {
// Attempted Workaround (hack) - This does put the first cell in edit mode, but only when tabbing
// to the grid. However, clicking in the first cell does put the cell in edit mode, but clears the field value.
if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {
this.editCell(e.element[0])
}
},
resizable: true,
reorderable: true,
scrollable: { virtual: true },
selectable: "row",
columns: columnSetup.columns,
dataBound: keyboardEventHandler,
}).data('kendoGrid');
After spreadsheet initialization, the controls renders as a blank control (no rows, no columns), the tabs rendering is also impacted. If I click the add sheet (+) and go back to the first sheet, the rendering issue seems to resolve itself. There don't seem to be any errors during the initialization process
var configureBalanceSheetSpreadSheet = function (batchId) {
$.getJSON("../../../Data/FinancialsJson/Templates/BalanceSheetTemplate.json")
.done(function (json) {
$("#balanceSheetSpreadSheet").kendoSpreadsheet({
sheetsbar:false
});
var spreadsheet = $("#balanceSheetSpreadSheet").getKendoSpreadsheet();
spreadsheet.fromJSON(json);
})
.fail(function (jqxhr, textStatus, error) {
console.log("Request Failed: " + error);
});
}