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
Related
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.
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.
I'm trying to customize my use of the Kendo UI kendoScheduler widget. I'm specifying a custom template for the editable window that pops up when you go to add/edit an appointment in the scheduler, like so:
editable: {
template: $("#editor").html()
},
I'm defining the template like this:
<script id="editor" type="text/x-kendo-template">
<h3>Edit Appointment</h3>
<p>
<label>Patient: <input name="title" /></label>
</p>
<p>
<label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
</script>
So now I want to add a Kendo UI DropDownList and configure it to populate from a remote datasource. How do you configure such things within a template?
Sample code (does not work):
<p>
<label>Type: </label><input id="appointmentTypeDropDownList" />
</p>
# var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } });
# $("#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ) ;
The error it gives with the above code is:
Uncaught Error: Invalid template:'
Probably this is just a script encoding issue; I'm more interested in the proper way to place a bound DropDownList inside of a template.
Update - The latest simplified version of what I'm trying to do is available at this jsfiddle URL. The goal is simply to bind the dropdown list in the most straightforward way possible. Thanks!
If you move your scheduler DataSource into your viewModel you can use the parenting functionality of a kendo Observable to have the DropDownList bind against the correct DataSource.
var viewModel = new kendo.observable({
appointmentTypes : new kendo.data.DataSource({
data: [{
id: 1,
text: "Wellness Exam"
}, {
id: 2,
text: "Diagnostic Exam"
}, {
id: 3,
text: "Nail Trim"
}]
}),
schedulerData: [{
id: 1,
start: new Date("2014/1/27 08:00 AM"),
end: new Date("2014/1/27 09:00 AM"),
title: "Breakfast"
}]
});
Now when you create the scheduler you just have it use the schedulerData property on the view model, as the DataSource for the scheduler.
$("#scheduler").kendoScheduler({
...
dataSource: viewModel.schedulerData,
...
});
The last piece is just changing your DropDownList declaration to use the appointmentTypes property on your view model.
<select id="appointmentTypeDropDownList" data-bind="source:appointmentTypes, value:id" data-text-field="text" data-value-field="id" data-role="dropdownlist" data-autobind="true" />
Since your template will be bound against the Observable objects in the schedulerData DataSource, Kendo will climb the parent tree of the object until it's able to resolve the appointmentTypes property that's on viewModel.
The template throws an error because the selector "#appointmentTypeDropDownList" should be escaped and look like this "\\#appointmentTypeDropDownList" (Kendo UI Documentation).
After you fix this you won't receive template errors but it still doesn't bind the data to the KendoDropDownList.
I checked what a KendoUI MVC helper will render in this case and it seems that if your template looks like this, it will work.
<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>
<p>
<label>Type: </label><input id="appointmentTypeDropDownList" />
<script>
var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } });
jQuery(function() { jQuery("\\#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ); });
<\/script>
</p></script>
It's not necessary to put any javascript in the template, you can use Kendo's data-attribute initialization features.
So, your template would look something like:
<label>Type: </label>
<input id="appointmentTypeDropDownList" data-text-field="ProductName" data-value-field="ProductID" data-bind="value:ProductID" data-source="dataSource" data-role="dropdownlist" data-autobind="true" />
Then you would have Javascript outside of your template:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp"
}
}
});
As long as dataSource is defined globally, you're good to go. There's more info on data attribute initialization here http://docs.telerik.com/kendo-ui/getting-started/data-attribute-initialization
Edit: just noticed your comment "data will depend on the selected datetime". You could always try re-defining the datasource options in the edit event, which is called prior to displaying the popup editor window. I've not used this scenario, but I don't see why it wouldn't work.
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>
I am using Jquery Form wizard plugin in a MVC application. http://thecodemine.org/
I have a form with 4 steps. in one of step i have upload functionality.
I want submit functionality at each step and also back and next steps. later steps are optional.
I was able to add a submit button in navigation. On clicking it, form data related to active step is only submitted and other data is null.
For more clarity of my issue:
View :
<form id="myform" method="post" action="/Controller/Action">
<div id="fieldWrapper">
<fieldset class="step fieldset" id="first">
<legend class="legend">First step</legend>
Some input controls
</fieldset>
<fieldset class="step fieldset" id="second">
<legend class="legend">Second step</legend>
some more input controls (optional)
</fieldset>
<fieldset class="step fieldset" id="third">
<legend class="legend">Third step</legend>
some more input controls with filu upload
(optional)
</fieldset>
<fieldset class="step fieldset" id="fourth">
<legend class="legend">Fourth step</legend>
some more input controls (optional)
</fieldset>
</div>
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<button type="submit" id="submitBtn">Submit and Finish</button>
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
Script:
<script type="text/javascript">
$(function () {
$("#myform").formwizard({
validationEnabled: true,
focusFirstInput: false,
disableUIStyles: true,
textSubmit: 'Submit and Finish',
textNext: 'Continue to next step',
next: "input:submit"
}
);
});
</script>
Updated the Jquery.form.wizard.js to so that the submit button hides at last step.
Now on each step i have submit button and navigation button.
When i submit form on second step, form data in second step is only posted and rest is not posted.
I went through the samples but could not find the appropriate one.
Can anyone suggest how to achieve this?
I went through the documentation and jquery.form.wizard.js file to get beeter understanding of what is done.
I just have to write some script as follows:
<script type="text/javascript">
$(function () {
$("#myform").formwizard({
validationEnabled: true,
focusFirstInput: false,
disableUIStyles: true,
textSubmit: 'Submit and Finish',
textNext: 'Continue to next step',
next: "input:submit"
}
);
});
$('#submitBtn').click(function () {
var stepInfo = $('#myform').formwizard('state');
for (var i = 0; i < stepInfo.activatedSteps.length; i++) {
stepInfo.steps.filter("#" + stepInfo.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled");
}
});
</script>