ColumnTemplate Inside Helper

[Marco Teodoro]

Hello i'm trying to create a column template that is called inside a helper, but the column template content isn't render.
this is my helper

@helper  GetGrid()
    {
       @(Html.Telerik().Grid<Infrastructure.IServico>()
        .Name("grid")
        .TableHtmlAttributes(new { @class = "gridTable" })
        .Columns(columns =>
        {columns.Template(
                @<text><div>Test</div></text> // does't appear in the page
            ).Title("Title");
        })
                     .DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxBinding", "ControllerSample"))
                     .Pageable()
                     .Sortable())
}

i call this helper in the view, the grid is rendered and also the columns and rows but no content is created.

Can someone tell me why?

Best Regards,

[Daniel]

Hello Marco,

The Template method is used only when the data is bound on the server. When using Ajax binding you should use a ClientTemplate to customize the content.


Regards,
Daniel
the Telerik team

[Marco Teodoro]

Understood.
So how can i invoke a custom html extension that will return the content of the column based on the data bound item data?

i want to call an html helper inside client template but send the current data bound object to the html extension method.

 take this example:

.ClientTemplate(@Html.CustomerHelper("<#= CustomerID #>").Title("Customer");

public static MvcHtmlString ColumnPaymentType(this HtmlHelper helper, string customerid)
{
    StringBuilder sb = new StringBuilder();

   // were i will get data from repository and create my html string that i want to send back to column.

   // i have tryed this but i just get a string -> <#= CustomerID #>

    return new MvcHtmlString(sb.ToString());
}

if i use 

  .ClientTemplate(<span><#= CustomerID #></span>).Title("Customer");

it will actualy show the id of the customer in the view!

can i have a workaround for this? Maybe call a function that will get server side data using ajax. 

how do you handle this situations? 

do you have a if else statement on the client side template? if so how?

Best regards,
Marco

[Daniel]

Hello again Marco,

An HTML helper can't be used in the ClientTemplate because the data is loaded on the client. You could load a partial view via Ajax in order to use a helper to generate the template based on a value. For example:

//add an element in which to load the template
.ClientTemplate("<div class='templateContainer'></div>").Title("Customer");

// add a handler to the OnRowDataBound client-side event and make a request for the content
function onRowDataBound(e) {
    getTemplate(e.row, e.dataItem);
}

function getTemplate(row, dataItem) {
    var $row = $(row);
    $.get("url", dataItem, function (result) {
        // place the returned HTML in the container
        $row.find(".templateContainer").html(result);
    });
}

There are two ways to use if statements for in the ClientTemplate:

• Use the shorthand if syntax inside a client expression:
  

  .ClientTemplate("<#= CustomerID == 'ALFKI'? ResultTrue : ResultFalse #>");

• Call a JavaScript function from the template which to return the correct result. You can either pass the whole item by using the data keyword or pass the parameters separately:
  

  .ClientTemplate("<#= getResult(data) #>");

  function getReuslt(data){
      if(data.CustomerID == "ALFKI" ){
          return ResultTrue;
      }
      else{
          return ResultFalse;
      }
  }

  
  

Kind regards,
Daniel
the Telerik team