I am looking forward to add an kendoui autocomplete control in kendoui scheduler template. However, the below code does not make any call to get data for autocomplete textbox. I understand, it’s not wiring up any event.
Any help would be appreciated.
<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>
<p>
<label>Users: <input name="txtUsersAutoComplete" /></label>
</p>
</script>
<div id="scheduler"></div>
<script>
$("#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"
}
]
});
</script>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
}
});
$("#txtUsersAutoComplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "ProductName"
});
</script>
Related
I've got created a widget(combobox) with data from an external server.
I just want the value that I select from that combobox see into the label from another widget.
Source of the widget from the combobox:
<div id="exampleCombo">
<div class="demo-section k-content">
<h4>Facility</h4>
<input id="fac" style="width: 30%;" />
</div>
<script>
$(document).ready(function (user) {
$("#fac").kendoComboBox({
dataTextField: "client",
dataValueField: "client",
order: "ascending",
height: 400,
dataSource: {
// type: "odata",
type: "json",
transport: {
read: "/mvc/controllers/UserfacilitiesCombo/get/" + user
},
group: { field: "facility" }
},
});
});
Source of the widget with the label on it:
<div id="exampleLabel">
<div class="demo-section k-content">
<ul class="forms">
<li>
<label>FacilityName</label>
<input id="FacPass" name="FacPass" value="Test" class="k-textbox" style="width: 100%;" />
</li>
</ul>
</div>
Can anybody help me on this?
You can use the change event. Put this after your dataSource and add a class name to your target label
change: function(e) {
var value = this.value();
$('.yourLabelClass').html(value);
}
Here is some more info about the available events
https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/change
Im struggling on this in hours now, I cant find a good documentation on how to implement simple ajax UPDATE on server using forms and Kendo MVVVM and datasource.
KENDO MVVM
$(function() {
var apiUrl = "http://a31262cd2f034ab8bcda22968021f3b8.cloudapp.net/api",
meetingDatasource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "/meetings/4",
dataType: "jsonp"
},
update: {
type: "PUT",
url: apiUrl + "/meetings",
contentType: "application/json; charset=utf-8",
dataType: 'json',
},
parameterMap: function(options, operation) {
return kendo.stringify(options);
}
},
batch: true,
change: function() {
},
schema: {
model: {
id: "Id",
fields: {
Title: { editable: true },
StartTime: { type: "date" },
EndTime: { type: "date" }
}
}
}
});
meetingDatasource.fetch(function () {
var viewModel = kendo.observable({
description: result.Description,
title: result.Title,
venue: result.Location,
startDate: result.StartTime,
endDate: result.EndTime,
saveChanges: function (e) {
//im not sure with this line
this.set("Title", this.Title);
meetingDatasource.sync();
e.preventDefault();
}
});
kendo.bind($("#view"), viewModel);
});
});
THE UI
<ul class="forms" id="ul-meeting">
<li>
<label for="title" >Title:</label>
<input data-bind="value: title" class="k-textbox" style="width:350px;"/>
</li>
<li>
<label for="description" >Description:</label>
<textarea data-bind="value: description" id="description" rows="6" cols="80" class="k-textbox" style="width:350px;"></textarea>
</li>
<li>
<label for="location">Venue:</label>
<textarea data-bind="value: venue" id="location" rows="4" cols="80" class="k-textbox" style="width:350px;"></textarea>
</li>
<li>
<p>
<label for="start-datetime">Start:</label>
<input data-bind="value: startDate" id="start-datetime" style="width:200px;" />
</p>
<p>
<label for="end-datetime">Finish:</label>
<input data-bind="value: endDate" id="end-datetime" style="width:200px;" />
</p>
</li>
</ul>
The problem is, the TRANSPORT READ triggers but the TRANSPORT UPDATE never triggers even if I explicity call the Datasource.sync(). Is is something I am missing here?
Your code is not complete (you are not showing what is result or how you trigger saveChanges but from what I see the problem is that you are not updating the content of the DataSource (meetingDataSource).
In your code that you copy the fields from result into and ObservableObject but you never update the content of the DataSource. When you do this.set, in that context this is not the DataSource so when you call sync you are doing nothing.
Try doing:
meetingDatasource.data()[0].set(`Title`, this.Title);
meetingDatasource.sync();
This should do the trick!
I was searching all over but couldn't find an answer to my question. I'm initializing an autocomplete widget as the following:
This code is loaded into my DOM as a result of an Ajax request:
<div id="view_ticketCreate">
<form id="jar_ticketing_create"action="" class="k-block jar-container">
<fieldset class="login">
<legend>Kontaktinformationen</legend>
<p class="notice">Definieren Sie hier die Kontaktinformationen zu diesem Ticket.</p>
<p>
<label>Kunde</label>
<input data-role="autocomplete" data-bind="source: customers, events{click: inject}" data-text-field="CName" placeholder="Suchen Sie nach dem Kunde" type="text" id="jtc_cID" class="k-textbox sourced">
</p>
<p>
<label>Kontakt</label>
<input type="text" name="jtc_cName" class="k-textbox">
</p>
<p>
<label>E-Mail</label>
<input data-bind="value: cMail" type="text" name="jtc_cMail" class="k-textbox">
</p>
<p>
<label>Telefon</label>
<input data-bind="value: cPhone" type="text" name="jtc_cPhone" class="k-textbox">
</p>
<p>
<label>Gerät</label>
<select name="dID" class="k-textbox sourced">
<option value="000">Nicht geräte spezifisch</option>
<option value="001">CFBS01</option>
<option value="002">CFBS02</option>
<option value="003">CFBS03</option>
<option value="004">CFBS04</option>
</select>
</p>
<p>
<label>Login</label>
<input type="text" name="cLogin" class="k-textbox">
</p>
</fieldset>
</form>
</div>
<script>
kendo.bind($("#view_ticketCreate"), view_ticketCreate);
</script>
in my main (an always loaded) JS file i got:
var view_ticketCreate = kendo.observable({
customers: new kendo.data.DataSource({
transport: {
read: {
url: "http://server/API/customers/search/",
dataType: "jsonp",
contentType: "application/json; charset=utf-8"
},
parameterMap: function(options, operation) {
return {
SearchTag: options.filter.filters[0].value
}
}
},
schema: {
data: "data"
},
serverFiltering: true,
dataTextField: "CName",
select: function(e){
if (e.item == null) return;
var DataItem = this.dataItem(e.item.index())
cPhone: DataItem.Telefon
}
}),
inject: function(e){
alert('ok')
},
cPhone: "0123456789",
cMail: "asd#asd.de"
});
However, the autocomplete search works perfect. But now I want to populate the fields jtc_cMail and jtc_cPhone with values from my autocomplete request. But either the select: Function is working (not allowed here (guess because MVVM?), also the custom event inject is fireing.
I couldn't find anything how I need to go on. Please help me out.
Greetings
Just have to use e.sender.dataItem function and pass in the index of the item selected.
selectPerson: function(e) {
var item = e.sender.dataItem(e.item.index());
viewModel.set("selectedPerson", item);
}
See jsbin http://jsbin.com/iLaK/3/edit
Here is my code.
$(document).ready(function() {
var kendoWindow_room = $("#window_room");
kendoWindow_room.hide();
$("#roombut").on(
'click',
function()
{
home_id = $("#home_id").val();
if (home_id) {
kendoWindow_room.data("kendoWindow").open();
$('.k-window').css({'marginLeft': -$('.k-window').width() / 2});
dataSource.read();
$("#room_listview_pager .k-link:first").hide();
$("#room_listview_pager .k-link:last").hide();
$("#room_listview_pager a.k-link").each(function(index) {
$(this).addClass("pager_new_icons");
$(this).addClass("mortgage");
});
}
}
);
home_datasource = new kendo.data.DataSource({
transport: {
read: {
url: "<?php echo BASE_URL . 'user/get_edit_home_name' ?>",
dataType: "json"
}
}
});
room_datasource = new kendo.data.DataSource({
transport: {
read: {
url: "<?php echo BASE_URL . 'common/get_dropdown_entries' ?>",
dataType: "json",
data: {thisisfor: "floortype"}
}
}
});
var crudServiceBaseUrl = "<?php echo BASE_URL . 'user/room_crud_listview_' ?>",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: function() {
return crudServiceBaseUrl + "read?home_id=" + $("#home_id").val()
},
dataType: "json",
contentType: "application/json"
},
update: {
url: crudServiceBaseUrl + "update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "create",
dataType: "json",
type: "POST"
}
},
batch: true,
pageSize: 1,
schema: {
model: {
id: "id",
fields: {
rd_home_id: "rd_home_id",
homename: "homename",
nickname: "nickname",
type: "type",
wallcolor: "wallcolor",
trimcolor: "trimcolor",
floorcolor: "floorcolor",
floortype: "floortype",
windows: "windows"
}
}
}
});
$("#room_listview_pager").kendoPager({
dataSource: dataSource,
info: false,
numeric: false
});
var room_listview = $("#room_listview").kendoListView({
dataSource: dataSource,
template: kendo.template($("#room_listview_template").html()),
editTemplate: kendo.template($("#room_editview_template").html())
}).data("kendoListView");
// Add Row
$("#room_add_row").on("click", function(event) {
event.preventDefault();
room_listview.add();
});
// Delete Row
$("#room_delete_row").on("click", function(event) {
event.preventDefault();
room_listview.remove(room_listview.element.children().first());
if (dataSource.total() < 1) {
room_listview.add();
} else {
dataSource.read();
}
});
// edit row
$("#room_edit_row").on("click", function(event) {
event.preventDefault();
room_listview.edit(room_listview.element.children().first());
});
// save row
$("#room_save_row").on("click", function(event) {
event.preventDefault();
room_listview.save();
});
if (!kendoWindow_room.data("kendoWindow")) {
kendoWindow_room.kendoWindow({
width: "520px",
title: "Room Designer"
});
}
});
<div style="background-color: #FFFFFF; border: 0; max-width: 90px; float: left;" id="room_listview_pager"></div>
<span style="float: right; margin-top: 4px;">
<a id="room_add_row" class="k-add" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon7.png" alt="" height="36" width="37"></a>
<a id="room_delete_row" class="k-delete" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon8.png" alt="" height="36" width="37"></a>
<a id="room_edit_row" class="k-edit" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon9.png" alt="" height="36" width="37"></a>
<a id="room_save_row" class="k-insert" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon10.png" alt="" height="36" width="37"></a>
</span><div class="clear"></div>
This is the kendo template with id - "room_listview_template"
<div class="product-view k-widget">
<dl>
<dt>Home</dt>
<dd>#:homename#</dd>
<dt>Nickname</dt>
<dd>#:nickname#</dd>
<dt>Type</dt>
<dd>#:type#</dd>
<dt>Wall Color</dt>
<dd>#:wallcolor#</dd>
<dt>Trim Color</dt>
<dd>#:trimcolor#</dd>
<dt>Floor Color</dt>
<dd>#:floorcolor#</dd>
<dt>Floor Type</dt>
<dd>#:floortype#</dd>
<dt>Windows</dt>
<dd>#:windows#</dd>
</dl>
</div>
This is the kendo template with id - "room_editview_template"
<div class="product-view k-widget">
<dl>
<dt>Home</dt>
<dd>
<select id="home"
data-role="dropdownlist"
data-text-field="nickname"
data-value-field="id"
data-source="home_datasource"
data-bind="value:rd_home_id"
name="rd_home_id"
required="required"
validationMessage="required">
</select>
<span data-for="rd_home_id" class="k-invalid-msg"></span>
</dd>
<dt>Nickname</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:nickname" name="nickname" required="required" validationMessage="required" />
<span data-for="nickname" class="k-invalid-msg"></span>
</dd>
<dt>Type</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:type" name="type" required="required" min="1" validationMessage="required" />
<span data-for="type" class="k-invalid-msg"></span>
</dd>
<dt>Wall Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:wallcolor" name="wallcolor" required="required" validationMessage="required" />
<span data-for="wallcolor" class="k-invalid-msg"></span>
</dd>
<dt>Trim Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:trimcolor" name="trimcolor" required="required" validationMessage="required" />
<span data-for="trimcolor" class="k-invalid-msg"></span>
</dd>
<dt>Floor Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:floorcolor" name="floorcolor" required="required" validationMessage="required" />
<span data-for="floorcolor" class="k-invalid-msg"></span>
</dd>
<dt>Floor Type</dt>
<dd>
<select
data-role="dropdownlist"
data-text-field="name"
data-value-field="value"
data-source="room_datasource"
data-bind="value:floortype"
name="floortype"
required="required"
validationMessage="required">
</select>
<span data-for="floortype" class="k-invalid-msg"></span>
</dd>
<dt>Windows</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:windows" name="windows" required="required" validationMessage="required" />
<span data-for="windows" class="k-invalid-msg"></span>
</dd>
</dl>
</div>
I have a listview inside a kendowindow with options to create, read, update and delete.
It uses one template to list the records and another template to edit.
In the fields, I have a dropdown list, with the field name "rd_home_id" its data-text-field and data-value-field are different. It displays home name in as the option and each option has its integer value.
The insert, and update is working fine, I get the integer value in the server side.
While reading, obviously I would like to display the home name - so, I have the field name "homename" - and from the server, I pass this value and I am able to see it in the listing template - which works perfectly fine.
The only problem remaining is - after I insert a record, the "homename" is not showing up - its null - all the other values are showing up and is correct.
How could I show the value "homename" right after the insert?
I know I can call the call the read function of the datasource in the room_save_row's onclick right after calling the save function of the listview - which would fix the issue, but doing that would make the validation not work.
Is there any way to change the value of the fields which is rendered in the template?
Thank you
Just solved the problem
If the inserted record is sent as a response from the server ( from the create URL ) - it would get updated - and the value would be reflected in the listing template - before I was not sending anything from the server. that was the problem.
I have a form and I'm trying to perform Ajax posts.
With the default submit button the dialog window closes, with the jQuery button, nothing happens.
I want the dialog window to stay open so I can keep doing Ajax requests uninterrupted and only close when I press Esc or click the big "X".
Thanks
<div id="formBox" style="display: hidden;">
<form>
<fieldset>
<legend>File System Space Calculator</legend>
<p>
<label for="curr_alloc">Current Space Allocation:</label>
<br />
<input type="text" size="5" name="curr_alloc" id="curr_alloc" />
KB <input type="radio" name="curr_unit" value="KB" />
MB <input type="radio" name="curr_unit" value="MB" />
GB <input type="radio" name="curr_unit" value="GB" checked/>
TB <input type="radio" name="curr_unit" value="TB" />
</p>
<p>
<label for="curr_percent">Current Usage Percentage:</label>
<br />
<input type="text" size="5" name="curr_percent" id="curr_percent" />
</p>
<p>
<label for="desired_percent">Desired Usage Percentage:</label>
<br />
<input type="text" size="5" name="desired_percent" id="desired_percent" />
</p>
<br />
<p>
<input type="submit" value="calculate"/></p>
</fieldset>
</form>
</div>
<div id="calcBox" style="display: none;"> </div>
<script>
$(document).ready(function() {
$("#formBox").dialog({
bgiframe: true,
autoOpen: false,
height: 500,
width: 500,
modal: false,
closeOnEscape: true,
title: "Calculator",
closeText: 'Close',
buttons:
{
"Calculate": function()
/* form post */
$("#calcQuery").submit(function(){
$.post("calc.php", $("#calcQuery").serialize(),
function(data){
if (data.length > 0)
{
$("#calcBox").html(data);
$("#calcBox").show();
}
else
{
$("#calcBox").html("<h1>nuttin' here yet</h1>");
}
}, "html");
return false;
});
/* form post */
}
}
});
$('#calcButton').click(function(){
$('#formBox').dialog('open');
return false;
});
});
</script>
In your button method, just make the post. You shouldn't have to do anything else.
buttons:{
"Calculate":function(){
$.post("calc.php", $("#calcQuery").serialize(), function(data){ if (data.length > 0) {
$("#calcBox").html(data);
$("#calcBox").show();
}
else
{
$("#calcBox").html("<h1>nuttin' here yet</h1>");
}
}, "html");
});
}
I apologize for the formatting. I worked with what you gave me without opening an editor. You shouldn't need to return false in a jQuery-UI button.
This works (except for form reset which is addressed in another post)
// form popup
$(document).ready(function()
{
$("#formBox").dialog({
bgiframe: true,
autoOpen: false,
height: 600,
width: 400,
modal: false,
closeOnEscape: true,
title: "Calculator",
buttons: {
"Calculate": function() {
// form post
$.ajax({
type: "POST",
url: "calc.php",
data: $("#calcQuery").serialize(),
dataType: "html",
success: function(response)
{
$("#calcBox").html(response);
$("#calcBox").show();
},
error: function
(xhr, ajaxOptions, thrownError)
{
alert(xhr.status);
alert(thrownError);
}
}).responseText;
// form post
}
}
});
$('#calcButton').click(function(){
$('#formBox').dialog('open');
});
});