Kendo ui grid - checkbox,modal or radio button on specific cell - javascript

need help.
Kendo ui Grid
Kendo grid code:
$('#triggerParameterData').kendoGrid({
columns: [{field: "name"},{field: "value"},{field: "description"}],
selectable: "multiple,row",
pageable: false,
scrollable: false,
editable: true,
dataSource: {
data: popup, schema: {
model: {
fields: {
name: { editable: false },
description: { editable: false },
}
}
}
},
})
I want to make 2nd row value cell into a check box. if anyone have solution please share.
special thanks.

Reference: Kendo Grid Columns.Template
.....
columns: [
{field: "name"},
{field: "value", template: '<input type="checkbox" value="#: value #">'},
{field: "description"}
]
......

Use this fiddle
JS:
var popup = [ { value:true, name: "Enos", description: "Es" },
{ value:true,name: "Ray", description: "Rs" },
{ value:true,name: "Justice", description: "Js" },
{ value:true,name: "RR", description: "ESW" },
{ value:true,name: "Gop", description: "Gp" },
{ value:true,name: "DS", description: "JN" },
{ value:true,name: "Raven", description: "Rv" },
{ value:true,name: "FD", description: "FDGH" },
{ value:true,name: "Andrew", description: "Ar" },
{ value:true,name: "DDD", description: "GFG" },
{ value:true,name: "Shayne", description: "S" },
{ value:true,name: "YYY", description: "GHFGH" },
{ value:true,name: "Walter", description: "W" },
{ value:true,name: "EEE", description: "LUIO" },
{ value:true,name: "ZKZG", description: "RD" },
{ value:true,name: "JJJ", description: "FGJHGH" }];
$(document).ready(function () {
$('#triggerParameterData').kendoGrid({
columns: [{ field: "name" },
{ field: "value", template: '<input type="checkbox" value="#: value #">' },
{ field: "description" }],
selectable: "multiple,row",
pageable: false,
scrollable: false,
editable: true,
dataSource: {
data: popup, schema: {
model: {
fields: {
name: { editable: false },
value: { editable: false },
description: { editable: false },
}
}
}
},
})
});

Related

Kendo ui grid Fiter mode:row

I'm using filter column mode:row in my grid. For my numeric column the menu is showned as below
What i need is a filter in this column as the filter that is used in menu mode
Here is a part of my code
schema: {
data: "results",
total: "total",
model: {
id: "accountingTransactionKey",
fields: {
accountingTransactionKey: { editable: false, nullable: false },
date: { editable: false, nullable: false },
organization: { editable: false, nullable: false },
accountDebit: { editable: false, nullable: true },
costArticleUsed: { editable: false, nullable: true },
accountCredit: { editable: false, nullable: true },
isIntraGroupPartnerOrganization: { editable: false, nullable: true, type: "number" },
currency: { editable: false, nullable: true },
sum: { editable: false, nullable: true, type: "number"},...
...{
field: "sum",
title: "Сумма",
width: "150px",
//format: "{0:n2}",
locked: true,
filterable:
{
multi: true,
cell:
{
operator: "eq",
suggestionOperator: "eq",
showOperators: true
}
},
template: function (dataItem) { return numberWithSpaces(dataItem.sum.toFixed(2)) },
footerTemplate: "<b>" +"#: numberWithSpaces(sum.toFixed(2)) #"+"</b>"
},
There is a soltion for my request?
Thank you
I have tried the following script and it gives me a range filter by using the property extra.
<script>
$(document).ready(function() {
var griddata = createRandomData(50);
$("#grid").kendoGrid({
dataSource: {
data: griddata,
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: false,
},
{
field: "Title",
filterable: false,
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: false,
},
{
field: "Age",
width: 100,
filterable:
{
extra: true
}
}
]
});
});
</script>
If you want to create a customized range filter.
columns: [
{
field: "Age",
filterable: {
cell: { template: betweenAgeFilter }
}
}
]
function betweenAgeFilter(args) {
var filterCell = args.element.parents(".k-filtercell");
filterCell.empty();
filterCell.html('<span style="justify-content:center;"> <span>From:</span><input id="startAge"/><span>To:</span><input id="endAge"/></span>');
$("#startAge").kendoNumericTextBox({
change: function (e) {
var startAge = e.sender.value();
var endAge = $("#endAge").data("kendoNumericTextBox").value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
$("#endAge").kendoNumericTextBox({
change: function (e) {
var startAge = $("#startAge").data("kendoNumericTextBox").value();
var endAge = e.sender.value();
var dataSource = $("#grid").data("kendoGrid").dataSource;
if (startAge & endAge) {
var filter = { logic: "and", filters: [] };
filter.filters.push({ field: "Age", operator: "gte", value: startAge });
filter.filters.push({ field: "Age", operator: "lte", value: endAge });
dataSource.filter(filter);
}
}
});
}

dropdownlist showing as undefined in grid

I am trying to add dropdown's by way of using the custom editor in my grid, and the dropdowns are showing as undefined
When I click on the undefined, the dropdown appears, and I can select a value from it, but once I click on another undefined dropdown, then it goes back to being undefined, but doesn't lose the selected value.
I have no idea why the dropdowns are showing as undefined and won't keep its selected value visible
var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
const DEFAULT_AREA_NAME = "1";
$(document).ready(function() {
LoadCatalogsGrid();
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
template: '#=Catalog.CatalogName#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { editable: false },
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function catalogDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Catalog",
dataValueField: "CatalogID",
dataSource: {
data: datasource
}
});
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>
That's because you don't have an object like Catalog.CatalogName. Catalog in your data is just an empty string. You have to check if the property is valid to be shown in the template(e.g. template: '#=(data.CatalogDescription || "")#') and after changing the dropdown value, you have to set the value to the model(as well it's description):
change: function() {
options.model[options.field] = this.select();
options.model[options.field + 'Description'] = this.text();
}
Take a look at your updated snippet below:
var datasource = [{
"CatalogID": 1,
"Catalog": "Free"
},
{
"CatalogID": 2,
"Catalog": "Discount"
},
{
"CatalogID": 3,
"Catalog": "Regular"
},
{
"CatalogID": 4,
"Catalog": "Holiday"
}
];
const DEFAULT_AREA_NAME = "1";
$(document).ready(function() {
LoadCatalogsGrid();
});
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
}, {
title: "Catalog",
field: "Catalog",
template: '#=(data.CatalogDescription || "")#',
width: "200px",
editable: false,
editor: catalogDropDownEditor
}],
editable: {
mode: "incell",
confirmation: false
},
dataSource: {
data: [{
RoomName: "Living Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Kitchen",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Master Bedroom",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Mud Room",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
},
{
RoomName: "Garage",
AreaName: DEFAULT_AREA_NAME,
Catalog: ""
}
],
//schema: {
// model: {
// fields: {
// RoomName: { nullable: true, editable: true },
// AreaName: { nullable: true, editable: true },
// Catalog: { editable: false },
// }
// }
//}
},
dataBound: function(e) {
}
});
}
function catalogDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Catalog",
dataValueField: "CatalogID",
value: options.model[options.field],
dataSource: {
data: datasource
},
change: function() {
options.model[options.field] = this.select();
options.model[options.field + 'Description'] = this.text();
}
});
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="GridWrapper">
<div id="Grid">
</div>
</div>

