Questions on Kendo UI for jQuery Forum

1 answer

376 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

159 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

166 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

612 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

210 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 } }

});

participantGrid.dataSource = dataSource;

participantGrid.dataSource.read();

}

Grid

answered on 12 Feb 2019

5 answers

343 views

router back preventDefault on Firefox not working properly

I'm trying to prevent back on firefox by preventing event.

It is not working properly. Page stays where it was, but change event is still fired and page is still rerouted behind to the same one.

It cause loosing whole page state. because even if url stays the same page was reloaded.

SPA

answered on 12 Feb 2019

1 answer

77 views

GroupExpand for Kendo 2015

I would like to upgrade but at this point it is not possible. What I want to do is have a grid show up as initially collapsed so I have

static onDataGridBound(e) {
var grid = e.sender;
$(".k-grouping-row").each(function (e) {
grid.collapseGroup(this);
});
}

This works just fine.

Then I want to be notified when one of the groupings are expanded so some of the column text is not duplicated so I changed it to

static onDataGridBound(e) {

var grid = e.sender;
$(".k-grouping-row").each(function (e) {
grid.collapseGroup(this);
// While waiting for groupExpand
$("a:first",this).on("mousedown", Gartner.GlobalAgendaTabGrid.grid_detailExpand);
});
}

This works partially in that the function grid_detailExpand gets called when I expand but the group doesn't get expanded. What am I doing wrong?

Thank you.

Kevin

Grid

answered on 12 Feb 2019

6 answers

1.6K+ views

[Solved] return multiple dataValueFields from single selction

Hello,
I'm new to this, so this might be a simple answer, but I could for the life of me not locate it.

The page I am working on has a kendoDropDownList that work fine

kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid" }); });

I then have some javascript that displays the data

var getType = $("#type").val();
console.log(getType);

What I now need is this to return 2x dataValueField . I've tried

But getName is "undefined", so, I assume, the second JQuery is not being run.
What's the best way to a second value using the same dropdownlist selection?
ThanK you

DropDownList

answered on 12 Feb 2019