I am trying to add a kendo checkbox column. I have done this successfully in another grid. However, when I tried to do the same thing in another grid, I am getting a "IsSimple is undefined" error, where IsSimple is a simple boolean model field.
Model for my kendo data source:
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
DesignatorName: { type: "string" },
TXFreq: { type: "string" },
RXFreq: { type: "string" },
IsSpecial: { type: "bool" },
IsCommand: { type: "bool" },
}
}
Here is my column definition for my kendoGrid.
$("#DesignatorFreqGrid").kendoGrid({
dataSource: DesignatorDS,
columns: [
{ field: "DesignatorName", title: "Frequency", format: "{0:c}", width: "120px" },
{ field: "TXFreq", editor: TXFreqEditor, title: "TX Frequency", format: "{0:c}", width: "120px" },
{ field: "RXFreq", editor: TXFreqEditor, title: "RX Frequency", format: "{0:c}", width: "120px" },
{ field: "IsSpecial", template: '<input type="checkbox" #= IsSpecial ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Special", format: "{0:c}", width: "120px" },
{ field: "IsCommand", template: '<input type="checkbox" #= IsCommand ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Command", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
Here is my JSON object:
"other fields........DesignatorName: "11"
EQUIPMENT: ObjectId: 2
IsCommand: true
IsSpecial: true
RXFreq: "55"
TXFreq: "22"
As you can see, IsSpecial is defined. The binding works when I load data into the grid. The checkboxes are indeed checked. But if I try to add a new record with the "Add New Record" button in the grid, I will get the error "Uncaught ReferenceError: IsSpecial is not defined".
If I change the binding to this.IsSpecial, I don't get the error anymore, and can add a new row to my database, but then the binding won't work and the boxes aren't checked when loading the grid,
It seems like it should work, and I do not know where else to look. Any ideas? Thanks.
You need to use boolean, instead of bool.
IsSpecial: { type: "boolean" },
IsCommand: { type: "boolean" }
Related
I have few tabs in which each of tab is having data table.
I'm trying to use tabulator and based on active tab I'm trying to set columns.
I used setColumns method but I'm getting an error:
Cannot read property 'forEach' of undefined
Please find jsfiddle link with my code in it:
var table = new Tabulator("#example-table", {
layout: "fitColumns",
//data : tabledata,
autoColumns: true,
});
if (this.activeTabName == "Role Card") {
let columns: [{
title: "Name",
field: "name",
sorter: "string",
width: 200
},
{
title: "Progress",
field: "progress",
sorter: "number",
formatter: "progress"
},
{
title: "Gender",
field: "gender",
sorter: "string"
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Favourite Color",
field: "col",
sorter: "string"
},
]
table.setColumns(columns)
}
https://jsfiddle.net/qc9r8t4p/
Please help me out in achieving this.
There is an error in your code that is resulting in the columns variable being undefined when you pass it into the setColumns function
where you assign the value to the variable
let columns: [{
you have a colon instead of an equals sign, it should be:
let columns = [{
I am using a Kendo UI grid in my AngularJS app, I am adding, editing and displaying records but I am not able to get the pagination to work. Currently I have set the pageSize to 2 and if I add a new record to the data it shows it on the same page instead of a new one.
Following is my angular js controller code for configuring the Kendo UI grid:
$scope.keyPersonList = new kendo.data.ObservableArray([
{person1: 'Kiran', policyStatusID: 1 },
{person1: 'Kadam', policyStatusID: 2 }]);
$scope.mainGridOptions = {
dataSource: {
pageSize: 2,
schema: {
model:
{
id: "id",
fields: {
person1: { editable: true, type: "string" },
policyStatusID: { editable: true, valuePrimitive: true }
}
}
}
//total: 10,//function () { return $scope.keyPersonList.length; },
//serverPaging: false,
//serverSorting: false
},
selectable: "row",
//toolbar: kendo.template(angular.element("#toolbarTemplate").html()),
toolbar: '<button class="btn btn-default mrn-10-lft" id="btnAddNewPerson" name="btnAddNewPerson" type="button" role="button" ng-click="addNewPerson($event)">Add New<span class="glyphicon glyphicon-plus color-green pad-10-lt"></span></button>',
sortable: true,
pageable: {
previousNext: true,
numeric: true,
messages: {
empty: "No items",
display: "{2} items",
pageSizes: true
}
},
height: 400,
columns: [
{
hidden: true,
field: "id"
}, {
field: "person1",
title: "Person 1",
width: "200px",
type: "string",
validation: {
required: true
}
}, {
field: "policyStatusID",
title: "Policy Status",
width: "75px",
editor: function (container, options) {
var input = $('<input id="ctrlPolicyStatus" name="policyStatusID" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '" k-ng-model="policyStatusID">');
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataSource: dropDownDataSource,
valuePrimitive: true
}).appendTo(container);
},
validation: {
required: true
}
},
{
command:
[{ text: "customDelete", className: "btn-person btn-person-Delete", click: deletePersonData },
{ text: "customArchive", className: "btn-person btn-person-archive", click: archivePersonData },
{ text: "customUnarchive", className: "btn-person btn-person-unarchive", click: unArchivePersonData }],
title: "",
width: "40px"
}
],
editable: true
};
Following is my HTML code:
<kendo-grid k-options="mainGridOptions" id="grdKeyPeople"
k-data-source="keyPersonList"
k-on-change="selected = data">
</kendo-grid>
Thank you for your help in advance.
The issue was, I had set the data source both in the mainGridOptions and also in the directive k-data-source. I removed the directive k-data-source and it worked for me.
The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>
Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo
I have the following code:
$("#grid").kendoGrid({
dataSource: {
type: "odata",
data: scannedResult.targetList,
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status"
}, {
field: "comment",
title: "comment"
}]
});
creating a kendo simple grid. for detail here is my plunker.
now the field status can be 1 of 3 values: passed, failed, skipped. I would like that the statuscolumn will show an icon instead of the value. While the code for that is rather simple, i do not know how to make the column a custom column.
Is there a way to make a column a custom column?
You should use a template definition. Something like:
Define the template.
<script id="status-template" type="text/kendo-templ">
# if (data.status === 1) { #
<span>Status1</span>
# } else if (data.status === 2) { #
<span>Status 2</span>
# } else { #
<span>Status 3</span>
# } #
</script>
Reference the template from the column definition
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: $("#status-template").html()
}, {
field: "comment",
title: "comment"
}]
See it running here: http://jsfiddle.net/OnaBai/5x8wt0f7/
Obviously, the template can emit any HTML code, it might be links, images...
This has already been answered, but I want to show how I'd write this if people are confused when linking to jQuery selector.
// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}
// Column definitions for grid
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: statusTemplate
}, {
field: "comment",
title: "comment"
}]
http://jsfiddle.net/dentedio/hdokxme9/1/
$('#usersGrid').kendoGrid({
columns: [
{ field: "UserName", title: "Display name", width: "140px" },
{ field: "Unit", title: "Unit", width: "140px" },
{ field: "Email", title: "E-mail", width: "140px" },
{ field: "Indienst", title: "Indienst", width: "140px" },
{ field: "Uitdienst", title: "Uitdienst", width: "140px" },
{ field: "Roles", title: "Roles" },
{ command: { text: "edit", click: openEdit } }
],
editable: {
update: true,
create: true
},
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Administration/GetUserList",
dataType: "json",
data: {
indienst: function () {
return indienst;
}
},
success: function (data) {
$("#usersGrid").data('kendoGrid').dataSource.data(data);
}
});
},
update: function (options) {
alert('not firing');
}
}
},
schema: {
model: {
id: "UserId",
fields: {
UserId: { editable: false, type: "int" },
UserName: { type: "string" },
Unit: { editable: false, type: "string" },
Email: { type: "string" },
Indienst: { type: "string" },
Uitdienst: { type: "string" },
Roles: { editable: false, type: "string" }
}
}
}
});
This is my kendo UI grid. It's reading fine, but the problem is that it wont fire the datasource.transport.update call when I change a grid cell inline. Why won't it?
I've made sure I specified an id column and that the transport CRUD functions are all of the same type (functions here, not urls), but I've tried to have it work with urls as well. Only transport.read will fire...
when I check the console logs there are no errors given.
So I want to edit it inline. Click on a cell on the grid, and change the value, when u leave focus of the cell I want dataSource.transport.update() to run, or any function at all.
http://jsfiddle.net/8tzgc/135/
Edit:
After doing some research on the docs I've found out about the change() event. By checking what kind of change event it is we can figure out if its an update event and run the function we want ourselves. Here's my updated jsfiddle:
http://jsfiddle.net/8tzgc/140/
If anyone figures out a way that does not require calling the update function yourself, then I'm all ears.
To edit inline, you can just leverage the example from the telerik demo site.
Change your command column to:
{ command: ["edit", "destroy"], title: " ", width: "160px" }
And change your editable specification to "inline":
editable: "inline",
I have edited your fiddle with the solution: http://jsfiddle.net/8tzgc/136/
In order to fully flesh this out, you would have to provide implementation for the associated methods from the command, such as update, create, etc... You can see those examples in the telerik demo.
If you would like to do cell-click editing with custom editors (dropdowns, etc), here is another telerik example.
There is also this example of batch editing.
try to change
command: { text: "edit", click: openEdit }
to
command: ["edit"]
If you are using editable:popup then try the following:
command: [
{ name: "view", template: "<a class='k-button k-button-icontext selectDiscountPercentage' title='Discount Percentage' ><i class='k-icon k-i-view'></i></a>", text: "", },
{ name: "edit", text: "" },
{ name: "destroy", text: " "}
], title: " ", width: "160px"
The trick here is to give empty space(" ") to the text key inside command array