When double click on "editable" enabled Kendo Scheduler, a preset template window pops up. I am wondering if there is any way that I can add a Kendo TabStrip control to that window.
You need to do couple of things to achieve that:
Create a custom template
<div id="scheduler"></div>
<script id="customEditorTemplate" type="text/x-kendo-template">
<div id="tabstrip">
<ul>
<li id="tab1">Tab 1</li>
<li>Tab 2</li>
</ul>
<div>Content 1</div>
<div>Content 2</div>
</div>
</script>
Configure custom template in editable section
Attach the tab strip component in edit section
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
dataSource: [
{
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Breakfast"
}
],
editable: {
template: $("#customEditorTemplate").html()
},
edit: function (e) {
$("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab($("#tab1"));
}
});
</script>
Sample code: http://runner.telerik.io/fullscreen/ofuHU
Hope that helps.
Related
I have a Kendo Scheduler in MVC Core, and I need to open the custom popup on click of the events on calendar. I am able to add the Script tag and give ID and Call the template as pop up by using that ID.
Issue I have is when I try to add the kendo control within script it fails. normal buttons and labels work fine. Moment I add the Kendo Button it fails.
Can someone help on this one
CODE:
<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>Start: <input data-role="datetimepicker" name="end" /></label>
</p>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
editable: {
template: $("#editor").html()
},
views: [
{ type: "day" }
],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
You should either use MVVM to create a custom editor or add an edit event handler, and when the event fires initialize a widget from a DOM element in the template. Example
I want to make an alert when click on Tab 1 only, but seem it not working. Appreciate your help here.
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div>
<div>Content 1</div>
</div>
<div>Content 2</div>
</div>
<script>
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select("li:first");
$("#tabstrip").on("click", function() {
tabStrip.select(1);
alert("hi");
});
</script>
full demo in here
Currently you are setting the onclick function to the whole tabstrip. Try it like this:
$("#tabstrip li:first").on("click", function() {
alert("hi");
});
Additionally you can use the onSelect event function to identify the selected element anytime.
var onSelect = function(e) {
var a = e.item.innerText;
console.log(e.item.innerText);
if(a ==="Tab 1"){
console.log("Tab 1 selected");
}
};
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/events/select
Well, I am using KendoJS grid and I have this code here in my .js file:
var viewModel = kendo.observable({
people: new kendo.data.DataSource(...),
isActive:true,
friends: new kendo.data.DataSource(...),
selectionChanged: function(){...
}
});
$(document).ready(function () {
kendo.bind($("#sampleGridContainer"), viewModel);
});
In my .html file, I have a kendo grid:
<div id="sampleGridContainer">
<div data-role="grid"
data-columns="[...]"
data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
data-bind="source: people"></div>
</div>
<script id="sampleTemplate" type="text/x-kendo-template">
<form id="sampleForm">
...
<div data-container-for="somedropdown" class="k-edit-field">
<input name="somedropdown" id="somedropdown"
data-role="dropdownlist"
data-type="text"
data-text-field="name"
data-value-field="value"
data-bind="value: someValue, visible: isActive, source: friends, click: selectionChanged" />
</div>
...
</form>
</script>
Now, in my dropdown input element, someValue, isActive and friends variables are properly working - infact the drop down list shows up fine. But the problem is click event selectionChanged is not called. If I remove this from template, the event starts working, but my question is when all the other variables on the same scope are accessible in template, why does event selectionChanged not get called?
Any help is highly appreciated.
I have also encountered this problem, my workaround for this is that I initialize my kendoDropDownList on the edit event of grid.
edit: function (e){
e.container.find("input[name='somedropdown']").kendoDropDownList({
dataTextField: "name",
dataValueField: "value",
data-bind="value: viewModel.someValue, visible: viewModel.isActive, source: viewModel.friends, click: viewModel.selectionChanged"
});
}
Then the html would look something like this:
<div data-role="grid"
data-columns="[...]"
data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
data-bind="source: people, events: { edit: onEdit }">
</div>
<script id="sampleTemplate" type="text/x-kendo-template">
<form id="sampleForm">
<div data-container-for="somedropdown" class="k-edit-field">
<input name="somedropdown"/>
</div>
</form>
</script>
Hope this works for you.
I have a my-tag component that simply renders a title:
html
<div id="content"></div>
<script id="main-template" type="text/mustache">
<my-tag title="This is the title"></my-tag>
</script>
javascript
var Component = can.Component.extend({
tag: 'my-tag',
template: '<h1>{{title}}</h1>',
viewModel: {
title: '#'
}
});
$('#content').html(can.view('main-template', {}));
output
<div id="content">
<my-tag title="This is the title">
<h1>This is the title</h1>
</my-tag>
</div>
I would like to have the output as follows:
<div id="content">
<my-tag>
<h1>This is the title</h1>
</my-tag>
</div>
How can I get the component to not render the title attribute in my-tag?
Here is the jsfiddle.
You can't prevent it from rendering, however, you might be able to remove it after the component is created like:
var Component = can.Component.extend({
tag: 'my-tag',
template: '<h1>{{title}}</h1>',
viewModel: {
title: '#'
},
events: {
init: function(){
this.element.removeAttr("title");
}
}
});
Also, if you are starting a new CanJS project, I'd encourage you to switch to can.stache as that will be the default templating engine in 3.0. It's highly compatible with can.mustache.
I have a kendo grid. I am using an add and custom button in the toolbar as the following code:
toolbar: ["create", {
text: "Print record",
className: "k-grid-custom",
imageClass: "k-add"
}],
I also want to add a custom toolbar (dropdown menu) as this example
I used similar code in the demo like
toolbar: kendo.template($("#toolbarIsExpire").html()),
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
</script>
I want to show in the toolbar the add button and my custom button and the dropdown menu (IsExpired)
How to mix between the two toolbar in order to have both of them ?
Extend your template:
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
<a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"> </span>Add new record</a>
</script>