Develop Reference

Kendo UI adding new row to grid adds extra row with null value

I have been trying to figure out what is going on but haven't yet.
Please see the code below.It is a inconsistent behavior, so I am having hard time to catch what triggers it. This grid is inside a popup, I noticed when i refresh the page and try it, it works fine on first attempt. Then i save/cancel popup and keep repeating it fails at some point and starts accumulate null rows.
I tried to check the value of the grid using
$('#gridFldListItems').data("kendoGrid").dataSource.data()
It shows there is no data but as soon as click "Add new Record" it shows 2.
It does not necessarily fail on second attempt, but it never fails on first. I suspect that everytime I open the popup it is not necessarily empty(after first few tries) and it carries some data from previous attempts. I might be wrong.
When I click add new record, it adds a line with null value and gives me an option to input on the second row.
I also When I put itemname and click update, it does not trigger the "create" event and looks like this:
At this point the grid broken. Here is the code for the grid
var grid = $("#gridFldListItems").kendoGrid({
editable: {
"confirmation": "Are you sure you want to delete this item?",
"mode": "inline",
"createAt": "bottom"
},
selectable: true,
autoBind: false,
toolbar: ["create" ],
columns: [
{ field: 'Item' },
{
command: ['edit', 'destroy',
{ iconClass: "k-icon k-i-arrow-up", click: $.proxy(this, 'selectedFieldDef_onClkMoveUp'), name: 'Up' },
{ iconClass: "k-icon k-i-arrow-down", click: $.proxy(this, 'selectedFieldDef_onClkMoveDown'), name: 'Down' }], title: ' '
}
],
dataSource: this.selectedFieldDef_dsItems,
}).data("kendoGrid");
selectedFieldDef_dsItems: new kendo.data.DataSource({
transport: {
read: function (e) {
var field = editViewModel.get("selectedFieldDef");
var mapItems = $.map(field.Items, function (item, idx) {
return {
Item: item
};
});
//on success
e.success(mapItems);
},
create: function (e) {
// on success
e.success(e.data);
},
update: function (e) {
// on success
e.success();
},
destroy: function (e) {
var vm = editViewModel;
// locate item in original datasource and remove it
var field = vm.get("selectedFieldDef");
if (field.DefaultValue && !vm.selectedFieldDef_dsItemsFindItem(vm.selectedFieldDef_dsItems.data(), field.DefaultValue)) {
field.DefaultValue = null;
vm.set("selectedFieldDef", field);
$("#inpFldRegex").kendoDropDownList().data("kendoDropDownList").trigger("change");
}
// on success
e.success();
}
},
error: function (e) {
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
schema: {
model: {
id: "Item",
fields: {
Item: { editable: true, nullable: true }
}
}
}
})
Any help would be much appreciated.
UPDATE:
It works fine when I refresh the page

KendoUI grid fire update method when changing the hidden field value

For some reason I need to define a hidden column when using KendoUI grid:
var fields = {
ID: { type: "string", editable: true, nullable: false },
HideID : { type: "string", editable: false, nullable: false ,hidden: true },
Name: { type: "string", editable: true, nullable: false }
};
var ColumnsDefine = [
{ field: "ID", title: "ID", width: 100 },
{ field: "HideID", hidden: true },
{ field: "Name", title: "Name", width: 100 }
];
I change the HideID column value using JavaScript (operate the dataItem) without editing the grid's record.
And the JavaScript code to change the hidden field is like below (it's inside a command-click function)
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
data.HideID = "123";
Now the problem is when I click the default update button, the background update method is not being called because I didn't make changes to any visible column. But if I modify any visible columns and click update, both the HideID and another field will be updated successfully in the background.
What should I do to notify the KendoUI grid that its data has been changed and fire the update method by clicking the update button?

Your grid dataItem will be a kendo.data.ObservableObject; you need to set your HideID property in such a way that the kendo framework sees the change, using it's set() method:
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
data.set("HideID","123");
Once you've done that, you should find that it's dirty field is set to true. That signals to the datasource that this object has changes which need to be saved via the update method.
See also this article which gives a good explanation of how the observableObject can be used for binding https://docs.telerik.com/kendo-ui/framework/mvvm/observableobject#set-field-values
Hope this helps!

kendo grid dynamic field-editable definition

I have kendo-ui grid, with some fields.
I need one of the fields to be editable on add new row, and not editable on update row.
I try to change data-source definitions before add row, and change it back before update.
But the changing doesn't help.
Is there any way to do it?
Here is what I tried to do:
var schema = {
data: 'results',
model: {
id: 'GroupCode',
fields: {
GCode: { editable: false },
GroupPrincipalId: { editable: false },
GroupPrincipalName: { editable: false },
ChildCount: { editable: true },
}
}
};
onAddClick: function(){
var gridElement = ('#myGrid').data('kendoGrid');
gridElement.dataSource.options.schema.model.fields.GroupPrincipalId.editable = true;
gridElement.dataSource.options.schema.model.fields.GroupPrincipalName.editable = true;
gridElement.addRow();
}
(onAddClick is called by my custom adding-button, not related to kendo-adding-logic);

You can use the approach described here:
http://www.telerik.com/forums/making-column-as-readonly-on-update-and-editable-on-insert-in-grid
When create button is pressed you mark a variable as isCreating and in the edit section you check it and if is false you disable the requiered field/fields.

Kendo UI Grid Not showing spinner / load icon on initial read

I've set up my kendo ui grid to read data from an MVC action that returns JSON. I'm using the free version of Kendo and not the MVC specific, due to cost.
The issue is that when the page loads and does the initial population of the grid it doesn't show the loading spinner. After grid is populated and I go to another page or sort a column it shows up.
If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20).
Does anyone know why you have to set the height parameter? Or any way of getting the spinner to work without setting the height.
My kendo javascript kode:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
//kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two spinners on every page or sort change
},
requestEnd: function () {
//kendo.ui.progress($("#loading"), false);
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
}),
height: "100%", <-- I want to avoid this as it renders the grid way to small
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: 'See details'
}
],
});

