Questions on Kendo UI for jQuery Forum

3 answers

243 views

[Solved] Context menu only shows first letters of the word

I'm trying to put a context menu on a treeview. Which is working.But when I use the same code to target another css class (targeting <a> tags it's only showing the first letters of each word)

TreeView

answered on 15 May 2020

9 answers

347 views

[Solved] Wrong row expanded when add/editing record in sub grid

Hello,

I tried to add/edit data in dynamically added grids of a main grid. See code below. When I added a new record in sub grid, the selected row in parent grid was collapsed and the first row was expanded. You can see screen captures in attached pdf file.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//Lib/Kendo/css/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="/_content/Plat.Core.UI.RazorComponent//lib/kendo/css/kendo.bootstrap.min.css">
<script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-3.3.1.js"></script>
<script src="/_content/Plat.Core.UI.RazorComponent/Lib/jquery/jquery-migrate-3.0.1.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/Lib/KendoNew/js/kendo.all.min.js"></script>

<title></title>

</head>
<body>
<div id="divMain">
<div id="dsgrid" class="grid"
data-role="grid"
data-sortable="true"
data-toolbar="['create']"
data-detail-init="viewModel.dsgrid_detailInit"
data-bind="source: dsSource, events: { dataBound: ds_dataBound }"
data-editable='{"mode": "popup" }'
data-columns='[
{"field":"Name","title":"Name"},
{"field":"Title","title":"Title"},
{"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"}
]'
data-detail-template='dssubgrid'
data-scrollable="false">

</div>
</div>

<script>

var viewModel;
$(document).ready(function () {
var reobj = {};
reobj.Sources = [];

viewModel = kendo.observable({
dsSource: new kendo.data.DataSource({
data: reobj.Sources,
schema: {
model: {
id: "Name",
fields: {
Name: { validation: { required: true } },
Title: { validation: { required: true } },
TableName: { editable: true },
GetDataUrl: { editable: true },
TextField: { editable: true },
ValueField: { editable: true }
}
}
}
}),

dsgrid_detailInit: function (e) {
if (!e.data.Values) e.data.Values = [];
var ds = new kendo.data.DataSource({
data: e.data.Values,
schema: {
model: {
id: "Text",
fields: {
Text: { editable: true, validation: { required: true } },
Value: { editable: true, validation: { required: true } }
}
}
}
});
e.detailRow.find(".grid").kendoGrid({
dataSource: ds,
editable: "popup",
toolbar: ['create'],
columns: [{
title: "Value",
field: "Value"
}, {
title: "Text",
field: "Text"
}, {
command: ["edit", "destroy"]
}
]
});
},

ds_dataBound: function (e) {
e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
},

});

kendo.bind($("#divMain"), viewModel);
});

</script>
<script id="dssubgrid" type="text/x-kendo-template">
<div class='grid'></div>
</script>
</body>
</html>

How can I solve this issue?

Thanks

Lei

Grid

answered on 14 May 2020

1 answer

197 views

Make Event Text Selectable Via Mouse to Allow Copy

I have a scheduler and my users are asking to be able to copy and paste the text in the events via mouse highlight, right-click, copy, but the scheduler does not allow this. I have added a popup view for them and a button that copies all the text in the event to the clipboard, but they still want to be able to copy-paste just portions of the event text. Is there a way to make the text selectable/highlight-able?

Scheduler

answered on 14 May 2020

5 answers

370 views

[Solved] Cannot completely bind DataSource to ListBox via MVVM

Hi Team,

As my question says, Im having trouble with a DataSource bound to a ListBox. Take a look at my Dojo here, https://dojo.telerik.com/ipIfAROK.
I have bound a DS to the listbox, and it displays the DS content, great. The content is (suppose to be) linked to the enabled state of the ActionButton, no content = disabled button. however if i removed the listbox items, the button remains enabled.

To Replicate:
1) Click the "Log List" button and check your console, there are 2 items in the viewModel DS
2) Remove them and click the Log button again. There are STILL 2 items in the DS, but they've been removed from the listbox.

Please advise on how i can link the enabed state of a button to the content of the list box, preferably using the View Model. I hope this isnt something simple I've missed.

