I am trying to use a ViewBag variable inside ClientTemplate but unable to do so
#Html.Kendo().Grid(Model.MainGrid)
.Name("MainGrid")
.Columns(col =>
{
col.Bound(o => o.Record).ClientTemplate("<a target='_blank' href='" + ViewBag.URL + "/#= Record#'>#=Record#</a>").Width(150);
}
Above code doesnt create a url link but a simple text. In developer console, it gives an error
'' #<a target='_blank' href='http://something.com/docs/workspace/#= Record#'>#=Record#</a></td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['DateCreated'] ? ' k-dirty-cell' : '' #"
However, if I hardcode value of the ViewBag variable, i.e.
#Html.Kendo().Grid(Model.MainGrid)
.Name("MyGrid")
.Columns(col =>
{
col.Bound(o => o.Record).ClientTemplate("<a target='_blank' href='" + "http://something.com/docs/workspace" + "/#= Record#'>#=Record#</a>").Width(150);
}
it render the correct url link
Is there anything wrong with the code?
Related
I am using a kendo grid and inside the grid i have a column in which i have an image,when i click on the image i have to reload the grid.I am not sure which one is better suited for such requirement whether to use kendo mvc grid or kendo UI javascript.
I am currently using Kendo MVC Grid,but not sure how to reload the grid with other set of data.Can someone please guide me how to go for this requirement.Just a high level view.i have to also implement custom paging for this grid.
#(Html.Kendo().Grid<WebApp.Models.IndexModels>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FolderName).ClientTemplate("# if (FolderName!=null) { #" +
"<listleft><img title='' src='" + Url.Content("/RMS/Content/Images/folder.gif") + "'\"/><file-folder-names><a data-role=\"button\" onclick=\"onClickDoc('#: data.ObjectId#', '#: data.objectType#');\" id=\"testa\">#:FolderName#</a></file-folder-names></listleft><listright><img class=\"make-fav vAlign\" src='" + Url.Content("/RMS/Content/Images/u837.png") + "'\"/><img class=\"vAlign object-file-options\" src='" + Url.Content("/RMS/Content/Images/context-menu-down-arrow.png") + "'\"/><div class=\"checkbox\"></div></listright>" +
"# } else { #" +
"<listleft># if (IsVirtualDoc==\"1\") { #<img class='show-sub-grid' src-swap='/RMS/Content/Images/virtual-doc-close.png' src='/RMS/Content/Images/virtual-doc-show.png' /># } #<img title='' src=\"#:ImagePath#\"\"/><file-folder-names><a data-role=\"button\" href=\"/RMS/Home/GetDocumentContent?objId=#:ObjectId#\" target=\"_blank\" id=\"testa\">#:DocumentName#</a></file-folder-names><br /><span class=\"details\">#:DocumentSize# bytes <span class=\"paddingLR10\">|</span> #:DocumentCreatedDate# :# if (!(DocumentCreatedby==null)) { # #:DocumentCreatedby# # } #</span></listleft><listright><img class=\"make-fav vAlign\" src='" + Url.Content("/RMS/Content/Images/u837.png") + "'\"/><img class=\"vAlign object-file-options\" src='" + Url.Content("/RMS/Content/Images/context-menu-down-arrow.png") + "'\"/><div class=\"checkbox\"></div></listright>" +
"# } #"
);
})
.Sortable()
.Pageable(pageable => pageable.ButtonCount(5))
.EnableCustomBinding(true)
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo"))
)
.Events(events => events.DataBound("dataBound"))
This is using javascript
basic commands for reloading Grid with different data:
option 1: use same datasourse
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
https://stackoverflow.com/a/18399994/423356
option 2: use different datasource: (must be initilized)
$("#GridName").data("kendoGrid").setDataSource(differentDatasourceInitialized);
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
http://www.telerik.com/forums/grid-datasource-option-vs-setdatasource-method#UbC2YiGq2E2aFa-CnFeh7A
How to send optional data to pick which datasource to use or filter ajax read can be done in image click event and your "additionalInfo" javascript function
Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo"))
http://www.telerik.com/forums/pass-additional-parameters-to-read-ajax-datasource-method---mvc#6-wwFQboTECQByGUQYKKhw
If the new set of data is returned from the same URL you can simply call the "read" method of the Grid DataSource on the client side, and new request to the server will be made with the additional data from the "additionalInfo" function.
"read" method of the dataSource
How to get the Grid client-side object
I want to change the cell background color based on a value.
My solution If ound and which worked was this:
#(Html.Kendo().Grid<Web.Models.Intern.CheckADGridModel>()
.Name("ADGrid")
.Filterable()
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Pageable(page => page.Enabled(true))
.Columns(col =>
{
col.Bound(x => x.ProjectID).Filterable(true).Title("ID").Width(100);
col.Bound(x => x.ProjectName).Filterable(true).Title(ResourcesLocal.Resources_Intern_CheckAD.Name).ClientTemplate(
"<a href=\"" + #Url.Content("~/Home/Index/") +
"#= ProjectID #\"" +
"><span data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"" + #ResourcesLocal.Resources_Intern_CheckAD.ChooseProject + "\">" +
"#= ProjectName #" +
"</span ></a>");
col.Bound(x => x.StartDate).Filterable(false).Title(ResourcesLocal.Resources_Intern_CheckAD.Start).Width(150).Format("{0:dd.MM.yyyy HH:mm:ss}");
col.Bound(x => x.EndDate).Filterable(false).Title(ResourcesLocal.Resources_Intern_CheckAD.Ende).Width(150).Format("{0:dd.MM.yyyy HH:mm:ss}");
col.Bound(x => x.ConnectionLength).Filterable(true).Title(ResourcesLocal.Resources_Intern_CheckAD.Length).Width(70)
.ClientTemplate("#= formatADGridDauer(ConnectionLength) #");
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Sort(x => x.Add("EndDate").Descending())
.Read(read => read.Action("DataSourceADGrid", "Intern").Data("GetADGridValues"))
)
)
function formatADGridDauer(value) {
var css = "";
if (parseFloat(value) >= 1800)
css = "background-color:red; color:white;";
else if (parseFloat(value) > 600)
css = "background-color:Orange; color:white;";
html = "<div style='" + css + "'>" + value + "</div>";
html = kendo.format(html);
return html;
}
The problem is, I can only change the behaviour of the data in the cell, which means the padding of the grid-cell will be shown and it looks really ugly.
So how to do it right an change the gridcell background color instead of the data inside?
Unfortunately, telerik is not the most user-friendly set of controls when it comes to customization. Javascript (jquery in this instance) has worked for me when I had to do something similar.
Try this something like this:
$(".k-grid tr td").filter(function () { //gets the generated table cells
if ($(this).text() > 0) {
$(this).css("background-color", "red");
}
});
Here is what I got:
columns.Bound(t => t.Id)
.Title("")
.Template(#<text></text>)
.ClientTemplate("<a class=\"k-button\" href='"
+ Url.Action("Edit", "Controller") + "/#=Id#'>Edit</a>")
.Width(110);
What I need is to pick a specific controller action depending on type of object bound. (different form for e.g. CarEdit when lets say Type==1 and PlaneEdit when Type==2)
I've done similar thing using JS recently (to produce ClientTemplate content) but would greatly appreciate solution without nasty JS.
As for now this is my best solution:
columns.Bound(t => t.Id)
.Title("")
.Template(#<text></text>)
.ClientTemplate("#= GetEditTemplate(data)#")
.Width(110);
function GetEditTemplate(data) {
var html;
if (data.Type === 1) {
html = kendo.format("<a class=\"k-button\" href='" + '#Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a> ",
data.Id
);
}
else {
html = kendo.format("<a class=\"k-button\" href='" + '#Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a> ",
data.Id
);
}
return html;
}
I get an InvalidOperationException with a message saying:
bound columns require a field or property access expression
My razor markup goes like this:
(#Html.Kendo().Grid<StackInfo>()
.Columns(col =>
{
col.Bound(e => e.FileID).Title("ID");
col.Bound(e => e.Name).Title("Filename");
col.Bound(e => e.Status);
col.Bound(e => new { Status = e.Status, FileID = e.FileID }).ClientTemplate("#if(Status == 'new') {#"
+ "View"
+ "#} else {#"
+ "Open"
+ "#} #").Title(string.Empty);
})
.AutoBind(false)
.DataSource(ds => ds
.Ajax()
.Read(r => r.Action("Tasks_Read", "Task"))
.PageSize(10)
)
.Pageable()
.Name("tasksGrid")
.Scrollable(k => k.Height(205)))
What I am trying to accomplish is that the grid will show an extra column; it furnishes a link, whose action is actually based on the value in the Status field. Hence I've written my ClientTemplate like so.
However I get an exception at that line. What is the correct way to do this?
I think the problem is in .Bound(e => new { Status = e.Status, FileID = e.FileID }) of your fourth column. Try this code:
columns.Template(#<text></text>)
.ClientTemplate("#if(Status == 'new') {#"
+ "View"
+ "#} else {#"
+ "Open"
+ "#} #").Title(string.Empty);
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)
)
%>