CODEWITHSUNDEEP
javascriptasp.net-mvc-4razorkendo-uigrid
tomc
tomc

Reputation: 83

How to call a javascript function inside kendo grid column template with razor syntax

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>

Upvotes: 2

Views: 18716

Answers (3)

Deathstalker
Deathstalker

Reputation: 854

This may be helpful to someone. Im using this to build a unique id inside the textbox. In addition to that you could easily write in an onclick or on blur event. Then just pass in with it the element ID.

 Html.Kendo().Grid((List<RadCarePlus.V2.Web.Models.Facilities>) ViewData["FacilitiesList"])
.Name("Facilities")
.Columns(columns =>
{   int i = 0;
    columns.Bound(c => c.ProviderID).Title("Provider Number").Width(150).HtmlAttributes(new { style = "text-align:center; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center; white-space: nowrap;" });
    columns.Bound(c => c.NPI).Title("NPI").Width(150).HtmlAttributes(new { style = "text-align:center; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center; white-space: nowrap;" });
    columns.Bound(c => c.ProviderFirstName).Template(c => c.ProviderFirstName + " " + c.ProviderLastName).Title("Provider Name").Width(140).HtmlAttributes(new { style = "text-align:center; white-space: nowrap; text-decoration: underline;" }).HeaderHtmlAttributes(new { style = "text-align:center; white-space: nowrap;" });
    columns.Bound(c => c.AddressLine1).Template(c => c.AddressLine1 + " " + c.AddressLine2 + "<BR>" + c.City + " " + c.State + " " + c.Zipcode).Title("Address").Width(140).HtmlAttributes(new { style = "text-align:left; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:left; white-space: nowrap;" });
    columns.Bound(c => c.Email).Template(c => "<input type='text' name='AdminEmail' id='" + (i = i + 1) + "' value='" + c.Email + "'> ").Title("Administrator").Width(140).HtmlAttributes(new { style = "text-align:center; white-space: nowrap; text-decoration: underline;" }).HeaderHtmlAttributes(new { style = "text-align:center; white-space: nowrap;" });          
})
.Sortable(sortable => sortable.AllowUnsort(false))
.DataSource(dataSource => dataSource.Server().PageSize(5)
)

Upvotes: 0

CSharper
CSharper

Reputation: 5590

@(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>" +
          "# } #"
          )

Upvotes: 5

David
David

Reputation: 15360

This can be achieved without javascript, but for learning on how to use templates refer to @C Sharper's answer.

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration#template

columns.Bound(bl => bl.LogText)
       .Template(@<text>@item.LogText.Replace(System.Environment.NewLine, "<br />"))
       .Width(600)
       .Encoded(false);

Upvotes: 1

Related Questions