THanks,
Grant

ListBox

answered on 14 May 2020

3 answers

279 views

[Solved] Is it possible to align entire table in editor?

Are there any current options to align an entire table in the editor? The WPF editor has this feature in the table wizard, but I don't see any way to do this in Kendo. If I cannot align the entire table with current tools, do you think it would be easy enough to create a custom tool to do this?

Editor

answered on 14 May 2020

6 answers

96 views

this._size is undefined error

I'm forced to upgrade jQuery to 3.4.1 because of security implications, and now I get an error working with a bubble layer. Using jQuery 1.12.4 the error does not occur.

KendoUI 2020.1.114 is listed as compatible with 3.4.1. I am using 2020.1.406 so I just assumed it is compatible. This is part of a MVC application.

I've attached the stack trace from the debugger console. Any help is greatly appreciated since I am forbidden to use any earlier versions of jQuery.

Thanks!

Kevin

Map

answered on 14 May 2020

1 answer

544 views

Close button on Kendo window is incorrectly aligned

The close x on all of my kendo windows is not correctly aligned with the title.

See screenshot of example and computed css at at https://imgur.com/a/unB1XOs

All of my css is loaded here:

<script src="~/lib/jquery/dist/jquery.js"></script>

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

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

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

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

<link rel="stylesheet" href="~/lib/sweetalert2/dist/sweetalert2.css" />

<link rel="stylesheet" href="~/lib/toastr.js/toastr.min.css" />

<link rel="stylesheet" href="~/lib/kendo-ui/css/web/kendo.common-bootstrap.min.css" />

<link rel="stylesheet" href="~/lib/kendo-ui/css/web/kendo.bootstrap-v4.min.css" />

<link rel="stylesheet" href="~/lib/kendo-ui/css/web/kendo.bootstrap.mobile.min.css" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

This is happening with all of my kendo windows, but one example of how i create the example:

@(Html.Kendo().Window()

.Name("FaqWindow")

.Actions(a => a.Close())

.Draggable(true)

.Visible(false)

.Title("FAQ")

.Modal(true)

.Resizable()

.Width(800)

.Height(600)

)

Window

answered on 14 May 2020

19 answers

474 views

how do i search data from database using external dropdownlist and show that data in grid.

first sorry for my bad english.i have a grid with data from mysql iam using php to connect my grid with mysql data.

the grid is working fine with the fetch data but now i need a external dropdown to search data from the grid here the main thing is that

i want to search data from database and get the searched data in the grid.i dont know what code i do in my dropdown to search the data. function is same for both fetch or search data.

i want to send my dropdown value as a parameter in the function get_sql_for_journal_inquiry_iq().i want to send the dropdown value in the $account param of php function. how do i do this.

plz tell me what change i do here

change: function(e){

});
}

my code is...

<html>
<head>
<title>GRID PHP</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" />

<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" />
<script type="text/javascript" src="path/to/date.js"></script>


<script type="text/javascript"></script>

<script>

