I'm using a slider inside of Kendo UI Template.
<script type="text/x-kendo-template" id="template3">
<div>
<b> Grades: </b> <br />
<input id="slider" class="temperature" value="#= temper #" data-bind="value:temper"/>
</div>
</script>
The template is called by edit function on the grid.
var grid = $("#grid").kendoGrid({
editable: {
mode:"popup",
template:kendo.template($("#template3").html())
},
...
I created the JS slider
var slider = $("#slider").kendoSlider({
increaseButtonTitle: "Right",
decreaseButtonTitle: "Left",
min: 0,
max: 5,
smallStep: 1,
largeStep: 2
}).data("kendoSlider");
The problem is that the Slider is not displayed on the popup editor. Only is displayed the value. Could anybody please help me?
Your slider element isn't initially available thus $("#slider") returns nothing. You should call this code once the grid initializes its editor template. Use the edit event of the grid for that:
var grid = $("#grid").kendoGrid({
editable: {
mode:"popup",
template:kendo.template($("#template3").html())
},
edit: function() {
$("#slider").kendoSlider({
increaseButtonTitle: "Right",
decreaseButtonTitle: "Left",
min: 0,
max: 5,
smallStep: 1,
largeStep: 2
})
}
Alternatively you can set the data-role attribute:
<script type="text/x-kendo-template" id="template3">
<div>
<b> Grades: </b> <br />
<input data-role="slider"
data-min="0"
data-max="0"
data-small-step="1"
data-large-step="2"
class="temperature"
data-bind="value:temper"
/>
</div>
</script>
Related
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'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/
I need help using a Kendo UI list view which lives within a grid row detail template.
here is something I have done so far.
<div id="grid">
</div>
<script type="text/x-kendo-template" id="gridDetailTemplate">
<div class='grid-edit'>
<div class='edit-list'></div>
</div>
</script>
<script type="text/x-kendo-template" id="editItemtemplate">
<div class='edit-Item'>
#if(Type=='string'){#
<ul><li><b>#:Name#</b></li><li><input class='inputString' value='#:DataVal()#'/></li></ul>
#}else if(Type=='number'){#
<ul><li><b>#:Name#</b></li><li><input class='inputNumber' data-role='numerictextbox' data-type='number' value='#:DataVal()#'/></li></ul>
#}else if(Type=='date'){#
<ul><li><b>#:Name#</b></li><li><input class='inputDate' data-role='datepicker' value='#:kendo.toString(DataVal(),'MM/dd/yyyy')#'/></li></ul>
#}else if(Type=='boolean'){Name #<input type='checkbox'/>
#}#
</div>
</script>
<script type="text/javascript">
$(document).ready(function () {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var selFields = new Object();
$.each(data, function (index, elem) {
selFields[elem.Name] = new Object();
selFields[elem.Name]["type"] = elem.Type;
});
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "http://localhost:4916/Deal",
dataType: "json"
}
},
schema: {
data: "Data", total: "Total",
model: {
fields: selFields
}
}
},
height: 430,
filterable: true,
sortable: true,
pageable: false,
detailTemplate: kendo.template($("#gridDetailTemplate").html()),
detailInit: detailInit,
columns: [{
field: "SecurityName",
title: "Security Name",
width: 250
},
{
field: "DateOfAcquisition",
title: "Date Of Acquisition",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "Acres",
title: "Acres",
width: 120
}
]
});
});
});
function detailInit(e) {
$.get("http://localhost:4916/DataAttribute", function (data, status) {
var detailRow = e.detailRow;
detailRow.find(".edit-list").kendoListView({
dataSource: {
data: data,
schema: {
model: {
DataVal: function () {
switch (this.get("Type")) {
case "number"
}
if (e.data[this.get("Name")])
return e.data[this.get("Name")];
else
return '';
}
}
}
},
template: kendo.template($("#editItemtemplate").html())
});
});
}
</script>
My code gets dynamic field list and binds it to the data source for grid.
Then, in the detailInit event, I find the div within row detail and convert it into kendo UI list, for which the template have been created.
Now, when I use data-bind="value: DataVal()" ,it doesn't pick up the values of List data source. It works the way I have done i.e. value="#: DataVal() #". But, data-role does not convert the fields to specified types which are datepicker and numericinput in my case.
I believe that data-role not being used is caused due to same issue as data-bind not being read.
Can anyone help me out with this? Also, feel free to suggest any alternate ways and general code improvements. I am an ASP.NET developer and usually don't work on pure html and javascript.
PS: I would be happy to provide the context on what I am trying to achieve here if anyone is interested.
Thanks in advance.
If you can rig up a jsFiddle or jsBin example that would help debug the issue.
However, try removing the parenthesis:
data-bind="value: DataVal"
Kendo should detect that DataVal is a function and call it on its own.
I experienced a similar situation in a listview template. I created a JSFiddle to demonstrate:
http://jsfiddle.net/zacharydl/7L3SL/
Oddly, the solution is to wrap the contents of the template in a div. It looks like your template already has this, so YMMV.
<div id="example">
<div data-role="listview" data-template="template" data-bind="source: array"></div>
</div>
<script type="text/x-kendo-template" id="template">
<!--<div>-->
<div>method 1: #:field#</div>
<div>method 2: <span data-bind="text: field"></span></div>
<input data-role="datepicker" />
<!--</div>-->
</script>
var model = kendo.observable({
array: [
{ field: 'A'},
{ field: 'B'}
]
});
kendo.bind($('#example'), model);
I just need a little help here about displaying KendoUI window.
My situation is I have a button that will call the window. At first click of button, the window dialog will appear but after closing the window by clicking the 'x' button I can't make it appear again by pressing the same button.
I don't know where's my error.
Here's my code:
<script type="text/javascript">
$(document).ready(function() {
$(".test").click(function (){
$("#window").kendoWindow({
actions: ["Refresh","Maximize","Minimize","Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px"
});
});
});
</script>
<div id="window" style="visibility: hidden;"></div>
<input type="button" class="test" value="test" />
Put kendo window out of button click like this,
<script type="text/javascript">
$(document).ready(function() {
$(".test").click(function (e) {
$("#window").data("kendoWindow").open();
e.preventDefault();
});
$("#window").kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px",
});
});
</script>
<div id="window" style="display:none;"></div>
<input type="button" class="test" value="test" />
Div style is "display:none;" insted of "visibility: hidden;".
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);
});