Questions on Kendo UI for jQuery Forum

5 answers

314 views

Reordering by something other than header

Hi there,

Is there any provision for hiding the header but yet still being able to reorder by dragging the content around?

Many thanks

Paul

TileLayout

answered on 12 Apr 2021

1 answer

122 views

The first japanese character was disabled with Spreadsheet when using Japanese font

Now, I am doing with the Spreadsheet. I have a problem.
When I change font to Japanese, and then I enter characters to cell.
The first character was disabled, other characters displayed normally.
It only cause with Japanese font.
Please help me about this problem

Spreadsheet

answered on 12 Apr 2021

1 answer

273 views

AngularJs Kendo-grid kendo-drop-down-list inside headerTemplate iterate data from template

kendo-ui: ver. 2018.2.516

I want to select value in headerTemplate then iterate throught all data in templates and if select in template contains same value change it. I can’t find any information how to do it

Could someone help me?

columns: [{
    title: "task",
    headerTemplate:
'<select kendo-drop-down-list k-options="$ctrl.multiSelect(dataItem)"></select>',
    field: "task_id",
template:
'<select kendo-drop-down-list k-options="$ctrl.templateSelect(dataItem)"></select>',
    width: "240px"
}

Grid

answered on 12 Apr 2021

16 answers

7.7K+ views

[Solved] Refresh Grid After DataSource Sync

I'm working on an application that will use the Grid to display data and allow a user to modify the data using CRUD methods within the grid. It is connected to a DataSource that sends the data to another page to perform the actual SQL functions.

I was curious if there was some sort of callback event, specifically for Creating and Updating, that would allow the Grid to be refreshed after a transaction, ensuring data integrity?

Possible scenario: a user creates a row within the grid, and saves the changes. The row is created without an ID, as one is assigned after the SQL statement has executed. If the user then makes another change to that row, it has no ID to use to perform the SQL update correctly.

Any help would be much appreciated!

Grid

answered on 12 Apr 2021

2 answers

194 views

Font Awesome Pro Icons in Diagram

Anyone by chance have any luck implementing fontawesome pro icons in a diagram? I was shown how to use the fontawesome free library icons like this:

g.append(new dataviz.diagram.TextBlock({

text: String.fromCharCode(0xf005) + " " + dataItem.firstName + " " + dataItem.lastName,

x: 85,

y: 20,

fill: "#fff",

fontFamily: "FontAwesome"

}));

... but this doesn't work:

g.append(new dataviz.diagram.TextBlock({

text: String.fromCharCode(0xf82c) + " " + dataItem.firstName + " " + dataItem.lastName,

x: 85,

y: 20,

fill: "#fff",

fontFamily: "FontAwesome"

}));

FontAwesome Icon Cheatsheet: https://fontawesome.com/cheatsheet/pro/regular

Diagram

answered on 10 Apr 2021

4 answers

1.8K+ views

How to get value id from dataSource by row

Help me code How to get value id from dataSource by row and change to current value default (1)

in line: var date = dataSource.get(1);
console.log(date.ProductName)

My full source:

<div id="grid"></div>

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
selectable: true,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
edit: function () {

var date = dataSource.get(1);
console.log(date.ProductName)

}
});
});
</script>

Grid

answered on 09 Apr 2021

3 answers

139 views

Iam using 2015 Kendo version

Tile layout is not supporting in 2015 version. can you pls help to add Function which supports only Kendo Tile layout. when i add 2021 version entire design is getting impacted .so i will add only the supporting version of Tile Layout

TileLayout

answered on 09 Apr 2021

3 answers

226 views

spreadsheet scrolls page on load

Hi,

I'm using Kendo spreadsheet as part of my page and its placed at the bottom of the page. Whenever we load the spreadsheet the page automatically scrolls to bottom. Please find the sample below. Is there a way to disable scroll ?

https://dojo.telerik.com/UCoVIPey

Spreadsheet

answered on 09 Apr 2021

2 answers

1.1K+ views

Kendo grid dataSource, How do I get the corresponding id instead of the default 1

I want to use dataSource.get () to get the corresponding id where the default id number = 1. Everyone help me, please.

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css" />

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>


<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>



</head>
<body>
<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",

edit: function (e) {
var id = e.sender.dataItem(e.container).ProductID;
var data = dataSource.get(1); //How do I get the corresponding id instead of the default 1
console.log(data.ProductName);
}


});
});

function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
</script>
</div>



</body>
</html>