$(function() {

$('#ddl').kendoDropDownList({
autoBind: false,
filter: "startswith",
placeholder: "Select country...",
// separator: ", ",

serverFiltering: true,
enforceMinLength: true,
dataTextField: "account_name",
dataValueField: "account_code",
dataSource: {

// autoBind: true,
dataType: "json",

transport: {

read: "data/statusdropdown.php",

}
},

change: function(e){
var grid = $('#grid').data('kendoGrid');
// $("#grid").data("kendoGrid").dataSource.filter({});

var field = 'CategoryID';
var operator = 'eq';
var value = e.sender.value();

grid.dataSource.filter({
field: field,
operator: operator,
value: value
});
}
});

$("#grid").kendoGrid({

dataSource: {

transport: {
// read: "data/fetch.php",

read: {
url: "../includes/db/gl_db_trans.php",
// url: "data/fetch.php",
type: "post",
data:{method:"get_sql_for_journal_inquiry_iq"},
dataType: "json",

},

},

schema: {
model: {
id: "trans_no",
fields: {

tran_date: { type: "date" },
trans_type: { type: "string" },
trans_no: { type: "number" },
name: { type: "string" },

reference: { type: "string" },
cheque: { type: "string" },
amount: { type: "number" },
memo_: { type: "string" },
user_id: { type: "string" },

}
},

},
batch: true,
pageSize: 5,
navigatable: true,

},
groupable: true,
reorderable: true,
editable: "inline",// editable: "incell",
resizable: true,
scrollable: true,
filterable: true,
sortable: true,
columnMenu: true,
pageable: {
alwaysVisible: false,
pageSizes: [5, 10, 20, 100],
buttonCount: 5,
refresh: true,
},

columns: [

{

type: "date",
field: "tran_date",
title: "start_date",
width: "8%",
format:"{0:dd/MM/yyyy}",
template: '#= kendo.toString(tran_date, "dd-MM-yyyy")#',

},
{

field: "trans_type",
title: "trans_type",
width: '50px' ,

},
{
field: "trans_no",
width: "50px",
title: "trans_no",

template: "#=trans_no#",

},
{
field: "name",
width: "50px",
title: "name",
},
{

field: "reference",
title: "reference",
width: '50px' ,

},
{
field: "cheque",
title: "cheque",
width: '50px' ,

},
{

field: "amount",
title: "amount",
width: '50px' ,

},
{

field: "memo_",
title: "memo",
width: '50px' ,

},
{

field: "user_id",
title: "user_id",
width: '50px' ,

},
{
field: "trans_no",
title: "View",
template:"<button id='qq' class='editButtons' style='float:right'><a target='popup' onclick=\"window.open('../view/gl_trans_view.php?type_id=#=trans_type#&trans_no=#=trans_no#','popup','width=600,height=600'); return false;\" >view</a></button>",
width: '50px'
}

],

});

});

</script>

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

<style>

* {
font-family: "Verdana", sans-serif;
font-size: 10pt;

}

.k-grid td
{
padding: 0.5em 2em
}

#grid table {
table-layout:fixed
}

</style>
<div id="grid" style="width: 100%;" >

<div id="filters">
<input id="ddl" />
</div>
</div>

</div>
<script>

</script>
</body>
</html>

//my php function is this

$method = $_POST['method'];
$method();

