Hi, I've got a grid containing a list of elements with a corresponding numeric value, where I use the aggregate functions to show the sum in the footer. Something like this:
ELEMENTS | VALUE
element1 | 1
element2 | 2
element3 | 3
---------------------------------
TOTAL | 6
now I need to show beside the row number the percentual relative to the total, this way:
ELEMENTS | VALUE
element1 | 1 (16.67%)
element2 | 2 (33.33%)
element3 | 3 (50.00%)
---------------------------------
TOTAL | 6
so I add to the VALUE column options this:
template: "#:value#<br>#=100*value/sum#%"
but the grid stops working, without even showing errors in the console. What am I missing?
Hello there
It took me some hours to nail this behaviour down to the problem: I have a time mask in which the user can enter a complete time or some part of a time. Anything left out will be interpreted by my code. After entering the (part) time by the user I do some checks in the change event of the MaskedTextBox and write the validated (part) time back into the MaskTextBox field. In some cases that doesn't work, f.e.:
User enters: Insert after validation:
10:__:__ AM 10:__:__ __
It should have inserted '10:__:__ AM' (like the original what the user typed)
I have attached a working example to this message. You'll see a MaskedTextBox and you only have to click the button 'Insert time'. This simulates the insert I do after time validation. This will work as it should and inserts '10:__:__ AM', fine! Now disable/remove the CDN script source 'http://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js' and activate/locate the kendo.all.min.js of the downloadable KendoUi of 'kendoui.for.jquery.2017.3.913.commercial.zip': This time the 'AM' will not be inserted by the 'Insert time' button.
I have no idea why it works with the CDN version but not with the downloadable commercial package (same version). I assume there are differencies. To make it even more confusing: Inserting a complete time like '10:10:10 AM' works fine in both cases.
I do already all this with a DATE MaskedTextBox (dd.mm.yyyy) and there it works fine (for full date or part of date).
Greetings
I am having trouble understanding what exactly is going on here in the snippet below.
I am attempting to upload a file to my web view spreadsheet but not save the file. What is going on with the ProxyURL, the "/kendo-ui/content/web/spreadsheet/products.json" and the "saveUrl: "/kendo-ui/spreadsheet/Upload". What do I need to change to allow the functionality to work locally for me while I am testing.
In a gist. I want to, Upload a file, save the file, display the file, and export the file. I can't figure this out exactly.
$(
function
() {
$(
"#spreadsheet"
).kendoSpreadsheet({
excel: {
// Required to enable Excel Export in some browsers
}
});
var
spreadsheet = $(
"#spreadsheet"
).data(
"kendoSpreadsheet"
);
$.getJSON(
"/kendo-ui/content/web/spreadsheet/products.json"
)
.done(
function
(sheets) {
spreadsheet.fromJSON({ sheets: sheets });
});
var
ALLOWED_EXTENSIONS = [
".xlsx"
,
".csv"
,
".txt"
,
".json"
];
$(
"#upload"
).kendoUpload({
async: {
saveUrl:
"/kendo-ui/spreadsheet/Upload"
},
multiple:
false
,
localization: {
"select"
:
"Select file to import..."
},
select:
function
(e) {
var
extension = e.files[0].extension.toLowerCase();
if
(ALLOWED_EXTENSIONS.indexOf(extension) == -1) {
alert(
"Please, select a supported file format"
);
e.preventDefault();
}
},
success:
function
(e) {
// Load the converted document into the spreadsheet
spreadsheet.fromJSON(e.response);
}
});
$(
".download"
).click(
function
() {
$(
"#download-data"
).val(JSON.stringify(spreadsheet.toJSON()));
$(
"#download-extension"
).val($(
this
).data(
"extension"
));
});
});
Hi,
Suppose If I have given fixed width for one column and overflow text will be hidden with ellipsis. I wanted to expand column to show full text when I focus on any cell of that particular column and when focus out it will back to old state(width). Could anyone please help me on this?
Thanks in Advance
Hi,
Can we add multiple worksheet in a single workbook using multithreading? Or can we write single worksheet using multithreading?
I have some summary header for my Grid but in sepparated DOM. HTML looks like this:
<div id="report">
<div class="report-header"></div>
<div class="report-table"></div>
</div>
kendo.drawing.drawDOM("#report",
{ allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.5,
title: 'Raport dzienny'
}).then(function(group){
kendo.drawing.pdf.saveAs(group, 'file.pdf');
});
Grid should have around 30 rows, it isn't fully drawn. It's look like DrawingAPI draw only visible part of Grid. How to fix it?
Hi there!
We are using NPM and webpack to build own apps. All still working except when we try to call any required function from the template string due the scope of that.
How can we call foo function in this example?
<
p
>import { foo } from "../utilities/foo";<
br
></
p
><
p
>let template = require("html!../../templates/details/research-detail-template.html");<
br
></
p
><
p
>$('#onlineshop-orders-grid').kendoGrid({<
br
> dataSource: dataSrc,<
br
> height: fullHeight,<
br
> sorteable: true,<
br
> pageable: true,<
br
> columnMenu: true,<
br
> selectable: 'multiple, row',<
br
> allowCopy: { delimeter: ';' },<
br
> filterable: { mode: "row" },<
br
> rowTemplate: kendo.template( template )</
p
><
p
>});<
br
></
p
>
(if I declare the function as global.foo works... but don't want do that)
I have a grid into which I am injecting editors dynamically. When I inject Kendo UI controls the scrollbar on the grid gets reset to zero. The code that is doing this is VirtualScrollable.refresh():
refresh:
function
() {
var
that =
this
, dataSource = that.dataSource, rangeStart = that._rangeStart;
kendo.ui.progress(that.wrapper.parent(),
false
);
clearTimeout(that._timeout);
that.repaintScrollbar();
if
(that.drag) {
that.drag.cancel();
}
if
(rangeStart && !that._fetching) {
that._rangeStart = dataSource.skip();
if
(dataSource.page() === 1) {
that.verticalScrollbar[0].scrollTop = 0;
}
}
that._fetching =
false
;
}
The problem is that this method is assuming that if the datasource page is 1 then it should reset the scrolling, but in my case neither my grid nor my data source are using paging at all, so when the user edits in the grid while they are scrolled down the page, this code returns the scrollbar to the top, while the logical edit is left down the page. This is even more confusing as I am using fixed left columns (which means there is really two grids on the page) and the fixed grid doesn't scroll in response to this change, so the user has a very broken experience.
I also don't understand why a method called "refresh" is calling dataSource.skip(). I also don't understand what part of creating an edit field (instantiating an edit template) causes this refresh to be called.
My Grid is configured like this:
$(
"#grid"
).kendoGrid(
dataSource: ds,
columns: dynColumns,
scrollable: {
virtual:
true
},
pageable:
false
,
sortable:
true
,
editable:
true
,
batch:
true
,
navigatable:
true
,
resizable:
true
,
/* Other stuff */}
It seems to me that this code should be checking to see if the data source is being paged before erroneously adjusting the UI. Unfortunately, other than editing the Kendo source directly, I haven't yet found a workaround for this problem.
Is this just a bug, or am I configuring something incorrectly?
Scott