I'm trying to pass the value of the row
into the template function
{
field: "RuleName",
template: ruleRadioActive(<MyValueHere>),
title: global.textJSPartialView["RuleName"],
headerTemplate: *bla bla*
}
I want to pass the "RuleName" value to the function ruleRadioActive.
I've tried using "#= RuleName #" but it will pass the string and not the value.
Any solutions?
So basically I discovered that using a function in the template option automatically sends the object with the whole row structure to the function.
So if I have:
{
field: "RuleName",
template: templateFunction,
title: global.textJSPartialView["RuleName"],
headerTemplate: *bla bla*
}
and I want to print a <p> with some value in it
the function templateFunction will look something like this:
function templateFunction(DataItem){
return "<p>" + DataItem.<element in structure> + "</p>";
}
Related
I am using the response data from the server in my itemTemplate function to create a list of checkboxes with values.
The issue I am facing is, if there is a variable whose value has spaces in it eg: "In Progress" then it does not render correctly.
Below is my itemTemplate function and the html element after the data render.
itemTemplate: function (e) {
return "<li class='k-item><label class='k-label'><input type='checkbox' value=#= data.Status || data.all # />#= data.Status|| data.all #</label></li>"
}
Here is a demo of the same.
Is there a way to render the data so I could get the whole text inside the value attribute? Or Am I doing something wrong here?
Please suggest, Thank you !
You need to add escaped quotes like this:
\'#=data.country|| data.all #\'
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
itemTemplate: function(e) {
return "<li class='k-item><label class='k-label'><input type='checkbox' value=\'#=data.country|| data.all #\' />#= data.country|| data.all #</label></li>"
}
}
}],
I have to use templates to translate my grid's cells values.
For some reasons, the function I'm calling to translate is returning a promise.
I found the following topic related to my issue
Asynchronous cell template
I'm using the angular method with
ng-bind-html
$scope.lookUpEventNameAsync = function(data) {
refData.events().fetch(function() {
var eData = refData.events().data();
var refEvent = eData.find(function(re, i, a) {
return re.code === data.eventCode;
});
$("#async_tse_" + data.key).html(refEvent.name);
});
return $sce.trustAsHtml("<div id='async_tse_" + data.key + "'> </div>");
};
$scope.gridTimesheetColumns = [
{
field: "eventCode",
title: "Event",
template: "<span ng-bind-html='lookUpEventNameAsync(dataItem)'> </span>"
},
....
I made a similar thing to adapt it with the code I have and it's working.
But the problem now is that it's calling $scope.lookUpEventNameAsync several times and never stop calling it which is freezing the screen and make the app unusable.
Do you have an idea why and how can I prevent it ?
I needed a one way data binding like the following :
$scope.gridTimesheetColumns = [
{
field: "eventCode",
title: "Event",
template: "<span ng-bind-html='::lookUpEventNameAsync(dataItem)'> </span>"
},
I would like to know whether is there a way to program populate my kendo checkbox list like the image below through javascript object/array because most of the online search result are creating a list at html.
sample of output
If you already have the checkbox list rendered, then use MVVM checked binding:
http://demos.telerik.com/kendo-ui/mvvm/elements
http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked
If you want to render the checkbox list with JavaScript, according to some data, and check the checkboxes at the same time, then use Kendo UI templates and kendo.render()
http://docs.telerik.com/kendo-ui/framework/templates/overview
http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-render
<ul id="checkboxList"></ul>
<script>
var template = kendo.template("<li>" +
"<label>" +
"<input type='checkbox' #: isChecked ? \" checked='checked'\" : \"\" # />" +
"#: name #" +
"</label>" +
"</li>");
var data = [
{ id: 1, name: "foo", isChecked: true },
{ id: 2, name: "bar", isChecked: false }
];
var html = kendo.render(template, data);
$("#checkboxList").html(html);
</script>
Instead of kendo.render(), you can alternatively use a Kendo UI ListView and an item template. The template definition itself can be the same.
http://demos.telerik.com/kendo-ui/listview/index
http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#configuration-template
I am having 2 grids on my page with name grid1 and grid2.
Now i want to pass grid name as hardcoded to my 1 common javascript function for deleting records from grid like below:
for Grid 1 delete function:
field: "Id",
template:<a title="delete" onclick="javascript:return Delete(<#=Id#>,<#=grid1#>);" > //showing error in console grid1 is not defined
for Grid 2 delete function:
field: "Id",
template:<a title="delete" onclick="javascript:return Delete(<#=Id#>,<#=grid2#>);" > //showing error in console grid2 is not defined.
My javascript function:
function Delete(id, gridname) {
console.log(id,gridname)
}
Please try with the below code snippet. If you write any text between # (hash) the grid try to find that field in your datasource that's why you got the undefined error.
JS Function:
function Delete(id, gridname) {
var grid = $("#" + gridname).data("kendoGrid");
console.log(id, gridname)
}
for Grid 1 delete function:
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid1\");'></a>",
for Grid 2 delete function:
field: "Id",
template: "<a title='delete' onclick='javascript:return Delete(\"#:Id#\",\"grid2\");'></a>",
Let me know if any concern.
What I want is simple but I don't know if it's possible.
I have a Kendo Mobile ListView as below:
e.view.element.find("#list-serviceorders").kendoMobileListView({
dataSource: ds,
pullToRefresh: true,
template: $("#list-serviceorders-template").html()
});
And I want to send to the template some values to access on it. My view with the template is this:
<div data-role="view" data-before-show="GAPCP.viewBeforeShow" id="serviceorders" data-layout="main-item-list">
<ul id="list-serviceorders"></ul>
</div>
<script id="list-serviceorders-template" type="text/x-kendo-template" data-teste="teste">
<a href="views/entries.html?id=#: CodOs #">OS: #: CodOs #<br />
#: parameter.Divi1 #: #: CodDivi1 #/#: parameter.Divi2 #: #: CodDivi2 #</a>
</script>
Where you can read parameter.Divi1 and parameter.Divi2 are the places where I want to display those values. They're are not in the Data Source like the others values.
I don't want to create global variable 'cause I don't want to mess with my code and I can't use a function for that purpose because those values come from the database and it will execute a query for each list item iteration.
Any suggestion of how do that?
What I'm proposing is adding this information to the model in the controller. You can do it in DataSource.schema.parse or in requestEnd, even in a dataBound event if the widget accepts it.
When the data is received you iterate through the model and fills the remaining data not received from the server.
Example: Using parse
var ds = new kendo.data.DataSource({
transport: {
read: {
url : ...
}
},
schema : {
model: {
CodOs : { type: "number" },
CodDivi1: { type: "string" },
CodDivi2: { type: "string" }
},
parse: function (data) {
$.each(data, function (idx, elem) {
// Extend original elem
elem.parameter = {
Divi1: elem.CodDivi1.toUpperCase(),
Divi2: elem.CodDivi2.toLowerCase()
}
});
return data;
}
}
});
Where I compute parameter inside the parse function and set parameter.Divi1 to CodDivi1 in upper-case and parameter.Divi2 to CodDivi2 in lowercase.