Questions on Kendo UI for jQuery Forum

5 answers

235 views

[Solved] Validator templates bug in custom editor

Hi,

Im use datePicker and comboBox inside my grid with required attribute and i have bug with validation template, if you go to this dojo https://dojo.telerik.com/OzojoLed and change

"function categoryDropDownEditor(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container).kendoDropDownList" to .kendoComboBox, then delete value and call validation, it is displayed incorrectly, how i can fix it?

Grid

answered on 14 Feb 2019

6 answers

193 views

Pasting single value into range doesn't seem to work.

A client of an app we're developing pointed this out to us, and since I know you guys are trying to match Excel behavior I thought I should point it out:

"Pasting" a single value doesn't appear to paste into a range of values like it does in Excel.

Steps to reproduce:

In excel:

Copy a single cell with a random value in it, say "1111".
Select a range of cells.
Paste (CTRL+V), notice all cells now have the value "1111".

In a blank spreadsheet (dojo):

Copy a single cell with a random value in it, say "2222".
Select a range of cells.
Paste (CTRL+V), notice only the top left cell gets the value.

Expected behavior:

Users expect the paste action to match Excel's paste action.

Notes:

As a developer, there's no clear path to implement support for this without hacking the widget and taking over the pasting action keybinds (ugly). If there was a "paste" event we could listen to that provided the range selected and the pasting value(s)/range and we could manipulate data before the "paste" action continued, a hack/implementation would be easier.

Spreadsheet

answered on 13 Feb 2019

1 answer

381 views

How to only allow user selecting two grid rows ?

The business logic in my MVC project only allow user selecting two rows. I tried couple of ways but no success solution yet. Does anyone have idea about this ?

Thanks.

Grid

answered on 13 Feb 2019

1 answer

161 views

datasource with formula

I have a spreadsheet with a remote data source, for the most part everything is working. But when I submit my changes thefields with a formula don't have the updated values, just the original values that were read in on the data source read. I set my formula in the data source request end event. The spreadsheet will show the correct values and do calcs in the formula but these values are not reflected in the data in the data source submit. Any help would be appreciated!

sheet.batch(function () {

for (var i = tempRow + 1; i < rowsCount; i++) {

sheet.range("B" + i).formula("L" + (i - 1));

sheet.range("I" + i).formula("E" + i + "+F" + i + "+G" + i + "+H" + i);

sheet.range("L" + i).formula("B" + i + "+C" + i + "+D" + i + "-I" + i + " -J" + i + " -K" + i);

}

}, { layout: true });

Spreadsheet

answered on 13 Feb 2019

1 answer

169 views

batch edit mode - switch to edit mode on kepress event

Hi. I have an editable grid in batch edit mode.
When I press enter on selected cell the cell switches to edit mode.
Is it possible to switch to edit mode and start writing on any key press like in the spreadsheet component?

Thanks and best regards

Grid

answered on 13 Feb 2019

1 answer

1.2K+ views

selectable column not working

Hi, i am following the documentation regarding a kendo grid with a checkbox selection.

https://demos.telerik.com/kendo-ui/grid/checkbox-selection

I cannot make the example to work.

I created the exact same html, added all the referenced styles and scripts, run the example on chrome browser,
the grid is shown as expected, when clicking any checkbox, nothing happens.
no error in the console beside two missing fonts.

here is my document for reference.

<!DOCTYPE html>

<html>
<head>
    <link href="~/Content/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/kendo.all.min.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="example">
        <div id="grid"></div>

        <script>
                function onChange(arg) {
                    //kendoConsole.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
                }

            $(document).ready(function () {

                    $("#grid").kendoGrid({
                        dataSource: {
                            pageSize: 10,
                            data: [{ "ProductID": 1, "ProductName": "Chai", "UnitPrice": 18, "UnitsInStock": 39, "Discontinued": false }, { "ProductID": 2, "ProductName": "Chang", "UnitPrice": 19,"UnitsInStock": 17, "Discontinued": false }],
                            schema: {
                                model: {
                                    id: "ProductID"
                                }
                            }
                        },
                        pageable: true,
                        scrollable: false,
                        persistSelection: true,
                        sortable: true,
                        change: onChange,
                        columns: [
                            { selectable: true, width: "50px" },
                            { field:"ProductName", title: "Product Name" },
                            { field: "UnitPrice", title:"Unit Price", format: "{0:c}"},
                            { field: "UnitsInStock", title:"Units In Stock"},
                            { field: "Discontinued"}]
                    });
                });

        </script>
        <div class="box wide">
            <h4>Console log</h4>
            <div class="console"></div>
        </div>
        <style>
            .console div {
                height: 3.3em;
            }
        </style>
    </div>

</body>
</html>

Grid

answered on 12 Feb 2019

5 answers

617 views

drawDOM huge piece of html

I have a requirement where it's necessary print a piece html as PDF, everything goes well when the html is not so large, but when the size is bigger, more elements to get rendered the performance suffers, the window keeps unresponsive for some time span, that's a real problem because some browsers as IE11+ crashes when the main thread is blocked for several time, the same for FireFox, Is there any way to avoid the main thread get locked?

Here the code

01.//Here the main thread is blocked in certain time span although it is supposed to be a async promise

02.kendo.drawing.drawDOM($(selector), {

03. paperSize: "A4",

04. margin: "1cm",

05. multiPage: true,

06.})

07..then(function (group) {

08. return kendo.drawing.exportPDF(group);

09.}).done(function (data) {

10. kendo.saveAs({

11. dataURI: data,

12. fileName: "file.pdf",

13. proxyURL: "/ExportToPDF"

14. });

15. })

Drawing API

answered on 12 Feb 2019

1 answer

215 views

DateRangePicker and Razor Page Model

Hello,
Could you provide example binding daterangepicker to Razor Page Model Date fields?

thx

DateRangePicker

answered on 12 Feb 2019

10 answers

3.2K+ views

[Solved] Grid paging wrong after resetting datasource

Hi!

I am using a function to change a grids datasource, but it seems that after attaching the new datasource and refreshing, the paging elements do not refresh/adjust to the new datasource?

Does anyone have an idea?

The code i use:

var setGridDataSource = function(type) {

if(typeof type != 'string') type = $('#showGridType').val();

console.info("changed grid type to: " + type);

// create datasource

var dataSource = new kendo.data.DataSource({

transport: { read: { url: dataSourceUrls[type], dataType: "json" } },

pageSize: 10,

change: function() {

participantGrid.refresh();

},

schema: { model: { id: "id", fields: gridFieldsParticipant } }

});