I am using kendo ui tree with template http://demos.kendoui.com/web/treeview/checkboxes.html
Kendo template doc http://docs.kendoui.com/getting-started/framework/templates/overview
Now my template is displaying checkbox to only leaf nodes
template:"#if(!item.hasChildren){# <input type='checkbox' name='checkedFiles#= item.id #' d_text='#=item.value#' parent_id='#=item.parent_id#' value='true' />#}#"
I want to modify this template. I want this name,d_text,parent_id in hidden for all the nodes and check box is only in leaf node
Template for the hidden values
template: "<input type='hidden' name='checkedFiles#= item.id #' d_text='#=item.value#' parent_id='#=item.parent_id#' />",
What changes do I have to do in template?
This is my jQuery code
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: false,
template:"#if(!item.hasChildren){# <input type='checkbox' name='checkedFiles#= item.id #' d_text='#=item.value#' parent_id='#=item.parent_id#' value='true' />#}#"
},
dataSource: homogeneous,
dataBound: ondata,
dataTextField: "value"
});
Use this.
template:"# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#",
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.
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 controller as follows:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.questionTypes = [
{display: 'Text', 'name': 'text'},
{display: 'Paragraph', 'name': 'textarea'},
{display: 'Multiple Choice', 'name': 'radio'},
];
$scope.top = {
heading: '',
questions: [
{
tite: 'title 1',
choices: ['']
}
]
};
});
And an HTML body as follows:
<body ng-controller="MainCtrl">
<input ng-model="top.heading" placeholder="heading"/>
<br/>
<div ng-repeat="question in top.questions track by $index">
<select ng-model="question.type" ng-options="c.name as c.display for c in questionTypes"></select>
<div ng-if="question.type == 'radio'">
<div ng-repeat="option in question.choices track by $index">
<input type="text" ng-model="option"/>
<button ng-click="question.choices.push('')" ng-disabled="$index < question.choices.length - 1">Add</button>
<button ng-click="question.choices.splice($index, 1)" ng-disabled="question.choices.length == 1">Del</button>
</div>
</div>
</div>
<pre>{{top | json}}</pre>
</body>
When the user makes the Multiple Choice selection, I want to show a fragment that provides the ability to add various choices. The choices are displayed in repeater.
That all works, but data binding on nested repeater is not working. I assuming this has something to do with scoping, but I can't figure it out.
Any help would be appreciated.
I have created a plunkr at http://plnkr.co/edit/6FxY44HgddRjrLOHlQGF
After fumbling around with this for a while, this is what I did to fix the problem.
I changed:
<input type="text" ng-model="option"/> //after changing model to ng-model
To
<input type="text" ng-model="question.choices[$index]"/>
This allowed the input to reference the parent question object and the choices array on the object instead of referencing the option reference within ng-repeat.
I am trying to use a template as shown below, the outcome is a view with all elements from the template on one line, even though i am using to separate the elements. Why does this not display properly? It seems that no matter what styling i do it still ends up a single line view.
UPDATE
The culprit is the kendo style sheet - kendo.mobile.all.min.css -
So the new question for a kendo expert is why does kendo handle input fields differently when they appear in a listview via a template than when they appear outside of a template?
An input field outside of a listview template gets this class
.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea
Which results in no odd styling rules :) Normal text field view
An input field inside of the template gets this class
.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root select:not([multiple]), .km-root .k-dropdown, .km-root textarea
which results in these rules being applied to it (making the field sit in a wierd spot and loose all normal field stlying ie border background etc.) Im not 100% sure which wrapper is causing this
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #385487;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background:
transparent;
My work around is to give any text fields inside listview templates the class="k-input" which obviously excludes them from the above css -
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<!-- eventDetail view -------------------------------------------------------------------------------------------------->
<div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
</div>
</header>
<form id="updateEventForm">
<div id="updateEvent">
<div id="eventDetail"></div>
<p>
<input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back" />
<input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button" data-min="true" value="Save" />
</p>
<div id="eventResult"></div>
</div>
</form>
</div>
<script id="eventDetail-template" type="text/x-kendo-template">
<p>
<input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_loc" id="event_loc" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp #" />
</p>
<p>
Share this
<input data-role="switch" id="event_share" data-min="true" checked="checked" value="#= share #"/>
</p>
<input name="userID" id="userID" type="hidden" value="#= user_id #" />
<input name="eventID" id="eventID" type="hidden" value="#= event_id #" />
</script>
<script>
function getEventDetailData(e) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/mpt/website/api/event_details.php",
dataType: "jsonp",
type: "GET",
data: { userID: e.view.params.user_id, eventID: e.view.params.event_id },
cache: false
},
parameterMap: function(options) {
return {
userID: options.userID,
eventID: options.eventID
};
}
},
schema: { // describe the result format
data: "results" // the data which the data source will be bound to is in the "results" field
}
});
console.log(e);
$("#eventDetail").kendoMobileListView({
dataSource: dataSource,
template: kendo.template($("#eventDetail-template").html())
}).data("kendoMobileListView");
}
//update event
function sendUpdateEvent() {
var siteURI = "http://localhost/mpt/website/api/update_event.php?";
app.showLoading();
var user_id = $('#userID').val();
var event_id = $('#eventID').val();
var event_type = $('#event_type').val();
var event_loc = $('#event_loc').val();
var event_date_time = $('#event_date_time').val();
var event_share = $('#event_share').val();
var formVals = 'eventID=' + event_id + '&userID=' + user_id + '&event_type=' + event_type + '&event_loc=' + event_loc + '&event_date_time=' + event_date_time + '&event_share=' + event_share;
var fullURI = siteURI + formVals;
$.ajax({
url: fullURI, dataType: 'json', success: function (data) {
$('#eventResult').html(data.results);
app.hideLoading();
app.navigate("#view-myEvents");
}
});
}
$('#eventUpdateCancelButton').click(function () {
app.navigate("#view-myEvents");
});
$('#eventUpdateSaveButton').click(function () {
sendUpdateEvent();
});
$('#updateEventForm').submit(function () {
sendUpdateEvent();
return false;
});
</script>
ListView widgets are supposed to be applied to <ul> elements.
Try changing:
<div id="eventDetail"></div>
to:
<ul id="eventDetail"></ul>
Also with this bit of code:
$("#eventDetail").kendoMobileListView({
dataSource: dataSource,
template: kendo.template($("#eventDetail-template").html())
}).data("kendoMobileListView");
The .data() call on the end isn't doing anything here and can be removed, and also you can pass just the text string as the template. You don't need to call kendo.template() yourself. So you can change that to just:
$("#eventDetail").kendoMobileListView({
dataSource: dataSource,
template: $("#eventDetail-template").html()
});
Why would this user control have the apostrophes encoded? It is causing issues with Jquery Templates. The apostrophe is being encoded to ' from an AJAX request.
<script type="text/html" id="editTimeTemplate">
#Html.TextBoxFor(q => q.Time, new { type = "text", maxlength = 8, data_bind = "value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" })
</script>
<script type="text/html" id="editTimeTemplate">
<input data-bind="value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" id="Time" maxlength="8" name="Time" type="text" value="" />
</script>
Internally the TextBoxFor uses a TagBuilder, which will do this encoding for all attribute values. The simple workaround is to not use a helper method, but an HTML tag (I am using MVC4, so the IdFor and NameFor methods you would have to implement yourself).
<input type="text" id="#Html.IdFor(m => m.Time)" name="#Html.NameFor(m => m.Time)" maxlength="8" data-bind="value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" />
or of course just:
<input type="text" id="Time" name="Time" maxlength="8" data-bind="value: editTime.time.time, time: { options : { defaultTime: '8:00', showPeriod: true, showLeadingZero: false} }" />
If this bothers you a lot (or you do this a lot) I would go the route of implementing my own TexBoxFor extension method and override any behavior you do not like.