[Solved] Converting templates to clienttemplates

[Nathaniel]

I'm not finding many examples to help me convert my grid control from server bound to ajax bound. Particulary, I need help with HTML helpers in client templates. Here's my server bound grid control:

<%
  Html.Telerik().Grid(Model)
    .Name("grdIssues")
    .Columns(columns =>
    {
      columns.Bound(o => o.id)
        .Title("Issue Id")
        .Width(100);
      columns.Template(o =>
        {%>
          <%: Html.Truncate(o.subject, 40) %>
        <%})
        .Title("Subject")
        .Width(300);

      columns.Template(o =>
        {%>
          <div id="progressbar">
            <div class="progress-indicator" id="indicator" style="width: <%= o.progress_ratio %>%"></div>
            <span class="progress-indicator" id="progress-number"><%= o.progress_ratio %>%</span>
          </div>
        <%})
        .Title("Progress");

      columns.Template(o =>
      {%>
        <input type="button" class="t-button t-state-default" onclick="document.location.href = '<%: Url.Action("EditIssue", "Home", new {id = o.id}) %>'"
          value="Edit" style="margin: 0px; width: 50px" />
      <%})
      .Width(65);
    })
    .DetailView(detailView =>
      detailView.Template(e =>
      {%>
        <div class="issue-details">
          <div class="issue-details-col1"><label>Description:</label></div>
          <div class="issue-details-col2"><%= e.description %></div>
          <div class="issue-details-col1"><label>Frequency:</label></div>
          <div class="issue-details-col2"><%= e.frequency %></div>
          <div class="issue-details-col1"><label>Submitted by:</label></div>
          <div class="issue-details-col2"><%= e.creator %> <strong> on </strong>
            <%: Html.ConvertToServerTime(e.created_on) %>
          </div>
        </div>
      <%}))
    .Scrollable(scrolling => scrolling
      .Enabled(true)
      .Height("auto"))
    .Sortable(sorting => sorting.Enabled(true))
    .Filterable(filtering => filtering.Enabled(true))
    .Footer(true)
    .RowAction(row => row.Selected = row.DataItem.id.Equals(ViewData["id"]))
    .Render();
%>

I've been able to convert the progress bar, only because it doesn't call any helper extensions:

columns.Bound(o => o.progress_ratio)
  .ClientTemplate("<div id='progressbar'>"
    + "  <div class='progress-indicator' id='indicator' style='width: <#= progress_ratio #>%'></div>"
    + "  <span class='progress-indicator' id='progress-number'><#= progress_ratio #>%</span>"
    + "</div>")
  .Title("Progress");

I haven't been able to figure out the magic recipe of escape characters for the edit and subject columns, nor the detail view. I've seen examples calling javascript functions in the view. Since I'm changing the grid to client templates, do I need to convert my html helpers into javascript functions?

[Nathaniel]

I was able to convert everything into client templates a few days ago, by using javascript functions I found in these forums and elsewhere. Posting the result in case anyone needs an example or someone more knowledgeable can point out inefficiencies:

<% Html.Telerik().Grid<CET.Models.issue_detail>()
     .Name("grdIssues")
     .Columns(columns =>
     {
       columns.Bound(o => o.id)
         .Title("Issue Id")
         .Width(100);
       columns.Bound(o => o.subject)
         .ClientTemplate("<#= truncate(subject, 40) #>")
         .Title("Subject")
         .Width(300);
       columns.Bound(o => o.progress_ratio)
         .ClientTemplate("<div id='progressbar'>"
           + "  <div class='progress-indicator' id='indicator' style='width: <#= progress_ratio #>%'></div>"
           + "  <span class='progress-indicator' id='progress-number'><#= progress_ratio #>%</span>"
           + "</div>")
         .Filterable(false)
         .Title("Progress");
       columns.Bound(o => o.id)
         .ClientTemplate("<button type='button' class='t-button t-state-default' style='margin: 0px; width: 50px' "
           + "onclick=\"document.location.href = '" + Url.Action("EditIssue", "Home", new { id = "<#= id #>" }) + "'\">Edit</button>")
         .Title("")
         .Filterable(false)
         .Sortable(false)
         .Width(65);
     })
     .DetailView(details =>
       details.ClientTemplate("<div class='issue-details'>"
         + "  <div class='issue-details-col1'><label>Description:</label></div>"
         + "  <div class='issue-details-col2'><#= description #></div>"
         + "  <div class='issue-details-col1'><label>Frequency:</label></div>"
         + "  <div class='issue-details-col2'><#= frequency #></div>"
         + "  <div class='issue-details-col1'><label>Submitted by:</label></div>"
         + "  <div class='issue-details-col2'><#= creator #><strong> on </strong><#= toServerTime(created_on) #></div>"
         + "</div>"))
     .Scrollable(scrolling => scrolling
       .Enabled(true)
       .Height("auto"))
     .Sortable(sorting => sorting.Enabled(true))
     .Filterable(filtering => filtering.Enabled(true))
     .Footer(true)
     .RowAction(row => row.Selected = row.DataItem.id.Equals(ViewData["id"]))
     .DataBinding(dataBinding => dataBinding.Ajax().Select("StatusAjaxBinding", "Home"))
     .ClientEvents(events => events.OnDataBound("onDataBound"))
     .Render();
 %>

The javascript functions I added to the view:

<script type="text/javascript">
  function onDataBound()
  {
    var grid = $(this).data('tGrid');
    // Get the export link as jQuery object
    var exportLink = $('#ExportXLS');
    // Get its 'href' attribute - the URL where it would navigate to
    var href = exportLink.attr('href');
    // Update the 'page' parameter with the grid's current page
    href = href.replace(/page=([^&]*)/, 'page=' + grid.currentPage);
    // Update the 'orderBy' parameter with the grids' current sort state
    href = href.replace(/orderBy=([^&]*)/, 'orderBy=' + (grid.orderBy || '~'));
    // Update the 'filter' parameter with the grids' current filtering state
    href = href.replace(/filter=(.*)/, 'filter=' + (grid.filterBy || '~'));
    // Update the 'href' attribute
    exportLink.attr('href', href);
  }

  function toServerTime(dteInput)
  {
    var utcDate = new Date(dteInput.getUTCFullYear(), dteInput.getUTCMonth(), dteInput.getUTCDay(), dteInput.getUTCHours(), dteInput.getUTCMinutes(), dteInput.getUTCSeconds(), dteInput.getUTCMilliseconds());
    // Offset measured in milliseconds. UTC date is already stored at -8 so we need to add 8 hours.
    var serverOffset = <%= System.TimeZone.CurrentTimeZone.GetUtcOffset(DateTime.Now).Hours %> /* time zone offset measured in hours */ * 60 * 60 * 1000 * -1;
    var serverTime = new Date(utcDate.getTime() + serverOffset);
    return $.format.date(serverTime,'MM/dd/yyyy hh:mm a');
  }
  function truncate(input, length)
  {
    return input.substring(0, length);
  }
</script>

[Henry]

Very helpful, I was looking for the string truncating approach, got it, thanks!