or
0 answers
119 views
I have some MultiColumnCombobox with over 100 items. But when i want to show all (empty input suggestion) it only shows 100 items. Can I show all items in popup suggestion
Phuong
Top achievements
Rank 1
Rank 1
asked
on
13 Oct 2021
1 answer
734 views
Hello, I have the following example. The problem is that I select Germany (row 2) and then click on refresh, Germany is still selected but if I press shift to add another row to my selection (for example Belgium in row 4) the selection brokes and is selecting from row 1 until row 4. So my question is if there is a way to fix this kind of bug?
This is the code that I use:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function () {
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() => {
$("#grid").getKendoGrid().dataSource.read();
})
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
e.sender.select(itemsToSelect);
}
});
});
</script>
</body>
</html>
Georgi Denchev
Telerik team
answered
on
12 Oct 2021
1 answer
836 views
I am trying to fill in kendoForm elements with data retrieved from an API. Is it possible to use a observable object and bind to formData? How can this be done otherwise?
Martin
Telerik team
answered
on
12 Oct 2021
1 answer
109 views
Is the capability there for the Treeview control to bind to a network share location (\\server\sharedfolder\subfolder), and then be able to make a selection and return the filename to be passed to another operation?
Ianko
Telerik team
answered
on
12 Oct 2021
1 answer
197 views
I need to implement cell editing in Kendo Grid and save the cell value like this. Is there any way to do this? The given Inline InCell editing mode doesn't solve my purpose. please find the attached screenshot.
Nikolay
Telerik team
answered
on
11 Oct 2021
3 answers
142 views
Hi,
I recently noticed quite a few server requests being returned as conflicting when items in the gantt timeline are reordered.
A console output in the parameterMap function shows, that for every item affected by reordering 2 update requests are prepared and sent to the server.
The parameterMap function offers no way of cancelling a request from being executed since this only exists to transform data.
This is not specific to our implementation and can be reproduced in a dojo with the current Kendo version (2021.2.616): https://dojo.telerik.com/AGodEBIb
Is there a specific reason behind this?
Not only seems doubling the number of requests inefficent to me. Sending a second update request before the first one has even been resolved by the server, might lead to issues for other users as well.
In the meantime thanks in advance for any tips how I can prevent the second update from being sent to the server.
Neli
Telerik team
answered
on
11 Oct 2021
1 answer
793 views
We currently using the Grid with the standard filtering options
However, this only allows two conditions.
Can we extend the filtering functionality of the Grid to support multiple and / or conditions? Something akin to Kendo UI Filter Widget
1 answer
643 views
Hi,
I am trying to include a dropdownlist in some cells, and a special template for the fields, but that made my ADD-New-Record to stop working in all situations (inline - incell - popup) I tried them all but the button looks like it is not firing when I click it.
So I start searching the whole web to find the problem but could'nt.
endly I figured out that when I keep only one template in my grid then the create button is working fine, but when I have more than one it stops.
Another problem I am facing is, the delete and edit functions work perfectly, but when I try to post to the db it looks fine and I can see in dev-tools a response 200/green, but nothing is saved to the db, and after a lot of tries I just found that when I am choosing any from the drop down on the new record it takes the result as an object, but if I edit a not empty cell from the dropdown list it takes it as a number as supposed.
So may can somebody help me to figure it out?
Here is my script.js:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: "fun.php?action=api" },
create: { url: "insert.php?action=insert_channel", type: "POST",
complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
update: { url: "update.php?action=upd", type: "POST",
complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } },
destroy: { url: "destroy.php?action=del_channel",type: "POST",
complete: function(e) {$("#grid").data("kendoGrid").dataSource.read(); } }
},
schema: {
data:"data",
model: {
id:"id",
fields: {
nr: { type:"string", editable:false },
name: { type:"string" , validation : { required : true }},
pic: { type:"string", editable:false, validation : { required : true } },
link: { type:"string", validation : { required : true } },
group: { type:"int", validation : { required : true } },
lang: { type:"int", validation : { required : true } },
status: { type:"int", validation : { required : true } },
up: { type:"string" }
}
}
},
pageSize: 10
},
height:750,
scrollable: true,
sortable: true,
pageable: true,
groupable: {
messages: {
empty: "Drag any column name here to group your channels"
}
},
editable: {
mode: "popup",
update: true,
destroy: true,
confirmation: "Are you sure you want to remove this Channel?" //text for the confirmation message
},
columns: [
{
template: "<center><div class='#: data.class #'>#: nr #</div></center>",
field: "nr",
title: "Nr",
width: 50
},
{
template: "<img width='64' height='64' style='vertical-align:middle; border-radius: 15%;' src='pics/#: data.pic #' alt=''> <span class='#: data.class #'>#: data.pic # </span>",
field: "pic",
title: "pic"
},
{
template: "<div class='#: data.class #'>#: name #</div>",
field: "name",
title: "name",
width: 100
},
{
template: "<div class='#: data.class #'>#: link #",
field: "link",
title:"link",
width:650
},
{
template: "<div class='#: data.class #'>#: group #</div>",
field: "group",
title:"group",
editor:groupEditor
},
{
template: "<div class='#: data.class #'>#: lang #</div>",
field: "lang",
title: "lang",
editor:langEditor
},
{
template: "<div class='#: data.class #'>#: status #</div>",
field: "status",
title: "status",
editor:statusEditor
//template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
},
// adding command in the columns, name - the command name, text - text to be set on the button
{ command: [
{
name: "edit",
text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
edit: "",
update: "Update",
cancel: "Cancel"
}
},
{ name: "destroy", text: "" } // sets the text of the "Delete" button
],
// sets the title and the width of the commands column
title: "Action",
width: "300px"
}
],
toolbar: [
//name - name of the available commands, text - text to be set on the button
{ name: "create", text: "New" },
{ name: "save", text: "Save" },
{ name: "cancel", text: "Cancel" },
{ name: "excel", text: "Export to Excel" }
],
// filter menu settings
filterable: {
name: "FilterMenu",
extra: true, // turns on/off the second filter option
messages: {
info: "Custom header text:", // sets the text on top of the filter menu
filter: "CustomFilter", // sets the text for the "Filter" button
clear: "CustomClear", // sets the text for the "Clear" button
// when filtering boolean numbers
isTrue: "custom is true", // sets the text for "isTrue" radio button
isFalse: "custom is false", // sets the text for "isFalse" radio button
//changes the text of the "And" and "Or" of the filter menu
and: "CustomAnd",
or: "CustomOr"
},
operators: {
//filter menu for "string" type columns
string: {
eq: "Custom Equal to",
neq: "Custom Not equal to",
startswith: "Custom Starts with",
contains: "Custom Contains",
endswith: "Custom Ends with"
},
//filter menu for "number" type columns
number: {
eq: "Custom Equal to",
neq: "Custom Not equal to",
gte: "Custom Is greater than or equal to",
gt: "Custom Is greater than",
lte: "Custom Is less than or equal to",
lt: "Custom Is less than"
},
//filter menu for "date" type columns
date: {
eq: "Custom Equal to",
neq: "Custom Not equal to",
gte: "Custom Is after or equal to",
gt: "Custom Is after",
lte: "Custom Is before or equal to",
lt: "Custom Is before"
}
}
}
});
/* ***********************group**************************** */
function groupEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Group...",
dataTextField: "group",
dataValueField: "id",
dataSource: {
transport: {
read: { url: "fun.php?action=cat_channels" }
},
schema: {
data: "data",
model: { id: "id",
fields: {group: {editable: false } }
}
},
},
});
}
/* ***********************language**************************** */
function langEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Language...",
dataTextField: "lang",
dataValueField: "id",
dataSource: {
transport: {
read: { url: "fun.php?action=lang_channels" }
},
schema: {
data: "data",
model: { id: "id",
fields: {lang: {editable: false } }
}
},
},
});
}
/* ***********************status**************************** */
function statusEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: "Status...",
dataTextField: "state",
dataValueField: "id",
dataSource: {
transport: {
read: { url: "fun.php?action=state_channels" }
},
schema: {
data: "data",
model: { id: "id",
fields: {state: {editable: false } }
}
},
},
});
}
});Here is insert.php
<?php
include 'config.php';
/* **************************************insert channels*************************** */
function insert_channel() {
global $conn;
if(isset($_POST['submit']))
{
$name =htmlspecialchars($_POST['name'] ?? '');
$pic =htmlspecialchars($_POST['pic'] ?? '');
$link =htmlspecialchars($_POST['link'] ?? '');
$group =htmlspecialchars($_POST['group'] ?? '');
$lang =htmlspecialchars($_POST['lang'] ?? '');
$status =htmlspecialchars($_POST['status'] ?? '');
$sql="INSERT INTO channels (
name,
pic,
link,
cat_id,
language_id,
status
)
VALUES
(
'$name',
'$pic',
'$link',
'$group',
'$lang',
'$status'
)";
$query=mysqli_query($conn, $sql);
if ($sql) {
echo json_encode($sql);
}
else {
header("HTTP/1.1 500 Internal Server Error");
}
}
}
/* -------------------------------switch($_GET['action'])| page.php?action=x ------------------------------------------- */
switch($_GET['action'])
{
case 'insert_channel': insert_channel();
break;
default :
echo 'Please check the parameters';
}
Neli
Telerik team
answered
on
07 Oct 2021
1 answer
411 views
Hi,
Forgive me if this has been answered before, but I haven't been able to find it.
What would be the reasons to chose LESS over SASS or vice-versa when developing with Kendo UI for jQuery?
I am rather new at this, so the only obvious reason to chose LESS that I have found is that it has more existing themes (currently 16) than SASS (4). This should make it easier to find a LESS theme that matches your requirements and modify for final touches.
What other differences might there be? (In terms of using it with Kendo UI for jQuery, I am not talking about a comparison LESS vs SASS in general)
Thanks,
Fredrik
Dimitar
Telerik team
answered
on
07 Oct 2021
1 answer
680 views
We have defined a new data source which executes a $.ajax to retrieve some data from a remote server.
return new kendo.data.DataSource({
pageSize: 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
type: "json",
sort: {
field: "name",
dir: "asc"
},
transport: {
read: function (options) {}....Now lets consider the following scenario:
The read function is triggered and the call is made to the server but the server is being slow. In the meantime a new read request needs to be made and we want to abort the current read request and issue a new one.
Using vanilla Jquery we just do something like
myAjaxRequest.abort()
However, I can not seem to find a similar method to abort a read request (or any request) in the Kendo Data Source Object.
Are you able to offer a solution?
Dimitar
Telerik team
answered
on
06 Oct 2021
