Search code examples
asp.net-mvc-3razorteleriktelerik-grid

Custom Client Template Telerik Grid


I'm kind of new using Telerik Grid, basically what I'm trying to accomplish here is the following scenario, I have a form that have some fields and via ajax calls another action on my controller to generate the model to a partial view that have the following grid, my problem is that I need to create some actions depending on some business logic, I know I can do that using a column template, the thing is that since im using ajax binding it "loose" my template, looking around on internet I found that you can do that using a js function go generate the links, my question is isn't that kind of messy? im duplicating the same business logic on the server and on the client, there's must be a better way to accomplish this?

  Html.Telerik().Grid(Model)
      .Name("Grid")
      .DataBinding(binding => binding.Ajax().OperationMode(GridOperationMode.Client))
      .Columns(column =>
      {
          column.Bound(c => c.Id).Title("Id").Width(30);
          column.Bound(c => c.Status);
          column.Bound(c => c.DateReg);
          column.Template(
              @<text>
                   <div class="ActionsProvGrid">
                       <a href="@Url.Action("SomeAction", "Controller", new {id = item.id})">
                           <img src="../../Content/icons/ViewMore.png" alt="ViewMore" />
                       </a>
                       @if (@item.Status.Equals("ACT"))
                       {
                           <a href="@Url.Action("SomeOtherAction", "Controller", new {idOportunidad = item.id})">
                               <img src="../../Content/icons/invoice.png" alt="invoice"/>
                           </a>
                       }

                   </div>                                                      
               </text>
              ).ClientTemplate("<#= GenearteIcons(data)  #>");
      })
    .Sortable()

Solution

  • As a solution you can define property on your model that encapsulates the result of your business logic:

    public bool DoesStatusEqualToAct {
      get
      {
        return (code that determines if it's true);
      }
    }
    

    And in JavaScript function that generates a link html you can access this property:

    function GenerateIcons(data){
        var html = '';
        if(data.DoesStatusEqualToAct){
           html = 'version 1';
        }
        else{
           html = 'version 2';
        }
       return html;
    }