Kendo UI Gantt chart task lable change

I am trying to change Kendo UI Gantt title. i found one demo code, but it was not working
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}],
messages: {
views: {
editor: {
editorTitle:"Edit Task"
}
}
}
});
</script>
Is it possible to change the label on Gantt bars ?
I want some info on left side tree and other info on bars is it possible ?
parent child relation is not retaining if i add gantt columns other than title.
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
descr : { from : "DESCR", type: "string"},
orderId: { from: "ORDERID", type: "number", validation: { required: true } },
parentId: { from: "PARENTID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "START", type: "date" },
end: { from: "END", type: "date" },
Title: { from: "TITLE", defaultValue: "", type: "string" },
percentComplete: { from: "PERCENTCOMPLETE", type: "number" },
summary: { from: "SUMMARY", type: "boolean" },
expanded: { from: "EXPANDED", type: "boolean", defaultValue: true }
}
}
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "descr", title: "Descr", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
var gantt1 = $("#gantt1").kendoGantt({
dataSource: tasksDataSource1,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "title", title: " ", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
Try starting uppercase:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00")
}],
EDIT:
Answering to your comment:
Define columns definition:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00"),
Description: "Some longer description"
}],
columns: [
{ field: "ID", title: "ID", width: 60 },
{ field: "Title", title: "Title", editable: true, sortable: true },
{ field: "Description", title: "Description", width: 100, editable: true, sortable: true }
],

Saving column with custom editor gives nested column array