//$method = $_POST['method'];
//==============iqra
function get_sql_for_journal_inquiry_iq($dimension=null,$account='')
{
// print $account;

$sql = "SELECT IFNULL(a.gl_seq,0) as gl_seq,gl.tran_date,
gl.type as trans_type,
gl.type_no as trans_no,
IFNULL(MAX(supp.supp_name), MAX(cust.name)) as name,
gl.dimension_id,
gl.dimension2_id,'',
refs.reference,gl.cheque,"
.($dimension ? " -SUM(IF(dim.dimension in(gl.dimension_id,gl.dimension2_id), gl.amount, 0))
as amount,":" SUM(IF(gl.amount>0, gl.amount,0)) as amount,")
."com.memo_,
IF(ISNULL(u.user_id),'',u.user_id) as user_id
";

define("TB_PREF","0_");
$sql .= ", gl.approval
, gl.counter as id,
gl.account ,a.stamp
";

$sql.= " FROM ".TB_PREF."gl_trans as gl
LEFT JOIN ".TB_PREF."audit_trail as a ON
(gl.type=a.type AND gl.type_no=a.trans_no)

LEFT JOIN ".TB_PREF."comments as com ON
(gl.type=com.type AND gl.type_no=com.id)

LEFT JOIN ".TB_PREF."refs as refs ON
(gl.type=refs.type AND gl.type_no=refs.id)

LEFT JOIN 0_users as u ON
a.user=u.id
LEFT JOIN 0_debtors_master cust ON gl.person_type_id=2 AND gl.person_id=cust.debtor_no
LEFT JOIN 0_suppliers supp ON gl.person_type_id=3 AND gl.person_id=supp.supplier_id"
.($dimension ?
" LEFT JOIN (SELECT type, type_no, MAX(IFNULL(dimension_id, dimension2_id)) dimension
FROM
".TB_PREF."gl_trans GROUP BY type, type_no) dim
ON gl.type=dim.type AND gl.type_no=dim.type_no" : '').

" where gl.amount!=0";

if ($account != null)
$sql .= " AND gl.account = ".db_escape($account);

$sql .= " GROUP BY gl.tran_date, a.gl_seq, gl.type, gl.type_no";
$sql .= " ORDER BY a.stamp DESC";
// return $sql;
$query = mysql_query($sql)or die(mysql_error());
// print_r(mysql_fetch_array($query));

while($obj = mysql_fetch_array($query)) {

$arr[] = array(
'tran_date' => str_replace("\'", "'", $obj["tran_date"]),
'trans_type' => str_replace("\'", "'", $obj["trans_type"]),

'trans_no' => str_replace("\'", "'", $obj["trans_no"]),

'name' => str_replace("\'", "'", $obj["name"]),

'reference' => str_replace("\'", "'", $obj["reference"]),
'cheque' => str_replace("\'", "'", $obj["cheque"]),
'amount' => str_replace("\'", "'", $obj["amount"]),

'memo_' => str_replace("\'", "'", $obj["memo_"]),
'user_id' => str_replace("\'", "'", $obj["user_id"]),

);
}
print json_encode($arr);

}

Grid

answered on 13 May 2020

8 answers

928 views

[Solved] Selecting All Items with a button click function

Hi,

Is there a way to select all items in the listview?

I am able to select a row with .select method:

ListView.select();

Thanks
Safak

ListView

answered on 13 May 2020

7 answers

552 views

Clicking on option closes list but does not select option

I have a kendoDropdownList that has virtualization. The list is created from a flat array such as ["a", "b", "c", "d"]. When I click on a value the list closes but it is not selected. Can you help? Here is my code.

var attributeValues = {

age: ["1", "2", "3", "4", "5"],

name: ["John", "Jenny", "Suzie", "Lee", "Robert"]

};

createDropdownLists("name", "#myList");

var shouldPreventOpen = [];

var menuIsOpen = [];

function createDropdownLists(key, selector) {

shouldPreventOpen = [];

let values = attributeValues[key];

if (values.length < 1) {

$(selector).prop("disabled", true);

} else {

$(selector).prop("disabled", false);

}

$.each($(selector), function (index, element) {

let value = $(element).val();

let valueIndex = values.findIndex((element) => element.toString() === value);

$(element).kendoDropDownList({

height: 300,

optionLabel: "Select Value",

filter: "contains",

//filterFields: ["itemName", "itemID"],

template: "<div title='#: data #'><span class='listItemName' >#: data #</span></div>",

//valueTemplate: "#: data #",

virtual: {

itemHeight: 44,

valueMapper: function (options) {

console.log(options, valueIndex);

options.success([!isNaN(valueIndex) ? valueIndex : -1]);

}

},

dataSource: values,

value: value,

open: onOpen,

close: onClose

});

let id = $(element).attr("id");

shouldPreventOpen[id] = false;

menuIsOpen[id] = false;

let list = $(element).getKendoDropDownList();

list.wrapper.on("focus", function (e) {

let id = $(e.currentTarget).find(".js-k-item-dropdown").attr("id");

if (shouldPreventOpen[id] && menuIsOpen[id]) {

list.close();

shouldPreventOpen[id] = false;

} else {

list.open();

}

});

$(".k-list-container").on("click", ".k-list-optionlabel, li", function (e) {

let clickedId = $(e.currentTarget).closest(".k-list-container").attr("id");

clickedId = clickedId.substring(0, clickedId.indexOf("-"));

let list = $(`#${clickedId}`).getKendoDropDownList();

list.close();

});

}

function onOpen(e) {

let id = $(e.sender.element).attr("id");

if (shouldPreventOpen[id] && menuIsOpen[id]) {

shouldPreventOpen[id] = false;

e.preventDefault();

} else {

shouldPreventOpen[id] = true;

menuIsOpen[id] = true;

}

function onClose(e) {

let id = $(e.sender.element).attr("id");

if (shouldPreventOpen[id] && menuIsOpen[id]) {

e.preventDefault();

}

menuIsOpen[id] = false;

$.each(shouldPreventOpen, function (element, index) {

shouldPreventOpen[index] = false;

});

}

DropDownList

answered on 13 May 2020