Kendo UI grid ClientTemplate - asp.net-mvc

I'm binding client templates to columns in my kendo ui grid as you see below:
#(Html.Kendo().Grid(Model)
.Name("marketWatchGrid")
.Columns(columns =>
{
columns.Bound(p => p.direction).ClientTemplate(
"# if (direction==1) {#" +
"▲" +
"#}#" +
"# if (direction==0) {#" +
"▼" +
"#}#"
).Title("").Width(30);
columns.Bound(p => p.symbol).ClientTemplate("<a href='javascript:selectSymbol('" + "#: symbol #" +"')'>#: symbol #</a>"); ;
columns.Bound(p => p.bid);
columns.Bound(p => p.ask);
})
.Scrollable()
)
The following template does not work:
columns.Bound(p => p.symbol).ClientTemplate("<a href='javascript:selectSymbol('" + "#: symbol #" +"')'>#: symbol #</a>"); ;
I'm getting Javascript syntax error. How can I fix this?

I changed my template to:
columns.Bound(p => p.symbol).ClientTemplate("<a href=javascript:selectSymbol(\'" + "#: symbol #" +"\')>#: symbol #</a>");
It works fine now.

Related

Kendo UI grid ClientTemplate ternary condition

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 #")
})
);

How to add Image column into Kendo UI Grid

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.

change group header dynamically in kendo ui mvc

I am using kendo ui with asp.net mvc. I want to change the group header coloumn dynamically. Please suggest solution.My code is shown below.
<div id="dvPayrollReportGrid" class="kendo-responsive-grid-content">
#(Html.Kendo().Grid<CyberPayBO.Models.PayrollReportModel>()
.Name("gridpayrollreport")
.Columns(columns =>
{
columns.Bound(payroll => payroll.CompanyCode).Title("").Hidden(true).Filterable(false).ClientTemplate("<input type='hidden' id='hdnCompanyCode' value='#=CompanyCode#'>");
columns.Bound(payroll => payroll.CompanyCode).Title("Action").Filterable(false).ClientTemplate("View || <span class='CompanyNameLink DeleteLink' onclick='DeletePayrollReport(this.id)' id='#=ID#'>Del</span> | <img src='../Images/pdf.gif' id='PayrollImage'/>").Sortable(false);
columns.Bound(payroll => payroll.CheckDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.FromDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.ToDate).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.StoredFile).ClientTemplate("#if (StoredFile.toLowerCase().indexOf('.pdf')>-1) {#"
+ " "
+ "#} else { #" + ""
+ "# } #" + "#=StoredFile#");
columns.Bound(payroll => payroll.CheckDate).Title("Payroll Reports").Hidden(Convert.ToBoolean(PayrollReportColumn)).ClientTemplate("<span style='color:red'>Payroll Report</span>");
columns.Bound(payroll => payroll.CreatedDate).Title("Created At").Format("{0:dd/MM/yyyy HH:mm tt}");
})
.Pageable(pageable => pageable
.Messages(messages => messages.Display("Payroll Reports {0} - {1} of {2}"))
)
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("PayrollReport_Read", "PayrollReport"))
.Group(groups =>
{
groups.Add(payroll => payroll.CompanyName);
})
)
)
</div>
i am grouping by the company name, and by default it is giving me company name as header in result. I want the header to be dynamic and display the company code instead.I am getting ouput as CompanyName: AAA TEST 1 in header, but i want ouput as 004:AAA Test 1., where 004 is company code.
I found the solution to it by using ClientGroupHeader Template
columns.Bound(payroll => payroll.Company).ClientGroupHeaderTemplate("#=value#").Hidden(true);
Here company is combination of CompanyCode and CompanyName and which i bind from repository. Finally grouping on Company gives me the desired result.
To Achieve this you need to return a new column in your backend With the class of the data you want to group by since Kendo doesn't let you group by anonymous type yet. the End the end of your Action will look something like this
...
var query = db.PayrollReportModel.Select(payroll=> new PayrollReportModel()
{
payroll.CompanyCode
...
grouper = new GrouperClass()
{
CompanyCode = payroll.CompanyCode,
CompanyName = payroll.CompanyName
}
});
DataSourceResult result = await query.ToDataSourceResultAsync(request);
}
For your View
<div id="dvPayrollReportGrid" class="kendo-responsive-grid-content">
#(Html.Kendo().Grid<CyberPayBO.Models.PayrollReportModel>()
.Name("gridpayrollreport")
.Columns(columns =>
{
columns.Bound(payroll => payroll.grouper).Hidden(true).ClientGroupHeaderTemplate("#=value.CompanyCode#-#=value.CompanyName#");
columns.Bound(payroll => payroll.CompanyCode).Title("Action").Filterable(false).ClientTemplate("View || <span class='CompanyNameLink DeleteLink' onclick='DeletePayrollReport(this.id)' id='#=ID#'>Del</span> | <img src='../Images/pdf.gif' id='PayrollImage'/>").Sortable(false);
columns.Bound(payroll => payroll.CheckDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.FromDate).Format("{0:dd/MM/yyyy}");
columns.Bound(payroll => payroll.ToDate).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.StoredFile).ClientTemplate("#if (StoredFile.toLowerCase().indexOf('.pdf')>-1) {#"
+ " " + "#} else { #" + "" + "# } #" + "#=StoredFile#");
columns.Bound(payroll => payroll.CheckDate).Title("Payroll Reports").Hidden(Convert.ToBoolean(PayrollReportColumn)).ClientTemplate("<span style='color:red'>Payroll Report</span>");
columns.Bound(payroll => payroll.CreatedDate).Title("Created At").Format("{0:dd/MM/yyyy HH:mm tt}");
})
.Pageable(pageable => pageable
.Messages(messages => messages.Display("Payroll Reports {0} - {1} of{2}"))
)
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("PayrollReport_Read", "PayrollReport"))
.Group(groups =>
{
groups.Add(payroll => payroll.grouper);
})
)
)
</div>
Hope this helps

