Questions on Kendo UI for jQuery Forum

3 answers

905 views

Clearing values from dropdowntree after setDataSource is used

Hi,

I have a situation where I am setting the dataSource of a dropdowntree after defining it (using the setDropDown method). Howerver, I can't seem to be able to clear values from the dropdowntree in this scenario.

I tried to replicate the problem best I could in this dojo: https://dojo.telerik.com/iKoBOVIk/3

Upon selecting item 1 and item 2, if I click the button I want the selected values to be cleared. How can I achieve this?

Thanks.

DropDownTree

answered on 20 Sep 2019

1 answer

978 views

[Solved] Tooltip not showing in HTML5 fullscreen

Hi Telerik,

Tooltip not showing if we put chart inside HTML5 fullscreen.

You may refer here for your reference.

Charts

answered on 20 Sep 2019

22 answers

786 views

Pager translation not working

Hello, I have a problem with grid pager translation: pagination buttons tooltips and "items per page" label appear always in english.

I've checked the messages translation scripts are linked and working as you can see in the attached screenshot, and other regions such as grid filters are ok.

What am I doing wrong?

Thanks for helping.

Globalization

answered on 20 Sep 2019

1 answer

1.0K+ views

Drawer Questions

1. No load from content? is that planned.

2. if I try .Content(@<text>@Html.Action("getCompanyForm", "Companies")</text>) it fails spectacularly. pushes the content out of the content container completely and puts it below the content below the container "outside" in the dom. I was hoping that i could change the content dynamically by loading a different partial view with a specific parameter.

3. Cannot configure so that it doesn't shrink to icons by default?

Drawer

answered on 20 Sep 2019

1 answer

338 views

KendoUI cannot display grid icon property after deploy in IIS

Our target upgrade the KendoUI to latest version i.e. v2019.2.619 and it can be able to run in VS2019 locally without any issue. However, after the application deployed to IIS server, the icon cannot show properly. I have using browser (Chrome) debug mode to trace and find that the content value in kendo.common.min.css is changed as below in IIS server

.k-i-more-vertical:before { content: ""; }

In BundleConfig.cs, we define the Bundle as below sample code :

bundles.Add(new StyleBundle("~/bundles/kendoUI").Include(

"~/Content/styles/kendo.common.min.css",
"~/Content/styles/kendo.default.min.css"
));

In addition , we also check the source code in IIS server and the content is correct, here is the sample

.k-i-more-vertical:before {

content: "\e031"
}

Remark : The DejaVu and glyphs is already added in source code as ~\Content\styles\fonts\DejaVu and ~\Content\styles\fonts\glyphs

Please advise the possible solution. Thanks you very much.

General Discussions

answered on 20 Sep 2019

1 answer

330 views

random number from column aggregation

HI I'm fairly new to Kendo UI and want to practice using Kendo Grid. I was trying to follow the demo for aggregation and somehow it puts out random number.

I attached output for my program and here is my code:

<!DOCTYPE html>
<head>
<title></title>
<base href="https://demos.telerik.com/kendo-ui/grid/excel-export">
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

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

<div class="row">
<div class="col-12">
<div id="grid"></div>
</div>
</div>
</div>
</body>

<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 } }
}
}
},
aggregate: [
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsInStock", aggregate: "count"}]
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable: {

mode: "single",
allowUnsort: false
},
groupable: true,
filterable: {
mode: "row"
},
reorderable: true,
resizable: true,
columnMenu: true,
height: 850,

toolbar: ["create", "excel", "pdf"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.8
},

columns: [
{ selectable: true, width: "50px" },
{ field: "ProductName", title: "Product Name", groupable: true, width: "400px" },
{ field: "UnitPrice", title: "Unit Price", groupable: true, aggregates: ["sum"], footerTemplate: "Sum: $#= sum#", format: "{0:c}", width: "200px" },
{ field: "UnitsInStock", title: "Units In Stock", groupable: true, aggregates: ["count"], footerTemplate: "Count: #=count#", width: "200px" },
{ field: "Discontinued", groupable: true, width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});

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

Thank you!

Grid

answered on 19 Sep 2019

2 answers

490 views

[Solved] Column resizing when using horizontal scrollbar

Hello,

I want to use the column resizing capabilities of the Grid. I’m facing a problem, which can be reproduced in a Kendo UI Grid sample.

1. Open the Url https://demos.telerik.com/kendo-ui/grid/column-resizing
2. Resize a column so the horizontal scrollbar appears
3. Move the horizontal scrollbar to the far right
4. Column resizing does not work anymore as intended. If the mouse is between two column headers, the size of a column cannot be changed. It seems to me as if the object to move the column size has been moved to the left by scrolling.

Is there a way to change the column width even when using the scroll function?

Regards,
Stefan

Grid

answered on 19 Sep 2019

1 answer

234 views

Editable group headers and normal rows

I have a grid that has group headers. I want to be able to add/edit/delete these group headers along with being able to add/edit/delete the rows that are grouped underneath them.

As an example:

I have a grid where Users are the group headers. And under each user are contact information. I want to be able to edit a User's name, add new users, and delete users. As well as add/edit/delete the contact info for each user.

Is this possible to do?

Grid