I want to create a Kendo DatePicker in Kendo template. Here is my Kendo template.
<script id="popup-doc-details" type="text/x-kendo-template">
<input id="DateTesting" style="width: 180px">
</script>
How can I init Kendo DatePicker. For more info this template is part of a popup and shown when something choose from Kendo DropDown and DatePicker number will be dynamically changed with providing data. DropDown data is like.
[{name:"test1", tags:[{name:"datename",type:"date"},{name:"datename",type:"date"}]}, {name:"test2", tags:[{name:"datename",type:"date"}]}]
Example: If I choose test1 from DropDown, Kendo template will load DatePicker according to tags.
I know I can achieve this using loop in Kendo template. but my question is how can I init Kendo DatePicker dynamically.
You can create datepicker in template using MVVM style like this
<input name="selectedDate" type="date"
data-bind="value: selectedDate"
data-format="dd MMMM yyyy"
data-role="datepicker" />
For Angular2/4:
HTML
<!-- Calendar Icon -->
<span #anchor (click)="onToggle()" class="k-icon k-i-calendar"></span>
<!-- Kendo Popup with calendar inside -->
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
<kendo-calendar class="pointer" [(value)]="examDate" (valueChange)="calendarFunc($event)"></kendo-calendar>
</kendo-popup>
JS/TS
public onToggle(): void {
this.show = !this.show;
}
I use a show variable to display the popup.
For Jquery / Knockout:
Popup Info
Calendar Info
HTML
<!-- Anchor Position with calendar Icon iside -->
<div class="datepicker-anchor">
<span class="k-icon k-i-calendar" data-bind="click: onToggle.bind($data)" ></span>
</div>
<!-- Popup with calendar inside -->
<div id="popup">
<div id="calendar"></div>
</div>
JS/TS
private popup: any;
constructor() {
function onChangeCalendar() {
var date = this.value();
self.onToggle();
}
$("#calendar").kendoCalendar({
change: onChangeCalendar
});
this.popup = $("#popup").kendoPopup({
anchor: $(".datepicker-anchor")
}).data("kendoPopup");
this.popup.close();
}
onToggle = (): void => {
this.show = !this.show;
if(this.show)
this.popup.open();
else
this.popup.close();
};
Related
Using Kendo UI JQuery Editor control, How I can write html document as a template with predefined fields that get data from database ?
For example if user typed Name:[fname] [lname]
It get replaced with first and last name data from database. I use PHP.
The Editor provides reference to the HTML element which represents the editor's content area. You can therefore set the content of the DOM elements in the Editor's content:
<input id="ddl" />
<textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
<div >
<div>Hello <span id="fname" contenteditable="true">___</span>,</div>
</br>
<div>your email is: <span contenteditable="true" id="email">___</span></div>
</div>
</textarea>
<script>
$(document).ready(function () {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
//make the editor content non-editable and only some elements editable by setting the contenteditable attribute for the desired elements
var editor = $("#editor").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", false)
$("#ddl").kendoDropDownList({
optionLabel:"--Select user--",
dataTextField:"user",
dataValueField:"id",
dataSource:[
{id:1, user: "John", fname:"John",lname:"Doe",email:"john#email.com"},
{id:2, user: "Jane", fname:"Jane",lname:"Smith",email:"jane#email.com"}
],
change:function(e){
var item = e.sender.dataItem();
editorBody.find("#fname").text(item.fname);
editorBody.find("#email").text(item.email);
}
})
});
</script>
Here is an example
I have created a custom template for a task using this example:
http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template
<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p><label>Title: <input name="title" /></label></p>
<p><label>Start: <input data-role="datetimepicker" name="start" /></label></p>
<p><label>End: <input data-role="datetimepicker" name="end" /></label></p>
</script>
Now I need to add a 'Resources - Assign' button, just like the one in this example (Edit Task Form):
http://demos.telerik.com/kendo-ui/gantt/resources
What do I need to do to create this button? I can't find any API documentation for this part of the Gantt control.
There are a few steps needed to accomplish this.
First, add something like this to your Kendo template:
<div>
<label for='resources'>Resources:</label>
<div class='k-gantt-resources' style='display: none;'>
</div>
<div class='k-edit-field' data-container-for='resources'>
<a class='k-button' href='\\#'>Assign</a>
</div>
</div>
Next, you'll want to add the following two event handlers to the options when you initialize the widget:
edit: editHandler,
save: saveHandler
Finally, you'll want to create the two handlers referenced above. You are basically intercepting the default functionality and opening the popup yourself, then saving the results when complete (if they were modified).
var resoucesdEdited = false;
function editHandler(e)
{
var gantt = e.sender;
resoucesdEdited = false;
if (e.task)
{
e.container.on('click', 'div[data-container-for="resources"] > a', function (event)
{
event.preventDefault();
resoucesdEdited = true;
gantt._createResourceEditor(e.container.find('div.k-gantt-resources'), e.task);
});
}
}
function saveHandler(e)
{
if (e.task && resoucesdEdited)
{
this._updateAssignments(e.task.get("id"), e.task.get(this.resources.field));
}
}
I'm glad you asked this question because it's something I needed to know too, and you're right, the Telerik/Kendo documentation doesn't mention anything on how to do this!
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
I need to trigger the built in kendo-ui grid "add" action to this custom button in my template. only examples i can find are triggering custom functions. thanks
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label>Mock Text:</label>
<a class="k-button" onclick="trigger dataSource.change.add">Add Product</a>
</div>
</script>
You can add event for that button with jQuery, you can select it either by ID or its class and call addRow method of grid.
$("#btnAdd").click(function() {
var grid = $("#grid").getKendoGrid();
grid.addRow();
});
We using angular and kendo tab datasource to create kendotabstrip in HTML. Is there a way to select a default tab on load from k-data events. We can do it using jquery but looking for a way to select default tab using k-data-bind?
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-tab-strip k-content-urls="[ null, null]" k-data-source="tabData" k-data-text-field="'text'" k-data-value-field="'id'" k-options="configOptions">
<!-- tab list -->
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.hello = "Hello from Controller!";
$scope.tabData = [{id:'1', text:'tab 1'}, {id:'2', text:'tab 2'}];
$scope.configOptions={select:function(e){console.log(e);}}
})
</script>
Fiddle for reference.
http://jsfiddle.net/6dgxvqvb/