Questions on Kendo UI for jQuery Forum

1 answer

485 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

421 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

841 views

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

481 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

1 answer

336 views

Autocomplete to MS graph People and authToken

Need your help Looking for a jQuery example of how to pass authToken and bind autocomplete to https://graph.microsoft.com/v1.0/me/people/?$search=(?)

AutoComplete

answered on 12 May 2020

5 answers

168 views

problems with method viewToLocation

In drag and drop markers method viewToLocation does not position the point in the right place, there is always an offset. Very little zoom point comes to be positioned in another country.

Here we can see an example of this problem http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/drag-and-drop-markers

Map

answered on 12 May 2020

3 answers

377 views

Tooltip for KendoTreeView jQuery

Hi,

I need to display a tooltip for KendoTreeView when hovered over the checkbox.

HTML

<div class="demo-section k-content">

<div>

<div id="treeview"></div>

</div>

JavaScript

ruleNames = [{ text: "Rule 1", description: "Rule 1 Hovered upon" },

{ text: "Rule 2", description: "Rule 2 Hovered upon" }]

$("#treeview").kendoTreeView({

checkboxes: {

checkChildren: true

},

check: function (e) {

onCheck(pass);

},

dataSource: [{ text: "List of Rules", expanded: false, items: ruleNames }]

});

I want to display the description text on the tooltip.

Please could your help me out with a demo.

Thanks in advance

TreeView

answered on 12 May 2020

4 answers

991 views

Kendo Editor style block preventing borders and padding from displaying in table cells

Our software uses both Telerik WPF editors and Kendo editors, and we transfer the HTML back and forth from these editors. The WPF editors export the HTML, and that HTML is loaded into the Kendo editor. One of the problems we encountered is that table cell (td) padding and borders are not showing up in the Kendo editor when loaded. The reason is that there appears to be a block of styles that always appears in the editor doc head, and these styles are overriding the class styles of the tables.

Here is the block of styles that gets inserted into the editor head (appears to come from the javascript:

<html lang="en"><head><meta charset="utf-8"><title>Kendo UI Editor content</title><style>html{padding:0;margin:0;height:100%;min-height:100%;cursor:text;}body{padding:0;margin:0;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table th{outline:0;border: 1px dotted #999;}.k-table p{margin:0;padding:0;}.k-column-resize-handle-wrapper {position: absolute; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {position: absolute; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {position: absolute; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}.k-placeholder{color:grey}k\:script{display:none;}</style>

Here is an example of a TD that is part of our HTML being loaded:

<td class="tc_8D184ABE" align="left" valign="top" data-role="resizable"><p class="Normal p_A43897F6"><span>Some text</span></p></td>

And the class styles:

.tc_8D184ABE { telerik-style-type: local;border-left: 12px double #548ED5;border-top: 12px double #548ED5;border-right: 12px double #548ED5;border-bottom: 12px double #548ED5;padding: 4px 12px 4px 12px;width: 189.466674804688px;vertical-align: top; }

Since the .k-table td style in the head block overrides the class styles, the borders and the padding do not render. Is there any suggestions for getting around this issue?

Thanks for any help.

Editor

answered on 12 May 2020

9 answers

924 views

Export to excel - considering hidden field

Attached my code.

Its working fine as expected.

But while i am exporting to excel, the child rows are not showing. because in datasource field i made "Comments" field as hidden. If i remove "hidden" then data is exporting as expected. But i dont want to show this Comments field as parent record.

I tried to use showColumn/hideColumn as mentioned in code. but its not working as expected. Looking your help on this.

Grid

answered on 12 May 2020

5 answers

1.8K+ views

Setting optionLabel after initiation

Is there a way to set the optionLabel after the initiation, because I want it to be dependent on the value of the data.
If there is no data I want my users to know, that there are no options anymore.

Otherwise I just do a jquery.html() on that element. But it would be nice if I can set it with the API

DropDownList

answered on 12 May 2020