I am trying to use a dropdown select as an editor for one of my columns, defined as:
function phoneTypeEditor(container, options) {
$('<input required name="' + options.field + '" data-text-field="typeName" data-value-field="typeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: [
{
"typeName": "Work",
"typeId": 1
},
{
"typeName": "Branch",
"typeId": 2
},
{
"typeName": "Home",
"typeId": 3
},
{
"typeName": "Mobile",
"typeId": 4
}
],
close: function()
{
}
});
}
In my model I have:
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
type: {
type: 'string',
editable: true,
defaultValue: {
typeId: 1,
typeName: "Work"
},
},
tel: {
type: 'string',
editable: true
}
}
}
And finally my column:
{
field: 'typeId',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
template: '#=typeName#'
},
But when I try to create a row in my grid my post data looks like this:
phoneId:0
type[typeId]:1
type[typeName]:Work
tel:
typeName:
contactId:97558
When it should be:
phoneId:0
typeId:1
typeName:Work
tel:
typeName:
contactId:97558
And I get a new row in my grid that is thin and empty.
How can I get this to work properly?
PS If I don't have:
typeName: {
type: 'string'
}
In my model I get an error saying typeName is not defined.
I now have:
model: {
id: 'phoneId',
fields: {
phoneId: {
type: 'number'
},
typeId: {
type: 'number',
defaultValue: 1
},
tel: {
type: 'string',
editable: true
},
typeName: {
type: 'string',
defaultValue: 'Work',
}
}
}
And...
columns: [
{
field: 'phoneId',
headerTemplate: '<b>Phone Id</b>',
filterable: false,
width: '50px',
hidden: true
},
{
field: 'typeId',
headerTemplate: '<b>Type</b>',
filterable: false,
editor: phoneTypeEditor,
width: '80px',
template: '#=typeName#'
},
{
field: 'tel',
headerTemplate: '<b>Number</b>',
filterable: false,
}
],
But now when I change the option in the dropdown, it appears that you haven't changed it but the actualy number id of the item has changed, just not the text. How do I make it so both the typeId and typeName change?

SlickGrid not populating properly from Ajax call returning JSON

I have a slickgird which saves to the database and the calculatons work.
however my issue is when returning data from the database to populate a slickgrid. I am calling an Ajax query which returns the data fine in the following format,
[
{
'HeaderService': 'ServicerReview',
'Service': '',
'Numberof': '',
'at': '',
'Charged': '',
'Total': '',
'Total2': '',
'Discount': '',
'FFO': '',
'EC': '',
'ECat': '',
'ECCost': '',
'ECCostTotal': '',
'ECCostTotal2': '',
'Margin': ''
},
{
'HeaderService': '',
'Service': 'SeniorReviewer',
'Numberof': '1',
'at': '#',
'Charged': '£600.00',
'Total': '£600.00',
'Total2': '',
'Discount': '',
'FFO': '',
'EC': '1',
'ECat': '',
'ECCost': '£350.00',
'ECCostTotal': '£350.00',
'ECCostTotal2': '',
'Margin': ''
},
.. and so on.
]
(. being other records of the same structure). which populates a variable called currentData
Then I decorate the grid by
var columns = [{ id: "HeaderService", name: "Category", field: "HeaderService", options: serviceHeaders, editor: Slick.Editors.SelectOption, width: 200 },
{ id: "Service", name: "Service", field: "Service", options: serviceActuals, editor: Slick.Editors.SelectOption, width: 150 },
{ id: "Numberof", name: "No", field: "Numberof", editor: Slick.Editors.Text, width: 50 },
{ id: "at", name: "", field: "at", width: 30 },
{ id: "Charged", name: "Per Unit", field: "Charged", editor: Slick.Editors.Text },
{ id: "Total", name: "Total", field: "Total", editor: Slick.Editors.Text },
{ id: "Total2", name: "Sub Total", field: "Total2", editor: Slick.Editors.Text },
{ id: "Discount", name: "Discount", field: "Discount", options: ",Yes", editor: Slick.Editors.SelectOption, cssClass: "greenbackground", width: 50 },
{ id: "FFO", name: "Fixed Fee", field: "FFO", editor: Slick.Editors.Text, cssClass: "greenbackground" },
{ id: "EC", name: "EC", field: "EC", editor: Slick.Editors.Text, width: 50 },
{ id: "ECat", name: "Cat", field: "ECat", editor: Slick.Editors.Text, width: 30 },
{ id: "ECCost", name: "Cost", field: "ECCost", editor: Slick.Editors.Text },
{ id: "ECCostTotal", name: "CostTotal", field: "ECCostTotal", editor: Slick.Editors.Text },
{ id: "ECCostTotal2", name: "CostTotal2", field: "ECCostTotal2", editor: Slick.Editors.Text },
{ id: "Margin", name: "Margin", field: "Margin", editor: Slick.Editors.Text }, ];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
editable: true,
cellHighlightCssClass: "changed"
};
var currentData;
$(function () {
var json = null;
$.ajax({
async: false,
global: false,
type: 'GET',
url: '#Url.Action("GetDetailsforQuote")',
dataType: "json",
success: function (data) {
currentData = "[" + data.toString() + "]";
debugger;
return data;
}
});
data = currentData;
alert(data);
grid = new Slick.Grid("#myServicesGrid", data, columns, options);
But the grid is then displayed on the screen, the columns are fine but there are loads of empty rows, with no data(the data should only have 6 records). any ideas to what I am doing wrong?
Got it... had to add
data = eval("[" + currentData + "]");
grid = new Slick.Grid("#myServicesGrid", data, columns, options);
thanks for looking.

Categories