I m trying to work with celltemplate. But click event did not work.
$scope.format = function(val){
return val.replace(/\//g, "");
};
var executionColumns = {
data: [],
enableSorting: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
enableColumnMenu: true,
enableFiltering: true,
columnDefs: [
{ field: 'StartDate', cellTemplate: '<button ng-click="format (row.entity)">log</button>' },
{ field: 'Status' },
]
};
So what should I do? What is the wrong?
It works for me like the 2nd code
columnDefs: [
{ field: 'StartDate', cellTemplate: '<button ng-click="format(grid.getCellVale(row.entity) )">log</button>' },
{ field: 'Status' },
]
or move your format function to an externalscope defined as
$scope.globalExternalScope = {
format:function(entity){..........}
}
and then use the template like
columnDefs: [
{ field: 'StartDate', cellTemplate: '<button ng-click="getExternalScopes().format(grid.getCellVale(row.entity) )">log</button>' },
{ field: 'Status' },
]
Use
<button ng-click="grid.appScope.format (row.entity)">log</button>
it is working for me now!
In case you are using .component inside of which you render a ui-grid and your method is defined as:
this.handleClick = function(){...}
It will be available to you in cellTemplate via
cellTemplate: '<button ng-click="grid.appScope.$ctrl.handleClick()">log</button>' }
Related
I am using DataTables.js and want to pass an array as a parameter:
This piece of code works (see columnDefs):
var table = $('#html_table').DataTable({
paging: false,
language: {
searchPlaceholder: "e.g.: .msg, AU2019-00XX",
search: "Filter Results"
},
order: [
[response.order_by_column, response.order_by]
],
columnDefs: [
{ width: 70, targets: 0 }, { width: 50, targets: 1 }, { width: 50, targets: 2 },
{otherStuff...},
{otherStuff...}
]
But this piece of code does not work (see columnDefs):
Array Creation
html_col_width = []
for(i=0; i<response.html_col_width.length; i++){
html_col_width.push({
"width": response.html_col_width[i],
"targets": i
})
}
Data Table Creation
var table = $('#html_table').DataTable({
paging: false,
language: {
searchPlaceholder: "e.g.: .msg, AU2019-00XX",
search: "Filter Results"
},
order: [
[response.order_by_column, response.order_by]
],
columnDefs: [
html_col_width,
{otherStuff...},
{otherStuff...}
]
Why is it not possible to pass "html_col_width" as a parameter?
Since each element of the html_col_width array should be a separate element of the columnDefs array, you can use spread syntax to merge it into the array:
columnDefs: [
... html_col_width,
{ otherstuff...},
{ otherstuff...}
]
I'm using kendo grid,where i have a requirement to generate dynamic HTML based on value of a column which will be returned by another function.I have the following code
$("#divGenerateLogin_kendogrid").kendoGrid({
dataSource: {
data: data,
pageSize: 10
},
sortable: true,
reorderable: true,
pageable: {
pageSizes: true,
buttonCount: 5
},
filterable: true,
// selectable: true ,
// dataBound: onDataBound,
columns: [
{
field: "StudentName",
title: "Student Name",
type: "string"
},
{
field: "Class",
title: "Class",
type: "string"
},
{
title: "Login",
template: "#: LoginColHtml(IsLoginAvilable==1) #"
}
]
});
function LoginColHtml(isLoginAvilable) {
var html = "";
if (isLoginAvilable == true) {
html = "<button type='button' class='btn-ressetpwd'><i class='fa fa-key'></i> reset password</button>";
} else {
html = "<button type='button' class='btn-generatelogin'><i class='fa fa-user'></i> generate login</button>";
}
// "<div>#: (IsGuardianLoginAvilable==1) #</div>";
return html;
}
Instead of returning actual html in a column its returning as a string. How can i add actual HTML to the column instead of as a string ?
FYI
I have tried with this and it worked
{
title: "Guardian Login",
template: "#= LoginColHtml(IsLoginAvilable==1) #"
}
I have a column binded to a field called state, which has the values: S or L. I want to map this to following:
S => Short,
L => Long
This is how the binding is defined:
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableHorizontalScrollbar: 0,
columnDefs: [
{name: 'action', field: 'state', width: 110, enableFiltering: false}
]
};
I am already using cellclass and celltemplating, but either one is used for class application or event binding respectively. How do I set cell value based on an ng-if?
If it helps anyone, I ended up doing this:
let stateTemplate = "<div>{{row.entity.state == 'L' ? 'Buy' : 'Sell'}}</div>"
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableHorizontalScrollbar: 0,
columnDefs: [
{name: 'action', field: 'state', cellTemplate: stateTemplate, enableFiltering: false}
],
data: someData
};
I have the following template in my Kendo Grid:
$("#Grid").kendoGrid({
dataSource: {
// etc (type, transport, etc)
batch: false,
pageSize: self.gridPageSize,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
sort: { field: "Name", dir: "asc" }
},
dataBound: function (e) {
var body = this.element.find("tbody")[0];
if (body) {
ko.cleanNode(body);
ko.applyBindings(ko.dataFor(body), body);
}
$(".k-grid-edit").html("Edit");
$(".k-grid-edit").addClass("btn btn-default btn-sm");
},
edit: function (e) {
$(".k-grid-update").html("Update");
$(".k-grid-cancel").html("Cancel");
$(".k-grid-update").addClass("btn btn-success btn-sm");
$(".k-grid-cancel").addClass("btn btn-default btn-sm");
},
cancel: function (e) {
setTimeout(function () {
$(".k-grid-edit").html("Edit");
$(".k-grid-edit").addClass("btn btn-default btn-sm");
}, 0);
},
filterable: true,
sortable: {
allowUnsort: false
},
pageable: {
refresh: true
},
scrollable: false,
columns: [{
field: "Name",
title: self.translations.Columns.Name,
filterable: true
},
// etc... (more columns)
{
field: "Id",
title: " ",
width: 80,
filterable: false,
template: '<button type="button" data-bind="click: runNow.bind($data,#=Id#)" class="btn btn-primary btn-sm">Run Now</button>'
}, {
command: ["edit"],
title: " ",
attributes: { "class": "text-center" },
filterable: false,
width: 200
}],
editable: "inline"
});
I get the following error:
SyntaxError: missing ) in parenthetical
* return ((d.runNow || {}).bind($data)
The above error is seen in FireBug and comes from kendo.web.min.js
Do I need to escape the parentheses here or what? What's the correct way to write the template?
EDIT
I would also like to note that it seems there is no error until i click the "Edit" button.. that's when I get this error message. So probably my first guess about it being the template is not correct.. maybe there is some bug when using inline editing + templates?
I searched Over the Google. I didn't get any source for my requirement.
My output is like
If I click the 1st column linkbutton eFocus011 or other rows linkbutton means it will go to new web bage, but the toolbar Add new record was not working, because I used template for System Name columns field. How to get the correct output?
My code:
var grid= $("#DivGrid").kendoGrid(
{
dataSource: DataSource4,
scrollable: true,
sortable: true,
filterable: false,
reorderable: true,
resizable: true,
pageable: true,
toolbar: [ { text : "Add new record",name: "popup",iconClass: "k-icon k-add"} ],
editable : {
mode : "inline"
// template: kendo.template($("#customPopUpTemplate").html())
},
navigable: true,
columns:
[
{
field: "SystemName",
title: "System Name",
width:"130px",
// template: '<a href >#: SystemName # </a>'
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId #\" href='\\#'>#= SystemName #</a>"
// template:'<a href class="list k-Linkbutton" onclick="NewWindow(this.id)" id="#= SystemId#" >#= SystemName #</a>'
// template: '<a href="\\#" onclick="NewWindow(this.id)" id="#= SystemId#" >#= SystemName #</a>'
},
{
field: "SystemIP",
title: "System IP",
width:"100px"
},
{
field: "SystemType",
title: "Type",
width:"80px",
editor: function (container, options) {
$("<input />")
.attr("data-bind", "value:SystemType")
.appendTo(container)
.kendoDropDownList({
dataSource: [ { text: "--Select--" ,value: "0"},{ text: "PC" ,value: "1"},{ text: "LAPTOP" ,value: "2" }],
dataTextField: "text",
dataValueField: "text"
});
}
},
{
field: "OSKey",
title: "OS Key",
width:"200px"
},
{
command: ["edit","destroy"],
title: " ",
width: "190px"
}
]
}).data("kendoGrid");
$(".k-grid-popup", grid.element).on("click", function ()
{
var popupWithOption =
{
mode: "popup",
template: kendo.template($("#customPopUpTemplate").html()) ,
window: {
title: "Add New Record"
}
};
grid.options.editable = popupWithOption ;
grid.addRow();
$(".k-window-action")
{
//visibility: hidden ;
}
grid.options.editable = "inline";
});
};
</script>
Also I used two types of editing. If I click toolbar, means I used popup Kendo editing edit and Delete means inline editing?
I think error is in
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId #\" href='\\#'>#= SystemName #</a>"
If I changed this line to:
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId=0 #\" href='\\#'>#= SystemName #</a>"
It will work only toolbar, columns linkbutton is not working.
Thanks in advance!!!
Your code is looking good to me
Confirm whether SystemId is present in models, if not then Rectify "SystemId" to "SystemIP"
and make a check
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemIP#\" href='\\#'>#= SystemName #</a>"