I'm trying to bring about a grid with a detail template using declarative initialization. I would appreciate if someone tells me why the details template in the code below is not working. Here's the fiddle I use: http://jsfiddle.net/SiddharthSD2/5MU4r/76/
<div id="demo-grid" data-role="grid"
data-bind="source: people" data-columns='[
{"field": "name",
"title": "Full Name"
},
{"field":"phone", "title":"Phone"}]'
data-details-template="detail-template"
></div>
<script id="detail-template" type="text/x-kendo-template">
<div>
<span>Phone Number for #=name#:</span>
<span data-bind="text: phone" />
<input data-bind="value: phone" />
</div>
</script>
JavaScript
var ds = new kendo.data.DataSource({
data: [
{name: "Joe", phone: "212-555-1234"},
{name: "Sally", phone: "212-999-7785"},
{name: "Bill", phone: "212-244-7035"}
]
});
// Create an observable object.
var vm = kendo.observable({
people: ds,
});
kendo.bind($("#demo-grid"),vm);
It is not data-details-template="detail-template" but data-detail-template="detail-template" (singular detail).
Your JSFiddle modified here http://jsfiddle.net/OnaBai/5MU4r/77/
Related
Hi I am starting with VueJS but I have a problem how to connect IMG src in my template with URL writing in my file JSON .for example when I have some product and I like to show full logo for each article I need to add URL exists in file JSON to src IMG .how I do that please thank
<img src="info.imglogo" alt="Media Aside" />
<span v-text="info.logotitle"></span>
</template>
var infos = [
{
compteur: 1,
imglogo: "../imgs/theme.jpg",
logotitle: "Themeforest",
title: "Thrive Themes",
description:
"Conversion Focused WordPress Themes & Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers & clients.",
link1: "Visit ThriveTheme",
link2: "Read Review",
url: "../imgs/theme.jpg"
},
{
compteur: 2,
logotitle: "Elegant",
title: "Sub-Ex",
description: "com.goodreads.Tres-Zap",
link1: "Dr",
link2: "Honorable",
url: "../imgs/theme.jpg"
},
];
export default {
data() {
return {
infos: infos
};
},
name: "Home",
components: {}
};
</script>
like this.
<template>
<div v-for="(info, index) in infos" :key="index">
<img :src="info.imglogo" alt="Media Aside" v-if="info.imgLogo != undefined" />
<span v-text="info.logotitle"></span>
</div>
</template>
You can do as follow:
<img :src="info.imglogo" alt="Media Aside" />
Explanation:
If you use variables and not text, you have to prepend your HTML attributes by ":"
Here is a working code. Replace your entire vue file by this one:
<template>
<div>
<div v-for="info in infos" :key="info.compteur">
<img :src="info.imglogo" alt="Media Aside" />
<span v-text="info.logotitle"></span>
</div>
</div>
</template>
<script>
export default {
name: "Home",
components: {},
data() {
return {
infos: [
{
compteur: 1,
imglogo: "../imgs/theme.jpg",
logotitle: "Themeforest",
title: "Thrive Themes",
description:
"Conversion Focused WordPress Themes & Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers & clients.",
link1: "Visit ThriveTheme",
link2: "Read Review",
url: "../imgs/theme.jpg",
},
{
compteur: 2,
logotitle: "Elegant",
title: "Sub-Ex",
description: "com.goodreads.Tres-Zap",
link1: "Dr",
link2: "Honorable",
url: "../imgs/theme.jpg",
},
],
};
},
};
</script>
I have a form with a DropDownList inside a Kendo window and I want to bind existing data to it. Examples for this abound and I've done it in other situations before, but this one (which seems like it should be really easy) is escaping me because I can't seem for the life of me to get the DropDownList to show the correct value. I figure I must be missing something really simple, but I haven't done Kendo in over a year, and looking at my previous work isn't helping me either.
Extremely simplified code:
<button onclick="OnButtonClick();">Click Me</button>
<div id="form-window"></div>
<script type="text/x-kendo-template" id="form-template">
<div class="form-group">
<label for="Url">URL</label>
<input name="Url" type="text" value="#= Url #" required="required" />
</div>
<div class="form-group">
<label for="HttpVerb">HTTP verb</label>
<input name="HttpVerb" data-bind="value:HttpVerb" data-source="httpVerbsDataSource" data-value-field="verb" data-text-field="verb" data-role="dropdownlist" />
</div>
</script>
<script type="text/javascript">
var formWindow = $("#form-window")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
scrollable: false,
width: 500,
actions: ["Close"],
open: function () {
kendo.init($("#form-window"));
}
}).data("kendoWindow");
var formTemplate = kendo.template($("#form-template").html());
var httpVerbsDataSource = new kendo.data.DataSource({
data: [
{ verb: "GET" },
{ verb: "POST" },
{ verb: "PUT" }
]
});
function OnButtonClick(e) {
var dataItem = {
Url: "abcdef",
HttpVerb: "POST"
};
var windowContent = formTemplate(dataItem);
formWindow.content(windowContent);
formWindow.center().open();
}
</script>
When I click the button, the window opens and the form text field is populated correctly, and the DropDownList has properly been bound to the data source, but the value in my data item is not selected.
JS Bin: https://jsbin.com/wariyorilo/edit?html,js,output
What am I missing? Thanks in advance.
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
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>
Have a look at the sample here.
The problem I have is that I need to have 0.00 value remain in the numerictextbox even though the value is deleted in the control. At the moment it appears as empty on the UI. Can anyone advise the cleanest solutions for problem?
You can achieve your goal wiring the change event of the widget and modify its value and the model's one when it is triggered.
<div id="view">
<div data-template="containertpl" data-bind="source: People"></div>
<button data-bind="click: AddNew">Add</button>
</div>
<script id="containertpl" type="text/x-kendo-template">
<div>
<label for="FirstName#:id#">Name</label>
<input name="FirstName#:id#" type="text" data-bind="value: FirstName"/>
<input data-role="numerictextbox" data-bind="value: Income, events: { change: numericChange }"/>
</div>
</script>
var viewModel = kendo.observable({
People: [
{id: 1, FirstName: "", Income: "0.00" },
{id: 2, FirstName: "", Income: "0.00" },
{id: 3, FirstName: "", Income: "0.00" }
],
numericChange: function(args) {
var numeric = args.sender;
if (numeric.value() === null) {
numeric.value(0);
args.data.set("Income", 0);
}
}
});
viewModel.AddNew = function(){
viewModel.People.push({id: viewModel.People.length + 1, FirstName: "Generated", Income: "0.00"});
};
$(document).ready(function(){
kendo.bind($("#view"), viewModel);
});