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) #"
}
Related
I'm currently trying to get a kendo ColorPalette to work with inline editing on my grid. I've pretty much got it all figured out except that I'm having some difficulties posting the selected color value to my controller.
Kendo Grid:
$("#ContactTagsGrid").kendoGrid({
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "/Admin/Tag/GetTagsByOrg",
dataType: "json",
data: {
orgId: OrganizationId
}
},
create: {
url: "/Admin/Tag/Create",
dataType: "json",
type: "POST",
data: function () {
return kendo.antiForgeryTokens();
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", nullable: true },
OrgId: { type: "number" },
Name: { type: "string" },
Color: { type: "string", defaultValue: "#f20000", validation: { required: true } }
}
}
},
pageSize: 20
}),
pageable: true,
sortable: true,
filterable: {
extra: false
},
scrollable: false,
columns: [
{
field: "Id",
hidden: true
},
{
field: "Name"
},
{
field: "Color",
editor: colorEditor,
template: function(dataItem) {
return "<div style='width: 25px; background-color: " + dataItem.Color + ";'> </div>";
},
width: "500px"
},
{
command: [
{
name: "Edit",
template:
"<a href='\\#' class='small btn btn-link k-grid-edit edit-text'><span class='fa fa-pencil'></span>Edit</a>",
text: "",
className: "fa fa-pencil"
},
{
template:
"<a href='\\#' class='small btn btn-link danger delete-text k-grid-delete'><span class='fa fa-trash-o'></span>Delete</a>",
name: "Delete",
text: " Delete",
className: "fa fa-trash-o"
}
],
width: "170px"
}
],
editable: {
mode: "inline",
destroy: false // don't use the kendo destroy method since we're using bootbox
},
// Custom save/cancel buttons
edit: function (e) {
var command = e.container.find("td:last");
command.html("<a href='\\#' class='small btn btn-primary k-grid-update'>Save</a><a href='\\#' class='small btn btn-default k-grid-cancel' style='margin-left: 5px'>Cancel</a");
}
});
Javascript to replace the default grid inline-editor with the Kendo ColorPalette:
function colorEditor(container, options) {
// create an input element
var div = $("<div></div>");
var input = $("<input />");
input.attr("name", "Color");
// append it to the container
div.appendTo(container);
input.appendTo(div);
// initialize a Kendo UI ColorPicker
div.kendoColorPalette({
palette: [
"#f20000", "#c60000", "#337a00"
],
columns: 3,
change: function () {
var color = this.value();
$("input[name=Color]").val(color);
}
});
}
When I click on the Save button, the only values that are posted to my controller are the Name and the OrgId.
If I set a defaultValue in the schema of my model like I did in the code above, then the default value for Color is always posted no matter if I select a different color or not.
If I do not set a defaultValue in the schema, then the value that is posted for Color is null.
So basically, I just need help updating my model so that it is correct when posting to the controller. I can see that the value of my input <input name="Color" /> is being updated correctly every time that I select a new color but again, it's not actually posting the value that it contains.
Not sure if this is needed, but here is what my model looks like:
public class TagCreateViewModel
{
public int OrgId { get; set; }
public string Name { get; set; }
public string Color { get; set; }
}
I ended up stumbling across this question on SO that helped me solve my problem. I just adapted it to use the Kendo Color Palette instead and it works perfectly now.
function colorEditor(container, options) {
$("<div type='color' data-bind='value:" + options.field + "'/>")
.appendTo(container)
.kendoColorPalette({
palette: [
"#f20000", "#c60000", "#337a00", "#54b010", "#9adc0d", "#28cb9b", "#0eac98", "#0ed6e8", "#14a7d1",
"#bc0aef", "#560ea7", "#2713bc", "#1457d1"
],
columns: 7
});
}
What I'm trying to do is store some data in a specific column that is calculated by using the data from another column.
I currently have a function that returns the number of available licenses for the given Id in JSON
function getAvailableLicenses(id) {
var url = "/Host/Organization/AvailableLicenses/" + id;
$.get(url, function (data) {
return data.AvailableLicenses;
});
}
How do I go about storing this number in a column named "AvailableLicenses"?
Here is my current Grid:
$("#OrganizationGrid").kendoGrid({
dataSource: viewModel.get("orgDataSource"),
filterable: {
extra: false
},
sortable: true,
pageable: true,
columns: [
{ field: "Id", hidden: true },
{ field: "Name", template: "<a href='/Host/Organization/Detail/#:Id#'>#:Name#</a>" },
{ field: "LicenseNumber", title: "Number of Licenses" },
{ field: null, title: "Available Licenses", template: "#= getAvailableLicenses(Id) #" },
{ field: "LicenseExpiration", title: "License Expiration", format: "{0:MM/dd/yyyy}" },
{ field: "State" },
{ field: "Active" }
],
editable: false
});
As you can see, I tried to create a null column with a template that calls the function for the given Id.
By using Fiddler I can see that the function is indeed being called for all of the rows, but the AvailableLicenses column just displays Undefined for every row.
Is there something I'm missing here to get this to work?
I think the better way to do this is on dataSource parse() function
First: you column configuration must change like this:
{ field: "AvalableLicenses", title: "Available Licenses" },
You alaways can use you template .
And second, inside your dataSource() you can add:
schema: {
parse: function(response) {
for (var i = 0; i < response.length; i++) {
response[i].AvalableLicenses= null;
response[i].AvalableLicenses = getAvailableLicenses(response[i].Id)
}
return response;
}
}
EDIT:
If you prefer using you way, I dont see any problem in your configuration, probably your $.get is returning undefined, or something you don't expect.
For conviniance I did an example working.
http://jsfiddle.net/jwocf897/
Hope this help
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>"
I searched Over the Google, i didnt get my Requirement, My Screen Like
if i click the System Name Means i want to display the row details in another Web page how to do it?
My COde Like'
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="\\#" id="Link1" onclick="NewWindow()" class="k-Linkbutton" >#= SystemName #</a>'
template:'<a href class="list k-Linkbutton" id="#= SystemId#" >#= SystemName #</a>'
// headerTemplate: ' <asp:linkbutton id="LinkButton2" Text="System Name">System Name</asp:linkbutton>'
},
{
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");
I want to display the Row details in another wen page i don't have any idea ? i searched Google But i didn't Get,
help me how to do ?
thanks in advance!!!