Questions on Kendo UI for jQuery Forum

22 answers

782 views

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

330 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

327 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

484 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

232 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

answered on 19 Sep 2019

1 answer

168 views

Toolbar template

Hi,

I've tried to apply a toolbar template, like other components, but it is ignored and it's show the standard toolbar.

There is just a way to do a toolbar customization, or is it necessary to wait an implementation directly in the component source?

Thanks

Fabio

PDFViewer

answered on 19 Sep 2019

1 answer

250 views

Drag and drop between 2 treelists

Hello Team,

Is it possible to drag and drop nodes from one treelist to other treelist. it would be great help, if you share me some references.

TreeList

answered on 19 Sep 2019

3 answers

506 views

PDF Export

I am making an application where it will be necessary to create a PDF with more than 2 pages.
From the documentation I saw that it is necessary to generate the HTML in a DIV and generate the PDF.
This is working fine when it's just a page.
But for multiple pages this is giving problem.

What I need is a way to "hide" the "GeneratedPDF" Div for the user and only generate the PDF (when hidden the content is not generated in the PDF).

And how do I page break between the two sample URLs?

My code:

<div id="GeneratedPDF"></div>

<input type="button" class="button blue" id="btnCreatePDF" value="Create PDF" />

<script>

$("#btnCreatePDF").click(function () {

var html = "";

$.ajax({

url: "/PageForTheExample1",

type: "GET",

dataType: "html",

success: function (data) {

html += data;

$.ajax({

url: "/PageForTheExample2",

type: "GET",

dataType: "html",

success: function (data) {

html += data;

CreatePDF(html);

}

});

function CreatePDF(html) {

$('#GeneratedPDF').html(html);

kendo.drawing.drawDOM($('#GeneratedPDF')).then(function (group) {

kendo.drawing.pdf.saveAs(group, "Export.pdf");

});

}

</script>

xxx

General Discussions

answered on 18 Sep 2019

1 answer

649 views

Datasource read called twice if emtpy

Hi,

Sorry in advance but I have no example in hand now by writing post.
I will try to explain clearly.

I have a MVVM implementation with a fruits property bound to a selectDropdown widget.
This property is an empty array by default (fruits: [])

I have a dataSource dsource instance which call a remote endpoint.
I call the fetch method manually and define a callback function which do some tasks :

- dsource.filter(...);
- dsource.sort(...);
- viewModel.set('fruits', dsource);

(Note that I didn't applied dsource as default value of my fruits property cause of specific mvvm implementation)

My issue is :
Everything works well unless if my dsource return empty data.
In this case, filter, sort or set dsource to viewModel are calling the read method a second time.
It can call the read method 4 times (1 for first call, 1 for filter, 1 for sort and 1 for view model set method).

Why ? it should not cause my dsource has been instantiated and call a first time...

Thanks :)

moosh

Data Source

answered on 18 Sep 2019