I had this same issue. It actually is rendering the spinner / progress bar, but because the grid content area initially has no height, you can't see it. This worked for me. Give it a shot:
// This forces the grids to have just al little height before the initial data is loaded.
// Without this the loading progress bar / spinner won't be shown.
.k-grid-content {
min-height: 200px;
}

The solution var to use a variable to tell me if the dataset load was the initial one or not. It's not a perfect solution, but it's the only one I've been able to make work.
var initialLoad = true;
$("#grid").kendoGrid({
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: 'See details'
}
],
});
var ds = new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
if (initialLoad) <-- if it's the initial load, manually start the spinner
kendo.ui.progress($("#invoiceGroupGrid"), true);
},
requestEnd: function () {
if(initialLoad)
kendo.ui.progress($("#invoiceGroupGrid"), false);
initialLoad = false; <-- make sure the spinner doesn't fire again (that would produce two spinners instead of one)
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
});

Chances are, because you are creating and setting the datasource in the grid's initialization, the grid loads so fast that you don't see a load spinner. If you look at all the web demos for kendogrid on their website, you rarely see the initial load spinner. On large remote datasources that take longer to load, you would see it.
If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20)
It's not that it only shows one row. It's because it failed to read it your height property value so it defaulted to as small as possible. Height takes in a numeric pixel value and does not accept percentages. It couldn't read your value, so it probably took longer to initialize the grid, which allowed you to see the load spinner. Instead, height should be set like height: 400, for example. But this is besides the point.
If you really want the user to see a load spinner on start, try loading the datasource outside of the grid initialization. Basically, load the grid first, and load the datasource after so that there is slightly more delay between the grid rendering and datasource setting.
$("#grid").kendoGrid({
//kendoGrid details... but exclude dataSource
});
var ds = new kendo.data.DataSource({
//DataSource details...
});
And then set the datasource like this:
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(ds);
grid.refresh();
However, I think this would still load pretty fast.
Another last resort if you still really want the spinner is to trick the user into thinking it's taking longer to load and manually call the load spinner like you've tried. Call kendo.ui.progress($("#loading"), true);, execute a small delay function for say 250ms and then turn the load spinner off, and then call grid.setDataSource(ds); and refresh.

kendoui: How to display foreign key from remote datasource in grid

