I have a Kendo DataSource that I'm binding to a grid. I'm adding a field dyanmically. This all works fine until I put a template on the column that I add dynamically.
Model Building:
model = kendo.data.Model.define({
id: "Id",
fields: {
}
});
model.fields["CreationDate"] = { type: "date" };
I then assign the model to the model property of the datasource. My grid is created like:
$("#Grid").kendoGrid({
dataSource: UserDS,
columns: [
{ "field": "CreationDate", template: '#= kendo.toString(CreationDate, "g") #' }
]
});
When I try to add a new record to this grid I get an error saying CreationDate is not define. If I remove the template part of the field definition it works. Also if I change the model to add the field as part of the model definition it works even with the template. I would expect the same end result from both approaches.
Try this:
var model ={
id: "Id",
fields: {}
};
model.fields["CreationDate"] = { type: "date" };
jsfiddle: http://jsfiddle.net/Sbb5Z/1599/
Related
Background: I am attempting to work on a grid where one column can have different editor based on the column value in a Grid. I found a working example on Telerik site. It works great!
Issue: I like to separate out html code in html file vs jquery code in js file. Once I separated out the code like this I am getting an error which says "customTemplate is not defined". customTemplate is a function which is being called from template under field editor. I also created a JsFiddle of what my code looks like locally where i seem to be getting same error.
I think the problem is around template attribute where I am calling the customTemplate function. I tried swapping the double quotes to single quotes and that didn't seem to work either.
Below is how grid and customTemplate function is defined:
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "id" , title: "ID" },
{ field:"type" , title: "Type" },
{ field: "editor",
title: "Editor",
template: "#=customTemplate(data.type,data.editor)#",
editor: chooseEditor
}],
editable: true
});
});
function customTemplate(type,value) {
if (value == null)
return "";
switch (type) {
case "date":
return kendo.toString(kendo.parseDate(value), 'yyyy/MM/dd');
default:
return value;
}
}
Use a function to call your function instead of a template string:
{
field: 'editor',
title: 'Editor',
template: function(dataItem) {
return customTemplate(dataItem.type, dataItem.editor);
},
editor: chooseEditor
}
Fiddle: https://dojo.telerik.com/AluziYAc
I am trying to create an editable grid where I can add TransactionItems. Each TransactionItem will have a product (combobox), rate (textbox), quantity(textbox), total(textbox) and IsTaxable(checkbox) field. When I select Product, I want to update Rate and IsTaxable field on the same row for that product as well. How?
var productElem;
var productDDL;
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: [],
toolbar: ['Add', 'Cancel'],
editSettings: { showConfirmDialog: true, showDeleteConfirmDialog: true,allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
columns: [
{
field: 'Product', headerText: 'Product',
type: 'string',
foreignKeyField: "ProductId",
foreignKeyValue: "Product",
edit: {
create: function () {
productElem = document.createElement('input');
return productElem;
},
read: function () {
return productDDL.text;
},
destroy: function (e) {
productDDL.destroy();
},
write: function (args) {
productDDL = new ej.dropdowns.ComboBox({
fields: { text: 'product', value: 'product' },
placeholder: "Select a Product",
allowFiltering: true,
filtering: (e) => {
if (!e.text || e.text.length < 3) { return; }
else {
var query = new ej.data.Query().addParams("searchText",e.text.trim());
e.updateData(productDDLSource, query);
}
},
change: (item) => {
// HERE I want to update value of Rate and IsTaxable based on Product selected
}
});
productDDL.appendTo(productElem);
},
}
},
{ field: 'Rate', headerText: 'Rate', type: 'number' },
{ field: 'Quantity', headerText: 'Quantity', type: 'number' },
{ field: 'Total', headerText: 'Total', type: 'number' },
{ field: 'IsTaxable', headerText: 'Is Taxable', type: 'checkbox' }
],
height: 315
});
grid.appendTo('#grid');
We checked attached sample and we suspect that you have performed the Batch editing with ForeignKey column.
In your code example we found that, you have not defined the column.isPrimaryKey property in the unique Grid column which is required to perform the CRUD action.
Please refer the below documentation for more information
Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/column/#isprimarykey
https://ej2.syncfusion.com/documentation/grid/edit/#editing
Query: When I select Product, I want to update Rate and IsTaxable field on the same row for that product as well. How?
Based on your query we can update Rate, IsTaxable column value when select Product using updateCell method in the change event dropdown editing. Please refer the below syntax and documentation for more information.
Syntax:
gridInstance.updateCell(rowIndex, field, value);
Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#updatecell
From your code example, we need more details about your query to validate further so, please ensure the following details us.
In your sample, we found that the Grid’s dataSource has been empty and you do not define the dataSource of foreignKeyColumn, dropdownlist editing which are required dataSource to perform the Grid’s CRUD action.
In ForeignKeyColumn, you do not define the column.dataSource property in the foreignKeyColumn(Product) and you have tried to map the different columns value in field and foreignKeyField. By default, in ForeignKey column, bind the external table/JSON data to Grid column and it will display value from foreignKeyValue which is depending on unique values of column.field and column.foreignKeyField.
We shared the Demo sample and documentation about the ForeignKeyColumn Feature.
Demo Sample: https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html
Documentation: https://ej2.syncfusion.com/documentation/grid/columns/#foreign-key-column
Note: By default, we are unable update the ForeignKeyField(ProductId) and we should define that foreignKeyColumn’s dataSource since we can map the ForeignKeyValue to Grid column using that columns dataSource.
Also you have enabled the dropdown editing in Product column but dataSource is undefined. Since please ensure that you want to add the dataSource to dropdown editing while perform Grid’s Add action or we misunderstood please share exact requirement to us that will help to validate further.
I have using BootstrapTable with X-editable. I have a select box, that I would like to update the source data with a button click. Ideally, I like to get the source from the column, push a value to it and reload it without changing any edits to that column by the user.
Full code:
http://jsfiddle.net/rp4nkb46/1/
relevant code:
$('#addoption').click(function () {
names.push({value: 5, text: 'Bob'})
$('#table').bootstrapTable('OnRefresh', {});
});
Use a function to return the names array rather than specifying the array directly in your table setup:
$(function () {
$('#table').bootstrapTable({
columns: [{field: 'Contact',
title: 'Contact',
editable: {
type: 'select',
source: function() { return names; }
}
}],
data: data
});
});
It seems that the X-Editable will bind a supplied array once upon creation of the control but will call the function each time.
I have the following Webix combo:
{
view: "combo",
label: 'Select the name',
labelWidth:130,
options: {
data:[
{ itemId:"120", itemName:"Name 1"},
{ itemId:"121", itemName:"Name 2"}
],
body: { template: '#itemName#' }
},
on:{
onChange:function(id){ alert(id) }
}
}
It looks just as needed, but how can I get itemId after selecting new item? I can only get the auto-generated ID
The same code in a snippet:
http://webix.com/snippet/3a431f1c
Thanks in advance!
You have to get the object of the combobox and then you can get data of the selected item with the help of its getItem() method as:
var obj = this.getPopup().getBody().getItem(newValue); //the object
var id = obj.itemId; //the desired id which is itemId in your code
Please check the snippet here.
I'm currently building an application using knockoutjs for the MVVM pattern, and Kendo Web for the controls.
I have somme issues with filtering/grouping the data in the kendo grid.
I need to have highly customizable rows, and so I choose to use row template according to this sample :
http://rniemeyer.github.io/knockout-kendo/web/Grid.html
I also need to have a two way binding with the grid, cause I need to add/remove/update items.
The grid :
<div data-bind="kendoGrid: {
data: LienActionIndicateurPourFicheCollection,
widget: indicateurWidget,
rowTemplate: 'indicateurRowTmpl',
useKOTemplates: true,
dataSource : {
schema: {
model: {
fields: {
Code: { type: 'string' },
Titre: { type: 'string' },
Note: { type: 'number' }
}
}
},
},
columns: [
{ title: '#', width: 30 },
{ field: 'Code', title: 'Code', width: 80 },
{ field: 'Titre', title: 'Titre', width: 150 },
{ field: 'Note', title: 'Note', width: 80 }]
}">
</div>
The row template :
<script id="indicateurRowTmpl" type="text/html">
<tr">
<td>
<button data-bind="visible: $root.isInEditMode, click: removeIndicateur"
class="common-button delete-button"></button>
</td>
<td data-bind='text: Code'></td>
<td data-bind='text: Titre'></td>
<td data-bind='text: Note'></td>
</tr>
</script>
When I'm using the grid, it works fine, expect when I use grouping/filtering : it's like the grid is using the observable objet instead of the value to perform the operations.
Example : When I'm grouping on 'Note' integer value :
To prevent that, I have replaced in columns definition "field: 'Note'" by "field: 'Note()'" : the grouping works fine now, since grid use the integer value instead of a function.
But the filtering remain impossible : the column filter menu has changed from number filter to string filter when I have make the 'Note()' change.
I suppose it's because the fields entry key 'Note' does not match the columns entry key 'Note()' anymore !
I've tried to replace 'Note' by 'Note()' in fields definition : does not work.
I've replace Note observable by a non observable variable in my item model : all is working fine, but i'm not enable to edit those values anymore, and I want to.
Thanks for your help !
EDIT : here a jsfiddle reproducting the bug : http://jsfiddle.net/camlaborde/htq45/1/
EDIT#2 here's the final solution, thanks to sroes : http://jsfiddle.net/camlaborde/htq45/7/
EDIT#3 final solution plus inline grid edition : http://jsfiddle.net/camlaborde/8aR8T/4/
It works if you create a computed which returns the items as a plain JS object:
this.items.asJS = ko.computed(function() {
return ko.toJS(this.items());
}, this);
http://jsfiddle.net/htq45/2/
The reason why putting ko.toJS(this.items) directly in the binding doesn't work is because the way kendo tracks individual options in the bindings. Knockout.js man RP Niemeyer taught me this: Dynamically enable/disable kendo datepicker with Knockout-Kendo.js
I solved this issue by using Knockout ES5. Then, when assigning my data to my model, I used knockout-mapping with a mapping object like this:
var dataMapper = {
create: function(o) {
return ko.track(o.data), o.data;
}
};
ko.mapping.fromJS(json, dataMapper, self.data);
This makes the filtering and sorting work out of the box for the knockout kendo grid.