I have the following client template in a Kendo grid:
.Columns(columns =>
{
columns.Bound(p => p.ID).ClientTemplate("<input id='#=data.ID#' type='checkbox' onclick='chkEntry(this)' />")
etc...
That works fine. I want instead to only show that input if data.CandidateCode is equal to 'CO1'.
This is one of my attempts:
.Columns(columns =>
{
columns.Bound(p => p.ID).ClientTemplate("#if (# #=data.CandidateCode# # == 'CO1') {#<input id='#=data.ID#' type='checkbox' onclick= chkEntry(this)' /> #}#")
It is my understanding that one may use hashtag (#) to indicate arbitrary javascript, as well as for literals and data values. Am I on the right track here? No matter how I try this syntax, I get an 'Uncaught Error: Invalid template' error.
Yeah, the hash syntax can be tricky. Once you start js with '#" you don't need to further escape variables. When you are in the markup like <input> you do. So try this without the comment lines:
columns.Bound(p => p.ID)
// Inside code no need to hashtag CandidateCode
.ClientTemplate("# if (CandidateCode == 'CO1') { #" + "
// Inside markup you do need hashtag
"<input id='#=ID#' type='checkbox' onclick='chkEntry(this)' />" +
"#}#")
Related
i need to change style of grid cell based data value
columns.Bound(p => p.Status).Width(60).Filterable(ftb => ftb.Multi(true));
this column takes only two values "Open,Closed" i need to Add class="label label-success" When the value = Closed And class="label label-danger" When the value = Open
thank you
Please try with the below code snippet.
columns.Bound(c =>c.Status).Title("Status").ClientTemplate("#if(Status=='Open') {#" +
"<label class='label label-success'>#=Status#</label>" +
"# } else {# " +
"<label class='label label-danger'>#=Status#</label>" +
"# } #").Width(60).Filterable(ftb => ftb.Multi(true));
Let me know if any concern.
I'm tryin to export kendo grid to excel: i tried this method:
http://jsfiddle.net/SZBrt/4/
But i have a kendo grid already that gets data on button click.
I want another button to excel the grid with datas on export button click as mentioned in jsfiddle.
#(Html.Kendo().Grid<KendoGridExportExcelMvc.Models.Sales>()
.Name("Sale")
.Columns(columns =>
{
columns.Bound(p => p.R).Width(100);
columns.Bound(p => p.Cur).Width(100);
columns.Bound(p => p.goods).Width(100);
columns.Bound(p => p.cost).Width(70);
columns.Bound(p => p.isdeleted).Width(60);
})
.Sortable()
.Scrollable()
.HtmlAttributes(new { #style = "Font:12px calibri; " })
.Filterable()
)
how to bring this inside the js file. please help,
Well, dude, you are just rendering HTML.
If you want to generate a real CSV file, just use one of the classes from the System.IO namespace, and write directly to the Response's OutputStream.
See this article for reference on how to do it:
Writing to Output Stream from Action
I have a Hierarchy style Kendo grid and the inner grid doesn't seem to accept client templates. (I stripped the code irrelevant grid configuration columns out )
I really would like the client template to be something like
<a title="#=AlarmStatusDescription#">#=AlarmStatus#</a> but anytime I put anything other than a simple string in the ClientTemplate, the whole grid fails to load.
I've tried
.ClientTemplate("#:AlarmStatus#")
.ClientTemplate("#=AlarmStatus#")
.ClientTemplate("<div class="myclass"></div>") with a separate <script type="text/html" id="myclass">#=AlarmStatus#</script>
#(Html.Kendo().Grid<AccountModel>()
.Name("Accounts_#=Id#")
.Columns(columns =>
{
columns.Command(command => command.Custom("Details").Click("showDetails")).Width(75);
columns.Bound(o => o.AccountName).Width(150);
columns.Bound(o => o.AlarmStatus).Width(100).ClientTemplate("#:AlarmStatus#");`
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>{model.Id(p => p.AccountId);})
.Read(read => read.Action("DetailRead", "Csr", new { personId = #=Id#" }))
)
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.ToClientTemplate()
)
You need to escape the sharp symbols - other way the Outer Grid will try to evaluate this "#:AlarmStatus#" expression. And since most probably there is no such field as AlarmStatus for the Outer Grid (it is property of the Inner one) there will be an exception. If you escape it like this the client template should be skipped by the Outer Grid, and evaluated properly by the Inner Grid.
.ClientTemplate("\\#= AlarmStatus \\#")
I hope you got the idea
You should use: .ClientTemplate("#= AlarmStatus #"). I think that you were missing the quotes ".
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.AirlineCode).Title("Airline");
columns.Bound(p => p.SegmentInfo[0].FareClass).Title("Fare Class");
}
.ClientRowTemplate(
"<tr>"+
"<td style =\"width: 130px\"><img src=\"/Content/themes/base/image/#=AirlineCode#.jpg\"/><span> #=AirlineName#</span></td>" +
"<td><div class=\"ClassType\"> //#=SegmentInfo[0].FareClass//# </div></td>"+"</tr>"
)
How should I write //#=SegmentInfo[0].FareClass//# section of could to get the value from Model Property SegmentInfo ,which is an class object and I need to access it's Property called FareClass which is string object.
Try to give the proper syntax to access this kind of object value.
Thanks in advance to my helper.
I am not sure how well it will work with an array but try.
.ClientRowTemplate(
"<tr>"+
"<td style =\"width: 130px\"><img src=\"/Content/themes/base/image/#=AirlineCode#.jpg\"/><span> #=AirlineName#</span></td>" +
"<td><div class=\"ClassType\"> #=SegmentInfo[0].FareClass# </div></td>"+"</tr>"
)
(Remove the // completely)
Is it posible to use row specific content into HtmlAttributes?
I got this cell with its content (o.ArrivalTime), when i move my mouse over it i'll like it to show the content from a other element (o.Note) in a tooltip
I tried this but it will not accept the o.Note
columns.Bound(o => o.ArrivalTime)
.Title("Arrival Time")
.Template(o =>
{%><%=(o.ArrivalTime < Convert.ToDateTime("2000-01-01")) ? "?" : o.ArrivalTime.ToString()%><%})
.Width(140)
.HtmlAttributes(new {title = o.Note })
;
Rather than using HtmlAttributes, you can do this inside Template.
columns.Bound(o => o.ArrivalTime)
.Title("Arrival Time")
.Template(o =>
{%><div title="<%= o.Note %>"><%=(o.ArrivalTime < Convert.ToDateTime("2000-01-01")) ? "?" : o.ArrivalTime.ToString()%></div><%})
.Width(140)
;
Please take a look at the following example.
Grid - Server Templates
In this example the first column uses a templating mechanism to create the column. In similar way you can create a template for your column and then use the different columns while defining the template. Here is the code snippet from the demo:
<% Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
//Template column. The grid displays the HTML defined by the argument.
columns.Template(c => {
%>
<img
alt="<%= c.CustomerID %>"
src="<%= Url.Content("~/Content/Grid/Customers/" + c.CustomerID + ".jpg") %>"
/>
<%
});
//Regular databound column. The grid displays the value of the CustomerID property.
columns.Bound(c => c.CustomerID);
})
.Render();
%>
Hope this was helpful to your question.
Lohith (Tech Evangelist, Telerik India)