i have a kendoui grid which list claims. one of the columns is lenders which is a foreign key reference to the lenders table. what i want is to be able to display the lender name in the grid instead of its id reference.
ive setup the lenders datasource as follows
var dsLenders = new kendo.data.DataSource({
transport: {
read: {
url: "../data/lenders/",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation === "read") {
return options;
}
}
}
});
and the grid looks like this
$("#gridClaims").kendoGrid({
dataSource: claimData,
autoSync:true,
batch: true,
pageable: {
refresh: true,
pageSizes: true
},
filterable: true,
sortable: true,
selectable: "true",
editable: {
mode: "popup",
confirmation: "Are you sure you want to delete this record?",
template: $("#claimFormPopup").html()
},
navigable: true, // enables keyboard navigation in the grid
toolbar: ["create"], // adds insert buttons
columns: [
{ field:"id_clm", title:"Ref", width: "80px;" },
{ field:"status_clm", title:"Status", width: "80px;" },
{ field:"idldr_clm", title:"Lender", values: dsLenders },
{ field:"type_clm", title:"Claim Type"},
{ field:"value_clm", title:"Value", width: "80px;", format:"{0:c2}", attributes:{style:"text-align:right;"}},
{ field:"created", title:"Created", width: "80px;", format: "{0:dd/MM/yyyy}"},
{ field:"updated", title:"Updated", width: "80px;", format: "{0:dd/MM/yyyy}"},
{ field:"user", title:"User" , width: "100px;"},
{ command: [
{text: "Details", className: "claim-details"},
"destroy"
],
title: " ",
width: "160px"
}
]
});
however its still displaying the id in the lenders column. Ive tried creating a local datasource and that works fine so i now is something to do with me using a remote datasource.
any help would be great
thanks

Short answer is that you can't. Not directly anyway. See here and here.
You can (as the response in the above linked post mentions) pre-load the data into a var, which can then be used as data for the column definition.
I use something like this:-
function getLookupData(type, callback) {
return $.ajax({
dataType: 'json',
url: '/lookup/' + type,
success: function (data) {
callback(data);
}
});
}
Which I then use like this:-
var countryLookupData;
getLookupData('country', function (data) { countryLookupData = data; });
I use it in a JQuery deferred to ensure that all my lookups are loaded before I bind to the grid:-
$.when(
getLookupData('country', function (data) { countryLookupData = data; }),
getLookupData('state', function (data) { stateLookupData = data; }),
getLookupData('company', function (data) { companyLookupData = data; })
)
.then(function () {
bindGrid();
}).fail(function () {
alert('Error loading lookup data');
});
You can then use countryLookupData for your values.
You could also use a custom grid editor, however you'll probably find that you still need to load the data into a var (as opposed to using a datasource with a DropDownList) and ensure that the data is loaded before the grid, because you'll most likely need to have a lookup for a column template so that you're newly selected value is displayed in the grid.
I couldn't quite get ForeignKey working in any useful way, so I ended up using custom editors as you have much more control over them.
One more gotcha: make sure you have loaded your lookup data BEFORE you define the column. I was using a column array that was defined in a variable I was then attaching to the grid definition... even if the lookup data is loaded before you use the grid, if it's defined after the column definition it will not work.

Although this post past 2 years, I still share my solution
1) Assume the api url (http://localhost/api/term) will return:
{
"odata.metadata":"http://localhost/api/$metadata#term","value":[
{
"value":2,"text":"2016-2020"
},{
"value":1,"text":"2012-2016"
}
]
}
please note that the attribute name must be "text" and "value"
2) show term name (text) from the foreign table instead of term_id (value).
See the grid column "term_id", the dropdownlist will be created if added "values: data_term"
<script>
$.when($.getJSON("http://localhost/api/term")).then(function () {
bind_grid(arguments[0].value);
});
function bind_grid(data_term) {
$("#grid").kendoGrid({
dataSource: ds_proposer,
filterable: true,
sortable: true,
pageable: true,
selectable: "row",
columns: [
{ field: "user_type", title: "User type" },
{ field: "user_name", title: "User name" },
{ field: "term_id", title: "Term", values: data_term }
],
editable: {
mode: "popup",
}
});
}
</script>

For those stumbling across this now, this functionality is supported:
https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumnbinding