I am trying to add a condition in ClientTemplate method in Kendo UI. The If else statement works fine, but when trying to use ternary operator HTMl does not render.
Working code:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.direction).ClientTemplate("# if(Clients==''){ # - #}else{# #: Clients # #}#")
})
);
Not working:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.direction).ClientTemplate("# Clients=='' ? '-' : #: Clients # #")
})
);
Using htmlEncode
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.Clients).ClientTemplate("# (Clients=='' ? '-' : kendo.htmlEncode(Clients) ) #")
})
);
Solution using ternary operator:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.Clients).ClientTemplate("#: Clients=='' ? '-' : Clients #")
})
);
Related
I have the following code, where to the columns I add the property of Editable, where to know if it is true or false I will send to call a JS function, what I want to send as parameter the value of the columan UnitsInStock. How can I set it as a parameter in the call the function? currently does not work.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Editable("funcion(UnitsStock)");
columns.Bound(p => p.UnitPrice).Width(120);
columns.Bound(p => p.UnitsInStock).Width(120);
columns.Bound(p => p.Discontinued).Width(120);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.ProductID))
// ...
)
The Editable() configuration expects the name of the JS function that would specify if the filed is editable or not. By default, the function receives the dataItem for the row, so you can just do the following - example:
columns.Bound(p => p.ProductName).Editable("isEditable");
...
<script>
function isEditable(dataItem){
return dataItem.UnitsInStock % 2 == 0 // logic returning true/false on whether the field should be editable or not
}
</script>
I have one grid like this :
#(Html.Kendo().Grid<ProductViewModel>()
.Name("Grid")
.Columns(columns =>
{
**columns.Bound(c => c.Logo).ClientTemplate();**
columns.Bound(p => p.Title);
columns.Bound(p => p.Category);
columns.Bound(p => p.SupplierName);
columns.Bound(p => p.SupplierContactName);
columns.Bound(p => p.IsDeleted);
columns.Bound(p => p.TimeStamp).Format("{0:yyyy/MM/dd HH:mm}").EditorTemplateName("DateTime"); ;
//columns.Command(command => { command.Edit(); command.Destroy(); }).Width(220).Title("Command");
//columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("EditingCustomValidation_Read", "Product"))
)
And I have one action like this for Showing image :
public FileContentResult Photo(int id)
{
return new FileContentResult(db.Products.Find(id).Logo, "image");
}
What should I write in my ClientTemplate for calling this action sending productid an showing products logo?
Please you can try like this...
columns.Bound(c => c.Logo).ClientTemplate("<img src='" + Url.Content("~/ImagePath/") + "#=ImageUrl#' alt='#=Name #' Title='#=Name #' height='62' width='62'/>");
One of my colleague ran into same issue and we posted question on telerik forum Bind image path to a controller function in Kendo Grid and they responded as below.
I think instead of your controller returning a string with the URL of the image it might be easier for it to just return the image itself. Some thing like this post on stackoverlow
That way you can just have your template point the src property of the img html element to this controller action that would presumably take as parameter something to pinpoint the corresponding image file to each row element.
By default grid of Kendo shows values of columns but I'd like to customize it. For example I want to show an icon for each value of one column.
I have a column in my grid that shows the status of activation or inactivation.Instead of showing "true" or "false", I want to show an icon that is proper for it.
I've used ".Template()" in grid but my code in ".Template" did not fire!
How can I solve this problem?
<div style="width: 100%;">
#(Html.Kendo().Grid<Jahan.Blog.Model.Article>()
.Name("ArticleAdmin").Navigatable()
.Resizable(c => c.Columns(true))
.HtmlAttributes(new { #class = "cursorLink", #style = "width: 1000px;height:auto;overflow: scroll;" })
.Columns(columns =>
{
columns.Bound(p => p.UserId).Width(100);
columns.Bound(p => p.Title).Width(200);
//columns.Bound(p => p.Summary).Width(140);
//columns.Bound(p => p.Description).Width(100);
columns.Bound(p => p.LikeCounter).Width(100);
columns.Bound(p => p.RateCounter).Width(100);
// Please attention to this
columns.Bound(p => p.IsActive).Template(p => #Html.ShowIcon(p.IsActive)).Width(80);
columns.Bound(p => p.IsActiveNewComment).Width(170);
columns.Bound(p => p.CreatedDate).Width(160).Format("{0:G}");
columns.Bound(p => p.ModifiedDate).Width(160).Format("{0:G}");
columns.Command(command => command.Destroy()).Width(170);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create("Editing_Create", "ArticleAdmin")
.Read("Editing_Read", "ArticleAdmin")
.Update("Editing_Update", "ArticleAdmin")
.Destroy("Editing_Destroy", "ArticleAdmin")
))
</div>
Please attention to this part of my code:
columns.Bound(p => p.IsActive).Template(p => #Html.ShowIcon(p.IsActive)).Width(80);
and
public static MvcHtmlString ShowIcon(this HtmlHelper html, bool isActive, string text = "", string activeCssClass = "glyphicon glyphicon-ok", string inactiveCssClass = "glyphicon glyphicon-remove")
{
StringBuilder result = new StringBuilder();
TagBuilder span = new TagBuilder("span");
span.SetInnerText(text);
if (isActive)
{
span.AddCssClass(activeCssClass);
}
else
{
span.AddCssClass(inactiveCssClass);
}
result.Append(span);
return MvcHtmlString.Create(result.ToString());
}
You can do this with a ClientTemplate as follows:
columns.Bound(p => p.IsActive)
.ClientTemplate("<img src='/Content/#= IsActive ? 'tick.png' : 'cross.png' #''>");
The above simply checks the IsActive property and displays a tick or cross image.
columns.Bound(p => p.IsActive).ClientTemplate("#= showIcon(IsActive) #").Width(80);
JavaScript function:
function showIcon(isActive) {
var result = "";
if (isActive == true) {
result = "<img src='/Content/tick.png'/>";
} else {
result = "<img src='/Content/cross.png'/>";
}
return result;
}
for more information click How do I use a JavaScript function in a column client template?
I have been looking all over for the answer and think I am missing something simple. I have a kendo grid where I want one of the columns to be a link to another page with the id as a route parameter. However, the value in the column cells are the bound values and are unchanged by my template. Any insights to this will be appreciated.
#(Html.Kendo().Grid((IEnumerable<ProviderAccess>)Model.Providers)
.Name("grants-grid")
.Columns(columns =>
{
columns.Bound(a => a.ProviderName);
columns.Bound(a => a.HasAccess);
columns.Bound(a => a.ProviderId).ClientTemplate("#= toggleLink(data) #");
})
.Scrollable()
)
<script>
function toggleLink(access) {
var action = '#Url.Action("Toggle", "Access")';
var html = kendo.format("<a href='{0}/{1}'>Toggle...</a>",
action,
access.ProviderId
);
return html;
}
</script>
ClientTemplate isn't using when Kendo Grid is binded to a dataSource on server side like your code.
You should use Template method of columns like below
columns.Template(p => "<a href='..../Toggle/Access/" + p.ProviderId + "'>Click</a>");
dataSource.Server() will let you use a custom.template
dataSource.Ajax() will let you use ClientTemplate
Figuring that out was really frustrating... They are not interchangeable one of the other will work depending on ajax or Server
<%: Html.Kendo().Grid((List<RadCarePlus.V2.Web.Models.GetMeSomeData>) ViewData["Mydata"])
.Name("Grid")
.Columns(columns =>
{
columns.Template(c => "<a href='ImplementationDetails?EpisodeID=" + c.EpisodeID + "'>" + c.EpisodeID + "</a>").Title("Testing").Width(140);
//columns.Bound(c => c.EpisodeID).Width(140);
columns.Bound(c => c.AuthStatus).Width(190);
columns.Bound(c => c.CPTCode).Width(100);
columns.Bound(c => c.inscarrier).Width(110);
columns.Bound(c => c.CreatedOn).Width(160);
//columns.Template(c => "<a href='ImplementationDetails?EpisodeID=" + c.EpisodeID + "'>" + c.EpisodeID + "</a>");
//columns.Template(c => c.EpisodeID).Title("Testing").ClientTemplate("<a href='ImplementationDetails?EpisodeID=#= EpisodeID#'>#= EpisodeID #</a>");
})
.Pageable(pageable=> pageable.ButtonCount(5))
.Sortable(sortable => sortable.AllowUnsort(false))
.DataSource(dataSource => dataSource.Server().PageSize(5)
)
%>
Here is my kendo grid code:
#(Html.Kendo().Grid(Model)
.Name("paymentGrid")
.Columns(columns =>
{
columns.Bound(p => p.AccountName).Title("Account Name");
columns.Bound(p => p.Active).Title("Active").ClientTemplate("<div>#=Active ? 'Active' : 'Inactive'#</div>");
columns.Command(command => command.Custom("DeActivate").Click("deActivatePaymentAccount").Text("DeActivate")).Title("DeActivate");
})
.Filterable()
.Sortable()
.Pageable(paging => paging.Enabled(true).PageSizes(true).Messages(messages => messages.Empty("No accounts found")))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.AccountId);
})
.Update(update => update.Action("EditAccount", "Account"))
)
)
Question:
How do I add a client Template to my Custom Command (Deactivate) so I can toggle the text on the button based on whether the account is active or not?
I think that the best way to change the button text is to do this in the javascript function bound to the click event :
function deActivatePaymentAccount(e) {
var $btn = $(e.target);
$btn.text() === "DeActivate" ? $btn.text("Activate") : $btn.text("DeActivate");
// some other code here
}