Questions on Kendo UI for jQuery Forum

2 answers

1.5K+ views

Dart SASS warnings from kendo-theme-default

Hello,

I am using kendo-theme-default 4.38.1 and get a lot of deprecated warnings from Dart SASS. I've put an example warning below. Is there a workaround to prevent kendo-theme-default from causing all of these warnings?

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($button-padding-x, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
20 │ $button-padding-x-sm: $button-padding-x / 2 !default;
   │                       ^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@progress\kendo-theme-default\scss\button\_variables.scss 20:23  @import
    src\styles\_common.scss 5:9                                                   @import
    stdin 1:9

There is a --quiet-deps command line option. I've attempted to add this to vue.config.js (see below), which is what's used to configure sass-loader. Unfortunately, I can't tell if I have it configured the right way or whether --quiet-deps will actually do what I want.

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}

Styling

answered on 04 Jun 2021

1 answer

441 views

Themebuilder Import Theme

You used to be able to upload the variables.scss file to work on an existing theme. Now, it's asking for a json file. Is there a workaround for this?

from Themebuilder now:

from the Documentation:

General Discussions

answered on 04 Jun 2021

2 answers

1.0K+ views

Upload Template: How to format file size (#=size#) in KB instead of Bytes and with two decimals?

I added a custom template for the Upload Widget. The file size (#=size#) prints to a byte value. How can I format the file size (#=size#) to print in KB instead of Bytes - and with two decimals? (like the upload widgets default)

I added the template as a function, as mentioned here.

Thanks for any advice!

Patrick

FileManager

Upload

answered on 03 Jun 2021

1 answer

175 views

How do I isolate the Kendo UI jQuery within a div?

I have a product named "a6763". It is a cloud based product. Customers use it by placing CDN-served assets into their HTML code. My product should work in an div only. It is just like Google Map actually. Google Map never affects rest of document. I plan to use Kendo UI jQuery for windows, dropdowns, tabs etc. But Kendo UI affects rest of document.

Here is how my customers add my assets:

1) Embed the a6763's code.

<head>
<script src="https:/a6763.com/embed/kendo.js"></script><link href="https:/a6763.com/embed/kendo.bootstrap.min.css" rel="stylesheet" />
</head>

2) Place my embed code:

<body>
   <!-- there is no kendo here -->
   <div id="a6763">
        <!-- my kendo UI components are here -->
        <div id="kendogrid"></div>
   </div>
   <!-- there is no kendo here -->
</body>

The problem is that; the Kendo's Javascript codes and CSS styles affect all the document. For example, if I choose Material theme in CDN assets, then all the page turns into Material. But I want to keep this theme in the above div. Same for Javascript codes: Kendo should not process outside of the above div.

UPDATE 1: To make it more clear: I need something like this for Kendo UI jQuery: https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

UPDATE 2: In other words, I need give Kendo a new name just like this: https://api.jquery.com/jquery.noconflict/ So that, even the document already added a different version of Kendo into document, everything is ok because my Kendo is different. No conflict.

Esref Atak

Styling

answered on 03 Jun 2021

2 answers

268 views

Error moving events in Scheduler when grouping by a remotely-bound resource

Attempting to move a scheduler event when grouping by a resource with a remote data source produces the following console errors.

Uncaught TypeError: Cannot read property 'value' of undefined
Cannot read property 'groupIndex' of undefined

All events are unable to moved unless I double click an event and open it's edit menu first thing upon the scheduler data being bound and before taking any other action in the scheduler.

Both the scheduler data source and the resource data source are remote; however, when I hard-code the resource data source to match what the remote output would be, the scheduler works as intended.

Here's what my scheduler initialization code looks like.

$(function() {
            var dataSource = new kendo.data.SchedulerDataSource({
                transport: {
                    read: {
                        url: 'service url', /* omitted for example */
                        type: 'GET',
                        data: {
                            account_id: 'myAccountId'
                        },
                        dataType: "json",
                        beforeSend: function(req) {
                            req.setRequestHeader('example-api-key', '1234');
                        }
                    },
                    update: function(e) {
                        e.success();
                    }
                },
                schema: {
                    data: "schedulerEvents"
                }
            });
            
            $("#scheduler").kendoScheduler({
                date: new Date(),
                toolbar: [ "search" ],
                eventHeight: 50,
                selectable: true,
                views: [
                    "day", "week", "month", "agenda", {type:"timeline", selected: true}, "timelineWeek", "timelineMonth"
                ],
                dataSource: dataSource,
                group: {
                    resources: ["Assignees"],
                    orientation: "vertical"
                },
                resources: [
                    {  
                        field: "assignees",
                        title: "Assignees",
                        name: "Assignees",
                        dataSource: {
                            transport: {
                                read: {
                                    url: 'service url', /* omitted for example */
                                    type: 'GET',
                                    data: {
                                        account_id: 'myAccountId'
                                    },
                                    dataType: "json",
                                    beforeSend: function(req) {
                                        req.setRequestHeader('example-api-key', '1234');
                                    }
                                }
                            },
                            schema: {
                                data: "assignees"
                            }
                        },
                        multiple: true
                    }
                ]
              });
        });

The response data from the server looks like this:

{
  assignees: [{ value: "1234", text: "Assignee Name" }],
  schedulerEvents: [{ assignees: ["1234"], id: "9876", title: "Event Title", start: "2021-05-27T00:00:00", end: "2021-5-28T00:00:00" }]
}

You'll notice in my screenshot that the events appear to be grouped correctly, but nonetheless produce errors when clicking on them or trying to move them.

At a loss as to what may be causing this. Perhaps I'm missing something when it comes to binding remote data. Please let me know if there's anything I can do to solve this issue.

