I am trying to code two filteringselects which should both change according to data entered into any of the forms.
So data entered into fs1 should trigger changes in fs2.
Data entered into fs2 should trigger changes in fs1.
I am in a spring environment which in my case means that the dojo code is in a jsp file and the filtering select fields are populated through a Controller class on the server side using #ModelAttribute annotations to make the data available as a variable in the jsp file.
I have the relation data on the Java side so it's available through the controller.
Here is what confuses me at the moment.
I am new to DOJO and the documentation on the DOJO support site is a little hard to grasp for me. I would like to see a conceptual list of what is needed to accopmplish and connect the separate stores of my filteringselects.
When there is a change in one of the filteringselects, how do I inform the controllerclass of the changes and send the data that remains in the filteringselect?
This question could also be read as: how can I call a method with input parameters that hold the data available in the edited filteringselect?
I suggest we work on this in two incremental parts:
Get the first FilteringSelect's onChange event working
Wire them up to use server data stores
The following code sample takes a Dojo Campus' codependent FilteringSelect example and simplifies it so that its data stores are local. It shows how to programmatically instantiate two FilteringSelects with the second being dependent on the first by an onChange event handler.
Can you please try running it and let me know if you get it working?
Once we get your first FilteringSelect triggering filtering on the second, I will edit to add an explanation on how to convert them to use server side data stores.
<html>
<head>
<title>Test File</title>
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">
<label for="state">State:</label>
<input id="state">
<label for="city">City:</label>
<input id="city">
<script type="text/javascript" src="dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
var cityJson = {
label: 'name',
items: [{ name: 'Albany', state: 'NY' },
{ name: 'New York City', state: 'NY' },
{ name: 'Buffalo', state: 'NY' },
{ name: 'Austin', state: 'TX' },
{ name: 'Houston', state: 'TX' }]
};
var stateJson = {
identifier: 'abbreviation',
label: 'name',
items: [ { name: 'New York', abbreviation: 'NY' },
{ name: 'Texas', abbreviation: 'TX' } ]
};
new dijit.form.ComboBox({
store: new dojo.data.ItemFileReadStore({
data: cityJson
}),
autoComplete: true,
query: {
state: "*"
},
style: "width: 150px;",
required: true,
id: "city",
onChange: function(city) {
dijit.byId('state').attr('value', (dijit.byId('city').item || {
state: ''
}).state);
}
},
"city");
new dijit.form.FilteringSelect({
store: new dojo.data.ItemFileReadStore({
data: stateJson
}),
autoComplete: true,
style: "width: 150px;",
id: "state",
onChange: function(state) {
dijit.byId('city').query.state = state || "*";
}
},
"state");
});
</script>
</body>
</html>
in the namespace of the jsp:
xmlns:springform="http://www.springframework.org/tags/form"
sample form:
<springform:form action="#" >
<label for="country">Country:</label>
<springform:select id="country" path="country" items="${countryList}" itemLabel="country" itemValue="id"/>
<div id="citySelectDiv"></div>
</springform:form>
javascript code:
<script type="text/javascript">
<![CDATA[
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
function countryChanged(dataFromServer){
//convert json to dojo filteringSelect options
var options = {
identifier: 'id',
label: 'city',
items: dataFromServer
};
var cityStore =new dojo.data.ItemFileReadStore({data : options});
// create Select widget, populating its options from the store
if (!dijit.byId("citySelectDiv")) {
//create city selction combo
new dijit.form.FilteringSelect({
name: "citySelectDiv",
store: cityStore,
searchAttr : "city",
}, "citySelectDiv");
}else{
//if already created the combo before
dijit.byId('citySelectDiv').set('value',null);
dijit.byId('citySelectDiv').store = cityStore;
}
}
Spring.addDecoration(new Spring.ElementDecoration({
elementId : "country",
widgetType : "dijit.form.FilteringSelect",
widgetAttrs : {
promptMessage: "Select a Country",
required : true,
onChange : function(){
var xhrArgs = {
url: "ajax/country/" +dijit.byId('country').get('value'),
handleAs: 'json',
load: function(dataFromServer) {
countryChanged(dataFromServer);
}
};
//make the ajax call
dojo.xhrGet(xhrArgs);
}
}
}));
Sample Controller method:
#ResponseBody
#RequestMapping("/ajax/country/{country}")
public List<City> clientSelection(#PathVariable("country") String country ) {
log.info("Country = {} ",country);
return cityService.findCitiesByCountry(country);
}
Related
To get row information of currently selected row we can do this
var current = e.sender.dataItem(e.sender.select());
But how to get the same when i click on Edit button?
I tried $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr")); it didnt work.
EDIT
I tried ways as suggested on the answers below, but its still giving me null.
in the screenshot the commented code doesn't work either
COMPLETE CODE
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
<!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
<script src="Scripts/KendoUI.js" type="text/javascript">
</head>
<body>
<div id="grid">
</div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" },
{ command: "list" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
editable: "popup",
toolbar: ["create"],
dataBound: function (e) {
//<input name="age" class="k-input k-textbox" type="text" data-bind="value:age">
},
edit: function (e) {
//This currentItem is null :(
var currentItem = $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr"));
if (!e.model.isNew()) {
$('.k-window-title').text("Newton Sheikh");
}
}
});
</script>
</body>
</html>
If you use the edit function in the grid, you can access the data item attributes which is in edit mode using:
var grid = $("#yourGrid").kendoGrid({
dataSource: yourGridDatasource,
...
edit: function (e) {
var attribute = e.sender.dataItem(e.container).attributeName;
// or simply
var attribute2 = e.model.attributeName;
}
});
You should use e.container instead of e.sender, like this:
$("#grid").data("kendoGrid").dataItem($(e.container).closest("tr"))
Update to make it work with a popup
If you are using a popup editor, then the container will be the popup itself and the above will not work.
In that case, you can use the uid of the row to locate it within the table:
var row = $("#grid").data("kendoGrid").tbody.find("tr[data-uid='" + e.model.uid + "']");
If you do not need a reference to the actual row, but only the data item, then you can simply use e.model. I have created a dojo with your code and if you check the console after you click "edit", you will see that there is no difference: http://dojo.telerik.com/iqAPO
var gridDataById= $("#grid").data("kendoGrid");
//Getting selected row
var selectedRow = gridDataById.dataItem(gridDataById.select());
console.log(selectedRow);
List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?
I am using the built in functionality of Kendo Grid to export the grid data in pdf and excel http://demos.telerik.com/kendo-ui/grid/pdf-export. It is working fine for me. I want to customize the data that is exported i.e. add some additional columns and remove some of the columns of grid. Is there any way to customize the export data using templates or some other feature.
Thanks in advance.
You have two options:
Define a second grid with the columns that you want to export to PDF and when asked to export actually export the second. Both grids should share the datasource so filtering, orders... will be shared.
Intercept pdfExport event that is fired before the PDF is generated and hide/show the columns using showColumn and hideColumn methods.
The following code shows second approach (despite I -personally- prefer first). You will see that before clicking on export button you see EmployeeID but the PDF does not contain this column but includes Country.
$(document).ready(function() {
kendo.pdf.defineFont({
"DejaVu Sans" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
var grid = $("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
},
dataSource: {
type: "odata",
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
}
}
},
columns: [
{
title: "Photo",
width: 140,
template :'<img src="http://demos.telerik.com/kendo-ui/content/web/Employees/#: data.EmployeeID #.jpg" alt="#: EmployeeID #" />'
},
{ field: "FirstName" },
{ field: "LastName" },
{ field: "Country", hidden: true },
{ field: "EmployeeID" }
],
scrollable: false,
pdfExport: function(e) {
grid.showColumn(3);
grid.hideColumn(4);
}
}).data("kendoGrid");
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/pako_deflate.min.js"></script>
<div id="grid"></div>
I have a Kendo treeview that is built as below codes (see below). Each tree node has a unique data id field (that is employee Id).
I would like to have a text box ( <input type="text" ... /> ) and a button ( <input type="button" ... /> ) so user can input some id and when she hit the button, the button click event handler will let the treeview expand the node whose id matches the input id. How can I do that? Thank you very much.
Details of click event handler or the button:
function buttonExpand_onClick()
{
var id = $("textboxEmployeeId").val();
// ???
// how can I do the following code lines to expand the node with id of "id" to see all its children?
}
Details of the existing Kendo treeview building codes:
<div id="treeviewEmployee">
</div>
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
</script>
$(function(
{
var defaultRootSelectedId = 1; // 1 is employee id of the root employee on first loading
$.ajax({
url: '/Employee/AjaxGetEmployeeNodes/?id=' + defaultRootSelectedId,
type: 'GET',
dataType: 'json',
async: false,
success: function (data, textStatus, xhr) {
$("#reeviewEmployee").kendoTreeView({
template: kendo.template($("#treeview-template").html()),
dataSource: data,
select: treeview_onSelect
});
_treeview = $("#treeviewEmployee").data("kendoTreeView");
},
error:
function (xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
});
You can access the datasource on the treeview and find the node by id. I would also like to add that the treeView has a 'findByText()' method as well, in case that is what you want.
HTML
<script id="treeTemplate" type="text/x-kendo-template">
#: item.text #
</script>
<div id="content">
<div id="form">
<label>Node ID:
<input id="nodeId" type="text"/>
</label>
<button id="expandNodeBtn">Expand Node</button>
</div>
<h2>TreeView</h2>
<div id="treeView"/>
</div>
JAVASCRIPT
(function ($) {
$(document).ready(function () {
$("#treeView").kendoTreeView({
dataSource: [
{
text: 'one with id 1',
id: 1,
items: [
{
text: 'one-child-1',
id: 2
},
{
text: 'one-child-2',
id: 3
}
]
},
{
text: 'two with id 4',
id: 4,
items: [
{
text: 'two-child-1',
id: 5
},
{
text: 'two-child-2',
id: 6
}
]
}
]
});
$("#expandNodeBtn").on("click", function(e) {
var val = $("#nodeId").val();
console.log('val: ' + val);
var treeView = $("#treeView").data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(val); // find item with id = 5
var node = treeView.findByUid(dataItem.uid);
treeView.expand(node);
});
});
})(jQuery);
JSFiddle
I also put together a JSFiddle sample for you to play with: http://jsfiddle.net/jsonsee/D35Q6/
Slightly related, but I came here looking for an answer to this question: How to expand the whole branch when clicking to a parent node in angular treeview? Since I didnt find any answers, I post my solution here. Hope it helps someone.
html
<div id="treeview" kendo-tree-view="tree" k-options="options" k-on-change="selectItem(dataItem)">
</div>
controller
$scope.options = {
dataSource: dummyData,
template: $scope.treeItemTemplate
}
$scope.treeItemTemplate = "<button ng-click='expandRoot(dataItem)'>Blow up</button>";
$scope.expandRoot = function expandRoot(dataItem) {
dataItem.expanded = true;
if (dataItem.hasChildren) {
dataItem.load()
var children = dataItem.children.data();
children.forEach(function (c) {
c.expanded = true;
$scope.expandRoot(c)
});
}
}
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);