Questions on Kendo UI for jQuery Forum

1 answer

292 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

468 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

217 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

82 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.6K+ 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

2 answers

146 views

weird behavior with kendo editor embedded in a form

Hi team,

When kendo editor is embedded in a <form> with other input fields, pressing enter in a field triggers the first button in editor toolbar (maybe because the editor buttons don't have the type=button attribute ?!).

You can try that on this same form: pressing enter in Subject field will trigger the bold button.

Please advise on this.

Thank you.

Laurent.

Editor

answered on 01 Jun 2021

1 answer

203 views

how to render a read only calendar from a remote iCal?

Hello, we use an OnlyOffice calendar for our scheduling. We need to make that calendar visible outside of OnlyOffice. Unfortunately OnlyOffice doesn't support iframing of calendars.

However it does provide a way to export an iCal via a URL.

I'm hoping the Kendo Scheduler can import that iCal (same domain, different FQD, ie www.domain.com is the display site, data is coming from onlyoffice.domain.com).

I found the example on how to use the scheduler, but it refers to loading a local iCal, which doesn't help me.

I've also had great difficulty finding adequate documentation for this? Something simple like:

1) what to load

2) how to initialize from different sources, including a remote a ical

3) how to make sure the calendar is read only

Any and all help is appreciated.

Thanks!

Charles

Calendar

Scheduler

answered on 01 Jun 2021

1 answer

97 views

Gantt Custom View : The name of the selected custom view does not appear in the dropdown.

I created a custom view by taking inspiration from the one here. And like in this demo, the name of the selected custom view disappears from the dropdown when I make my window smaller. Do you plan to fix this bug soon?

Gantt

answered on 31 May 2021

1 answer

473 views

Kendo Gantt Chart Export to Excel

Hi All,

I need Kendo Gantt Chart Export to Excel option how can be do if any example is there please provide me, please help me to provide excel option.

Gantt

answered on 31 May 2021

1 answer

1.5K+ views

Create forms dynamically

Hi guys

I am loosely trying to recreate this sample editing nodes using a form, but using the kendo form as I like the ability to add validation etc

The first time I create the form it works.. but if I try to update it ( e,g select another node) , the values are not displayed.

dojo

The above link hopefully explains what I mean.. I try destroying the form and then remaking it ( resetting the fields to the new values) , but I never get to see the new values. ( click on the open form button a 2nd time)

Any pointers would be greatly appreciated!

Many thanks

Rob

Form

answered on 31 May 2021