Questions on Kendo UI for jQuery Forum

6 answers

913 views

Export to PDF

Hi,

I'd like to export the grid to PDF, and need to add column headers on each page.

I was able to apply the page template (page header and footer), but couldn't add the column headers on the grid on each page..

Also, I'd like to change font size when it exports to PDF. how can I change the font size?

Thank you,

// Export handler
  $("#export").on("click", function () {
   var grid = $("#grid").data("kendoGrid");
   grid.hideColumn(3);
  grid.columns[0].width = "60px";
   grid.columns[1].width = "60px";
   grid.refresh();
   kendo.drawing.drawDOM("#grid", {
    forcePageBreak: ".page-break",
    paperSize: "Legal",
    landscape: true,
    margin: {
     left   : "2mm",
     top    : "30mm",
     right : "2mm",
     bottom : "40mm"
    },
    template: $("#page-template").html()
   })
   .then(function (group) {
    kendo.drawing.pdf.saveAs(group, "CFCReport.pdf");
    var grid = $("#grid").data("kendoGrid");
    grid.showColumn(3);
   grid.refresh();
   });

Grid

answered on 18 Sep 2018

1 answer

650 views

Problem with passing DateTime picker data, to an LocalDateTime Java object

I'm using a kendo date picker in a jsp binded form (using spring + hibernate). When i try tu submitt the form i get this errros: "Field error in object 'doctorVisit' on field 'date': rejected value [9/25/2018 8:00 AM]" and

"Failed to convert property value of type 'java.lang.String' to required type 'java.time.LocalDateTime' for property 'date'". The binded property Is of LocalDateTime and has formmating set to be Just the same as the date picker formmat. Down under is my Jsp from and Kendo script

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

<link href="/Kstyles/kendo.common.min.css" rel="stylesheet" />

<link rel="stylesheet" href="/Kstyles/kendo.common.min.css" />

<link rel="stylesheet" href="/Kstyles/kendo.default.min.css" />

<script src="/Kjs/jquery.min.js"></script>

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

<title>Appointment</title>

</head>

<body>

<form:form modelAttribute="visit" method="POST" >

${spec}:<form:select path="doctor" multiple="false">

<c:forEach var="doctor" items="${doctors}">

<form:option value="${doctor}" label="${doctor.surname}"/>

</c:forEach>

</form:select>

Date and time:<form:input id="timePicker" path="date" />

Cause: <form:select path="cause" multiple="false">

<c:forEach var="cause" items="${causes}">

<form:option value="${cause}" label="${cause.description}"/>

</c:forEach>

</form:select>

<input type="submit" value="Submit"/>

</form:form>

<script>

(function($) {

var dateTimePicker = kendo.ui.DateTimePicker;

var MyWidget = dateTimePicker.extend({

init: function(element, options) {

dateTimePicker.fn.init.call(this, element, options);

},

startTime: function(startTime) {

var timeViewOptions = this.timeView.options;

timeViewOptions.min = startTime;

this.timeView.setOptions(timeViewOptions);

},

endTime: function(endTime) {

var timeViewOptions = this.timeView.options;

timeViewOptions.max = endTime;

this.timeView.setOptions(timeViewOptions);

},

options: {

name: "CustomDateTimePicker",

interval: 20,

}

});

kendo.ui.plugin(MyWidget);

})(jQuery);

var datePicker = $("#timePicker").kendoCustomDateTimePicker().data("kendoCustomDateTimePicker");

datePicker.startTime("07:00");

datePicker.endTime("20:00");

</script>

</body>

</html>

DatePicker

answered on 17 Sep 2018

10 answers

695 views

[Solved] Missing icons on the TreeList command buttons

Hi,

We recently upgraded to latest version (2018.2.620) from old one (2016.2.504). On most places all widgets are ok, but in this specific place, my treeList widget doesn't display icons on command buttons (command: ["edit", 'destroy']). When I manually overwrite current (latest) kendo.common.min.css on the server, icons are displayed, but wrong icon is displayed on edit button (chevron up I think). Also, on the same column, I have some classes applied on attributes, but headerAttributes are applied while attributes are not.

This is code for the column:
{
title: "edit",
attributes: {
'class': 'c-centered'
},
headerAttributes: {
'class': 'k-header c-centered'
},
command: ["edit", 'destroy'],
width: 135,
locked: true
}

TreeList

answered on 17 Sep 2018

1 answer

425 views

Multiple columns sorting issue

Example: https://dojo.telerik.com/eVudUCoq/4

I am applying sort to 3 different columns:
range.sort([{column: 3, ascending: true}, {column: 4, ascending: true}, {column: 5, ascending: true}]);

You can see that CLIENT column is not sorted properly ('Alexandra Kennedy' is located at 12th row but should be at the top);
Seems to happen when I have more than 2 columns for sort.

Spreadsheet

answered on 17 Sep 2018

5 answers

1.7K+ views

Align icon to the right of Button text

Is there anyway of aligning a custom icon to the right of a mobile button's text? I noticed there was a CSS class called 'k-space-right' for text fields in Kendo UI Web that is used for positioning icons to the right of inputs. Is there a similar class in the mobile kit or is there anyway I can reliable position icons to the right of a buttons title ?

Button (Mobile)

answered on 17 Sep 2018

6 answers

143 views

[Solved] Pager next, previous page actions don't affect treeView

Hello,

I have a strange situation where I instantiate TreeView and its Pager, but when I hit pager to switch to the page 2, for example, pager reacts, and changes page, description which items are displayed (13-14 of 14), but TreeView contents don't follow and first page remains displayed. Pager DataSource is set to pageSize:12.

Only thing that I do differently from your example is that I initially setDataSource to default empty data source, then on click event on the form, I use it again to set different data source.

I also tried setting data, total under schema manually, but no success.

Here is my code extract for instantiation and change..

function handleTemplateSelector() {
var listView = $("#listView").data("kendoListView");
var pagi = $("#pager").data("kendoPager");
pagi.setDataSource(vm.getNewDatasource());
listView.setDataSource(vm.getNewDatasource());
}

Any suggestions would be welcomed.

Thanks and regards,

Vedad

TreeView

answered on 17 Sep 2018

1 answer

385 views

KendO UI Grid Filters Font change

Hi,

Juste need help to modify the font and colors of all items in a filter for grid widget in mode="row"

Thanks in advance,

François-Régis

Grid

answered on 14 Sep 2018

5 answers

2.3K+ views

[Solved] Passing additional value to popup

Hi!

Is it possible to pass additional data from my grid to the popup window beside the bound object?

@(Html.Kendo().Grid<GazoraAllasModels>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Oraallas).Title("Óraállás");
columns.Bound(c => c.LeolvasasDatum).Title("Leolvasás dátuma");
})
.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("AddOraallas").AdditionalViewData(new { maxOra = "=#MaxOra()#" }))

I would like to pass data of a return value of javascript function as you can see (MaxOra()

On the editable template cshtml file has @ViewData["maxOra"] but the value is the string of "=#MaxOra#" and not the value. The cshtml starts with these lines, so I cannot pass this value in model:

@model MyProject.Models.MyProjectModels
@using Kendo.Mvc.UI
@ViewData["maxOra"]

This value cannot be in the model class. I really need to pass it as additional data.

Thanks

Grid

answered on 14 Sep 2018

5 answers

16.0K+ views

How to set default column sorting to a grid

I have a Keno Grid, when first launched, it should be sorted on one column by descending order. How can achieve it? Is there any configuration parameters to set?

Grid