How to call a javascript function inside kendo grid column template with razor syntax
Solution 1
This can be achieved without javascript, but for learning on how to use templates refer to @C Sharper's answer.
columns.Bound(bl => bl.LogText)
.Template(@<text>@item.LogText.Replace(System.Environment.NewLine, "<br />"))
.Width(600)
.Encoded(false);
Solution 2
@(Html.Kendo().Grid(Model)
.Name("Details")
.Columns(columns =>
{
columns.Bound(m => m.SubSystemOrderId).Title("Subsys #");
columns.Bound(m => m.Description).Title("Description").Template(@<text><a href="javascript: void(0);" onclick="return window.top.DisplayExternalOrderDetails('@item.SubSystemOrderId', '@item.OrderDetailTypeId', '@item.ProposalId', '@ViewBag.MyOpExUser', '@ViewBag.selectedOpportunityId')">@item.Description</a></text>);
columns.Bound(m => m.SubSystemStatusName).Title("Status");
columns.Bound(m => m.GrossRevenue).Title("Gross Revenue").Format("{0:c}");
columns.Bound(m => m.IncludeInForecast).Title("Include In Forecast").Template(m=>m.IncludeInForecast ? "Yes" : "No");
columns.Bound(m => m.ProposalId).Title("Proposal Id").Visible(false);
})
)
another example
columns.Bound(m => m.OpportunityName).Title("Opportunity Name").ClientTemplate("<a href='javascript: void(0);' onclick=\"return openMSDynamicsWindow('#= OpportunityUrl #');\">#= OpportunityName #</a>").HtmlAttributes(new { @class = "k-link" });
You'll see im passing into the function '#= OpportunityUrl #'
. That's how you can grab values off of the model.
#= OpportunityName #
will be the the link text.
This is a more Complex example, you can really do anything you want. Just getting the string based crap to work is a real pain
columns.Bound(m => m.Dollars).Title("").ClientTemplate(
"# if (Dollars == null) { #" +
"" +
"# } else if (Dollars == 0) { #" +
"<div>#= kendo.toString(Dollars, 'c') #</div>" +
"# } else if (Count > 0) { #" +
"<a href='javascript: void(0);' onclick=\"return window.top.openOrderDetails('#= Count #','#= Type #','#= DetailId #','#= OrderId #','#= User #','#= SelectedId #');\">#= kendo.toString(Dollars, 'c') #</a>" +
"# } #"
)
tomc
Updated on June 04, 2022Comments
-
tomc almost 2 years
I have implemented a Kendo Grid with MVC4 and Razor syntax. This grid displays log entries from a database table. The LogText column contains text with Windows newline characters. I am trying to replace those newline characters with line break tags. To do this, I have created a javascript function that I am wanting to call from a column template. The grid uses server binding. I cannot seem to find the correct syntax to make a javascript call from within the template. I have seen many examples, but none seem to be with the Razor syntax. I hope someone can help me with this.
Here is my code:
@model IEnumerable<Core.Models.ShipmentLog> @{ ViewBag.Title = "ShipmentLog"; } <h2>ShipmentLog</h2> @(Html.Kendo().Grid(Model) .Name("ShipmentLogGrid") .Columns(columns=> { columns.Bound(bl => bl.UserName); columns.Bound(bl => bl.LogTime); columns.Bound(bl => bl.LogType); columns.Bound(bl => bl.LogText).Width(600).Encoded(false).Template(#= GetHtmlNewLinesString(@item.LogText) #); }) ) <div> @Html.ActionLink("Back to List", "Index") </div> <script type="text/javascript"> function getHtmlNewLinesString(text) { return text.replace('\n/g', '<br />'); } </script>
-
tomc over 10 yearsYour answer set me on the right path. Thanks. However, I had to wrap it with an @Html.Raw even with the .Encoded(false). What ended up working was:
columns.Bound(bl => bl.LogText).Template(@<text>@Html.Raw(@item.LogText.Replace(System.Environment.NewLine, "<br />"))</text>).Width(600).Encoded(false);
-
tomc over 10 yearsEven though this worked, I would still like to know the syntax for executing a javascript function inside the .Template(). I have scoured the web and cannot find the specific syntax. Is this because what is contained in .Template() is server side code? I tried .ClientTemplate(), but I think it was not working because I was using server binding for my datasource. Is that correct? Sorry for all the questions, but I am new to this stuff.
-
ma11achy about 9 yearsThank you sir! Your first example was a crystal oasis in a desert of nothingness! Worked perfectly for me :)