Data Source

Scheduler

answered on 03 Jun 2021

1 answer

299 views

Initialize controls after binding template in popup editor

I have a grid that is using a popup editor and in the editor is a listview that I'm binding to a collection on the viewmodel. After the listview is bound I'd like to initialize the inputs as timepickers.
However, the time picker inputs don't seem to get initialized. Everything works as expect except the timepicker isn't getting initialized.

One thing I noticed is that if use kendo.render and use the template I can get the inputs to initialize as timepickers.

here's the listview:

<div class="container" id="list" data-role="listview" data-bind="source: data" data-template="list-tmpl" />

here's the template:

<script id="list-tmpl" type="text/x-kendo-template">

<div class='row'>

<div class="input-append bootstrap-timepicker">

<input type="text" class="input-small timepicker" data-bind="value:StartTime" required />

<span class="add-on"><i class="icon-time"></i></span>

</div>

</script>

here's the jQuery I'm running in the edit event of the grid:

var items = $(".timepicker");

$.each(items, function () {

var el = $(this);

el.timepicker({

minuteStep: 1

});

this is the method that works:

var tmpl = kendo.template($('#list-tmpl').html());

var results = kendo.render(tmpl, e.model.data);

this.editable.element.data("kendoWindow").element.find("#list").html(results); // populate the listview

var items = $(e.container).find(".timepicker");

$.each(items, function () {

var el = $(this);

console.log(el);

//el.kendoTimePicker();

el.timepicker({

minuteStep: 1

}).on('show.timepicker', function (e) {

console.log(e);

});

General Discussions

updated answer on 03 Jun 2021

5 answers

494 views

how to stop mediaplayer from playing after closing kendowindow

Hi guys,

i have mediaplayer inside kendo window. now the problem is when you open the kendo window and play the video and then close it. The video keeps on playing in the background. How can i stop it from playing?

<script type="text/javascript">

/* Date:2021-04-13

* Description: The pop up gets called from a click event of toolbar button(custome button on the CIP grid) called,

* "How to create/fill in a CIP?" through javascript function called pop();

*

* */

function Pop(e) {

/*

* kendow window initiated/created on click of toolbar button called "How to create/fill in a CIP?"

* */

$("#CIPSTRAINING").kendoWindow({

width: "40%",

height: "40%",

modal: true,

iframe: false,

close:onClose,

resizable: true,

dragable: true,

content: "",

visible: false

});

/*The Window provides the wrapper and element DOM elements as fields of its object which you can access and use to customize its appearance and content.

* Even though the handling of the position and size of the Window is normally done through its API and the setOptions method,

* you can also utilize wrapper to tweak the position or the size of the widget.

* * */

var windowElement = $("#CIPSTRAINING").data("kendoWindow");

// windowElement.wrapper.addClass("overflow:" ,"hidden");

/*

* initialize the mediaplayer referencing its dom element

* */

$("#mediaplayer").kendoMediaPlayer({

autoPlay: true

});

/* set and get the data items to the datsournce and assign it to the videos variable. which later we use it to the listview datasource.

* */

var videos = new kendo.data.DataSource({

data: [{

},

]

});

var listView = $("#listView").kendoListView({

dataSource: videos,

selectable: true,

scrollable: false,

template: kendo.template($("#CIPStemplateTraining").html()),

change: onChangeTrain,

dataBound: onDataBoundTrain

});

<script type="text/x-kendo-template" id="CIPStemplateTraining">

<li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')"

onmouseout="$(this).removeClass('k-state-hover')">

<span>

<img src="#:poster#" />

<h5>#:title#</h5>

</span>

</li>

</script

<script>

function onClose(e) {

debugger;

var windowElement = $("#CIPSTRAINING").data("kendoWindow");

// get a reference to the media player widget

var mediaPlayer = $("#mediaplayer").data("kendoMediaPlayer");

// Stop the video

var listView = $("#listView").data("kendoListView");

windowElement.refresh();

mediaPlayer.stop();

}

function onChangeTrain() {

var index = this.select().index();

var dataItem = this.dataSource.view()[index];

$("#mediaplayer").data("kendoMediaPlayer").media(dataItem);

}

function onDataBoundTrain(e) {

// this.select(this.content.children().first());

}

</script>

also i get this error "Uncaught TypeError: Cannot read property 'removeClass' of undefined" when i use the close code that i have

kind regards

Tony

MediaPlayer

answered on 02 Jun 2021

1 answer

262 views

Looking for example of associating an error in grid with a cell (or row) of server side validation

I have a server side update service that does validations. I'd like to see an example of a failed update response message and grid config that gives an error on a field with a message. I saw some questions on this years ago in the forum as associating an error with a cell or row was not possible at the time. Hopefully that has changed.

Steve

Grid

answered on 02 Jun 2021

0 answers

89 views

telerik top bar

I am trying to show a menu bar that runs at the top of the page as a header with a logo on the left. I dont want to show any item inside that menu bar. Does Telerik have something like this?

Menu

asked on 02 Jun 2021

3 answers

5.8K+ views

Get selected items in grid with rows details

Welcome,
I've got a grid , with grid row details like here:
https://demos.telerik.com/kendo-ui/grid/detailtemplate

also each grid ( "master" and "details") have a checkbox select column like here
https://demos.telerik.com/kendo-ui/grid/checkbox-selection

My grids have local javascript variable (array) which is bound, in master with filter "ParentId == null" , in details "ParentId == e.data.Id".

What I need is to get (for example on "onChange" event) all Id's which are selected. When i use the this.selectedKeyNames() i get Id's only from one specific grid.

Grid

answered on 01 Jun 2021