I am trying to use a edit command link for editing a row of kendo web ui grid. The problem is that I am not able to use the syntax "#= Id #", Id being defined as id in model and one of the fields. Here is the schema defined in datasource
var dataSource = new kendo.data.DataSource({
type: "json",
.....
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
RequesterName: { type: "string" },
...
}
},
data: "data",
total: "total"
},
...
pageSize: 5
});
And the kendo grid
$("#request-grid").kendoGrid({
dataSource: dataSource,
...
columns: [{
field: "Id", title: "Id", width: 35
}, {
field: "RequesterName", title: "Req Name", width: 175
}, {
...
}, {
command: [{ name: "edit", template: "<a href='#Url.Action("_SoftwareRequestEdit", "SoftwareRequest")" + "/#= Id #" + "'>Edit</a>" }]
}],
...
});
With the above code, when the grid loads I get following javascript error
ReferenceError: Id is not defined
#11 http://localhost:49713/Admin/SoftwareRequest/SoftwareRequestList:3
#10 http://localhost:49713/Scripts/Kendo/kendo.web.js:294:22 eval (eval at ()
#9 http://localhost:49713/Scripts/Kendo/kendo.web.js:26361:44 Widget.extend._createButton()
#8 http://localhost:49713/Scripts/Kendo/kendo.web.js:27571:38 Widget.extend._cellTmpl()
#7 http://localhost:49713/Scripts/Kendo/kendo.web.js:27523:41 Widget.extend._tmpl()
#6 http://localhost:49713/Scripts/Kendo/kendo.web.js:27624:37 Widget.extend._templates()
#5 http://localhost:49713/Scripts/Kendo/kendo.web.js:25055:18 new Widget.extend.init()
#4 http://localhost:49713/Scripts/Kendo/kendo.web.js:2785:25 HTMLDivElement.()
#3 http://localhost:49713/Scripts/jquery-2.1.0.js:381:23 Function.jQuery.extend.each()
#2 http://localhost:49713/Scripts/jquery-2.1.0.js:137:17 jQuery.fn.jQuery.each()
#1 http://localhost:49713/Scripts/Kendo/kendo.web.js:2784:26 $.fn.(anonymous function) [as kendoGrid]
As you can see, I have defined Id in the model, but I am still getting ReferenceError: Id is not defined. Any clues for the same.
Variables from the model can be used only for a template column, not for a command column.
Basically you can achieve your goal by using fully template column, you do not have to use a command column.
Replace your "#= Id #" part with "#= data.Id ? Id : ' ' #"
Related
how can i format this object Object to its actual values ?
I want this json object to display its actual values in a specific kendo grid column .
Can someone please help me and teach me how to do it ?
This is the image of the kendo grid with the result ,
While here is the code that I am using in my view .
Can please someone help .
contact : new kendo.data.DataSource({
transport:{
read:{
type: "GET",
url:"reservation/list",
dataType:"json",
contentType: "application/json; chartset=utf-8"
},
update: {
url: "contacts/update",
dataType: "json",
type: "POST"
},
destroy: {
url: "contacts/destroy",
dataType: "json",
type:"POST"
},
create: {
url: "contacts/store",
dataType: "json",
type:"POST"
}
},
schema:{
model:{
id:"id",
fields:{
Purpose:
{
type:"string",
validation:{required:true}
},
RoomID:
{
from: "RoomID.room_name",
type: "string"
},
Equipments:
{
from: "Equipments",
type: "string"
},
start:
{
type:"date",
validation:{required:true}
},
end:
{
type:"date",
validation:{required:true}
},
}
}
},
pageSize:10
}),
init : function(e){
$("#grid").kendoGrid({
dataSource: this.contact,
selectable: true,
height:600,
editable: "popup",
filterable: true,
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
toolbar: ["search"],
columns: [
{
field: "Purpose",
title:"Purpose"
},
{
field: "RoomID",
title:"Room",
},
{
field: "Equipments",
title:"Equipments",
},
{
field: "start",
title:"Start",
//template: '#= kendo.toString(kendo.parseDate(start), "MM/dd/yyyy HH:mm:ss")#'
format: "{0:MMM dd,yyyy hh:mm tt}",
parseFormats: ["yyyy-MM-dd'T'HH:mm.zz"]
},
{
field: "end",
title:"End",
//template: '#= kendo.toString(kendo.parseDate(end), "MM/dd/yyyy HH:mm:ss")#'
format: "{0:MMM dd,yyyy hh:mm tt}",
parseFormats: ["yyyy-MM-dd'T'HH:mm.zz"]
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
pageable:{
pageSize:10,
refresh:true,
buttonCount:5,
messages:{
display:"{0}-{1}of{2}"
}
}
});
},
});
kendo.bind($("#whole"),model);
model.init();
Hopefully this will help you out with templating out the results.
https://dojo.telerik.com/ICOceLUj
In the example above I have created a custom column that takes the incoming row object and then parsed the name of the item and the category object into a single template.
To achieve this I have added the template property and used a function with an external template script to handle the manipulation. I personally find this easier to manage than trying to inline a complex client template (especially if you have logic involved)
So this is how we set it up initially:
{ title: "custom template", template:"#=customTemplate(data)#" }
obviously you will change it to the property you need to look at in your model.
then the function is a couple of lines of code:
function customTemplate(data){
var template = kendo.template($('#customTemplate').html());
var result = template(data);
return result;
}
so this takes the customTemplate template i have created for this and renders it as html and then it will apply the data where appropriate. The template looks like this:
<script id="customTemplate" type="text/x-kendo-template">
<div>
<h5> #:data.ProductName#</h5>
<h4>#: JSON.stringify(data.Category, null, 4) #</h4>
</div>
</script>
You can then customize this template to how you need it to look for your specific needs. You can then either create a source template for the items and then map the values back as single string or have the logic for this in the template. Which ever is most sensible in your case.
For more info on templating please look at this link:
https://docs.telerik.com/kendo-ui/framework/templates/overview
You can use kendo.stringify in your column template.
Example:
kendo.stringify(YourProperty)
I'm trying to add a numeric spinner input box to a column in a Kendo UI grid.
For some reason if I 'add' a record to the dataSource and change the numeric value, then 'add' another row, the value in all the previously added rows gets set to 1?
$("#add-btn").click(function(){
$("#items-grid").data("kendoGrid").dataSource.add({NAME:"Apples",QTY:1})
})
$("#items-grid").kendoGrid({
height: 300,
columns : [
{
field : "NAME",
title : "Name"
},
{
field : "QTY",
title : "Qty",
width: 140 ,
template: "<input class='numeric' value='#: QTY #' style='width:100%'> </input>"
} ],
noRecords: true,
dataSource: [] ,
dataBound: function() {
this.tbody.find(".numeric").each(function(){
$(this).kendoNumericTextBox({decimals: 0});
});
}
});
http://jsfiddle.net/5ow4sj3b/
Please advise
The problem with my Kendo Grid was that I hadn't added a model to the schema to specify the "number" type for the QTY column.
Without this, the inline numericTextBox doesn't behave correctly
dataSource : new kendo.data.DataSource({
data: [],
schema: {
model: {
fields: {
QTY: { type: "number", validation: { required: true, min: 1} }
}
}
}
}),
I am using below code in Kendo Grid editor but unable to access value of selected item value from Combobox.
Moreover, I have done same thing in Kendo drop down list but unable to kendo Combobox, so if anyone has solution please let me know.
Thanks in Advance !
{
field: "SalesBookId",
title: "Sales Book",
template: "#= (typeof SalesBookId != 'undefined') ? GetSalesBookName(SalesBookId):'' #",
editor: function (container, options) {
$('<input required data-text-field="SalesBookName" data-value-field="SalesBookId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: dsSalesBookDropDown,
});
}
},
You have not shown the dsSalesBookDropDown, nor GetSalesBookName so it is hard to know what is wrong in your specific case.
This dojo demonstrates that when the configurations, handlers and data all align properly there should not be a problem.
The dojo is a based on the example "Grid with local data", your SalesBook concept is changed to Seller for the example.
Code related to the custom editor include
var sellers = [
{ SellerId: 1, Name: "Andrew" },
{ SellerId: 2, Name: "Basil" },
{ SellerId: 3, Name: "Chuck" },
{ SellerId: 4, Name: "Dennis" },
{ SellerId: 5, Name: "Edward" }
];
var dsSellersDropDown = sellers;
function GetSellerName (id) {
var seller = sellers.find(function(x) {return x.SellerId == id });
return (seller) ? seller.Name : "** invalid id " + id + " **";
}
var products = [{
ProductID : 1,
ProductName : "Chai",
SellerId: 1,
SupplierID : 1,
CategoryID : 1,
. . .
grid config
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
SellerId: { type: "number" },
and
columns: [
"ProductName",
{ field: "SellerId",
title: "Seller Name",
template: "#= (typeof SellerId != 'undefined') ? GetSellerName(SellerId):'' #",
editor: function (container, options) {
$('<input required data-text-field="Name" data-value-field="SellerId" data-bind="value:'
+
options.field
+ '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: dsSellersDropDown,
});
}
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
I have a Kendo Grid, and instead of having a custom command:
$('#grid').kendoGrid({
dataSource: data,
columns:
[
...
{ command: { text: "Details", click: showDetails }, title: " " }
]
});
I'd like the same behavior to occur but on a standard link. Is it possible?
This is the functionality I'm looking for: http://jsfiddle.net/dmathisen/ERgkA/2/
But want it to behave like this: http://jsfiddle.net/dmathisen/qXAf6/4/
This is similar to what I use in my own projects. You can use whatever markup you desire and style it however you want to make it look functional.
function showDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
document.getElementById('details').innerHTML = dataItem.quantity;
}
var data = [
{ name: "name1", quantity: 1 },
{ name: "name2", quantity: 4 },
{ name: "name3", quantity: 9 }
];
var grid = $('#grid').kendoGrid({
dataSource: data,
columns: [
{ field: 'name', template: '#= name #' },
{ field: 'quantity' }
]
}).data('kendoGrid');
grid.table.on('click', '.link', function(e) {
showDetails.call(grid, e);
});
JsFiddle
http://jsfiddle.net/qXAf6/7/
I have a kendo grid that does a create/delete, both of them ending with errors.
I would like to:.
When having an error on delete to prevent the row deleting from the grid (that is the default behavior when having errors)
When having a create error to prevent the popup editor to close
Please see this fiddle:
http://jsfiddle.net/andreigavrila/p49eV/2/
var data = [
{ Id: 1, Name: "Decision 1", Code: 1 },
{ Id: 2, Name: "Decision 2", Code: 2 },
{ Id: 3, Name: "Decision 3", Code: 3 }
];
$("#grid").kendoGrid({
dataSource: {
error: function (a) {
console.log('error');
$('#grid').data("kendoGrid").cancelChanges();
//$('#grid').data("kendoGrid").one("dataBinding", function (e) {
//e.preventDefault(); // cancel grid rebind
//});
},
transport: {
read: function(e) {
e.success({data: data});
},
create: function(e) {
console.log('creating');
e.error();
},
destroy: function(e) {
console.log('deleting')
e.error();
}
},
schema: {
data: "data",
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "number" },
Name: { type: "string" }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "Code", title: "Code", },
{ field: "Name", title: "Name" },
{ command: ["destroy"], title: " " }],
editable: {
mode: "popup"
}
});
The second point works by default (so having an error on create does not close the popup)
The first point works by adding the error function, but that breaks the popup (it closes on error).
So I can have either one of my , but not both in the same time. I am kind of stuck.
I also saw this 2 questions on kendo forums:
delete error
server validation
The second link said "to prevent the Grid from closing you need to prevent the next dataBinding event." but i can't make that work.
Thank you for your help.
Andrei
I finally managed to push this to Kendo forums:
Tthe official solution to that:
http://www.kendoui.com/forums/kendo-ui-web/grid/kendo-grid-handling-create-delete-errors-with-popup-editor.aspx
"I suggest you to use an if condition in the error event handler to
determine which of the two workarounds should be executed. In this
case the server should provide information about type of the error
that occurred. You can retrieve the error status from error event
arguments."