kendoui ClientTemplate in Grid not working in asp.net mvc 4

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)
)
%>

Telerik mvc grid Ipad issue

I am working in an MVC 3.0 application. In my project I used Telerk mvc grid for data listing. I made grid edit mode as "InCell". In my grid, there are two columns "Facts" & "Actions". When I press "Facts" column it changed into edit mode with textbox. Also in Ipad, keypad get displayed automatically. There after when I press "Actions" column, it changed into edit mode but Ipad keypad hides. If I am pressing same "Actions" column or any other column again, Ipad keypad get displayed. But in the online demo of telerik mvc grid batch editing (http://demos.telerik.com/aspnet-mvc/razor/grid/editingbatch) it seems working. I am using telerik version 2012.2.607 in my project. My code for grid listing looks like.
#(Html.Telerik().Grid<AnswerQuestionVM>()
.Name("GridQuestions")
.DataKeys(keys =>
{
keys.Add(p => p.QuestionID);
})
.Columns(columns =>
{
columns.Bound(p => p.QuestionNumber).Format("{0:0.00}").HtmlAttributes(new { style = "text-align:center;" }).Title("#").Width("5%").ReadOnly();
columns.Bound(p => p.QuestionName).Title("Question Name").Width("43%").ReadOnly();
columns.Bound(p => p.Facts).Width("8%");
columns.Template(#<text></text>).ClientTemplate("<img src='" + #Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=FactOptions#>' />");
columns.Bound(p => p.Actions).Width("8%");
columns.Template(#<text></text>).Width("2%").ClientTemplate("<img src='" + #Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=ActionOptions#>' />");
columns.Template(#<text></text>).Title("Skip").Width("3%").ClientTemplate(
"<# if(Skip==false) {#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' />" +
"<#} else{#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' checked='checked' />" +
"<# } #>"
);
columns.Bound(p => p.Note).Title("Note").Width("26%");
})
.Editable(editing => editing.Mode(Telerik.Web.Mvc.UI.GridEditMode.InCell))
.KeyboardNavigation( navigation => navigation.EditOnTab(true))
.ClientEvents(e => e.OnSave("OnSave"))
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("GetQuestion", "AnswerQuestion", new { Area = "question", ajax = true }).Enabled(true);
})
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(false))
.Footer(true)
)
Please tell what I am missing in my code. Any help will be appreciated.

Resources