[Solved] Sortable and filterable gone

[Lorne]

I wanted to have a dynamic link to one of my columns, but as soon as I added it, I discovered that filterable and sortable no longer works on that column.

Here is the example.


@{Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys=> {keys.Add(c=>c.ApplicationId);
})
.Columns(columns =>
    {
        columns.Template(o =>
           
                @Html.ActionLink("Edit", "NotIndex", new
                {
                    id = o.ApplicationId,
                    area = "Processing",
                    controller = "AppProcessing"
                })).Title("Edit").Width(6);
        columns.Bound(o => o.AccountNumber).Title("Acct #").Width(12);
        columns.Bound(o=> o.ApplicationId).ClientTemplate(Html.ActionLink("Edit", "NotIndex", new
            {
                     id = "<#= o.ApplicationId#>",
                    area = "Processing",
                    controller = "AppProcessing"
            },null).ToString()).Title("App #").Width(6).Sortable(true).Filterable(true);
        //columns.Bound(o => o.ApplicationId).Title("AppId").Width(12);
        columns.Bound(o => o.LastName).Title("Name").Width(10);
        columns.Bound(o => o.StartDate).Title("Date").Width(10).Format("{0:MM/dd/yyyy}");
        columns.Bound(o => o.BranchOrDepartment).Title("Branch").Width(10);
        columns.Bound(o => o.Owner).Width(10);
        columns.Bound(o => o.Queue).Width(10);
        columns.Bound(o => o.Processor).Title("Proc").Width(10);
        columns.Bound(o => o.Decisioning).Title("Decision").Width(10);
        columns.Bound(o => o.Status).Width(10);
      
           
    }).Sortable()
      .Filterable()
      .TableHtmlAttributes(new {style = "table-layout:fixed;"})
      .RowAction(row =>
          {
              if (row.DataItem.StartDate  <  DateTime.Today.AddDays(-30))
              {
                  row.HtmlAttributes["style"] = "color:red;";
              }
          })
      .Render();


As you can see, If I use columns.Template, or Columns.bound I can get the grid, but I lose the filtering and sorting when the grid is displayed.  I want to keep those.  I tried to force it as you see, and it still doesn't display.  can you tell me how I can achieve this?

[Georgi Tunev]

Hello Lorne,

By design, template columns cannot be sorted or filtered. To achieve the desired result, we would recommend to create a bound column and set its template instead. 

Regards,
Georgi Tunev
the Telerik team

[Lorne]

Thanks for the quick reply.  your link pointed me to a "ColumnTemplate" and as you can see, my code above has a ColumnTemplate, however it does not work.  When I say it doesnt work, the code I have simple doesn't have a hyperlink, but it does list the ApplicationId in the grid, it is also btw sortable and filterable, but I need it to have a hyperlink.   You said  "Template" but, I haven't been able to get a Template to work either (see below).  Do you have an example of code that:

• Uses razor
• is capable of hooking to an actionlink
• can reference a dynamic property in the Model in the actionlink
• is sortable and filterable when displayed

I tried the below code using just Template, but I don't get any output values for the column ApplicationId

@{Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys=> {keys.Add(c=>c.ApplicationId);
})
.Columns(columns =>
    {
        columns.Bound(o => o.ApplicationId).Template(c =>
        {
            Html.ActionLink("Edit", "NotIndex", new { id = c.ApplicationId });
        }).Title("App #").Width(6);
        //columns.Bound(o => o.ApplicationId).Title("AppId").Width(12);
        columns.Bound(o => o.LastName).Title("Name").Width(10);
        columns.Bound(o => o.StartDate).Title("Date").Width(10).Format("{0:MM/dd/yyyy}");
        columns.Bound(o => o.BranchOrDepartment).Title("Branch").Width(10);
        columns.Bound(o => o.Owner).Width(10);
        columns.Bound(o => o.Queue).Width(10);
        columns.Bound(o => o.Processor).Title("Proc").Width(10);
        columns.Bound(o => o.Decisioning).Title("Decision").Width(10);
        columns.Bound(o => o.Status).Width(10);
      
           
    }).Sortable()
      .Filterable()
      .TableHtmlAttributes(new {style = "table-layout:fixed;"})
      .RowAction(row =>
          {
              if (row.DataItem.StartDate  <  DateTime.Today.AddDays(-30))
              {
                  row.HtmlAttributes["style"] = "color:red;";
              }
          })
      .Render();
 }

Can you please help?

[Georgi Tunev]

Hi Lorne,

The template syntax is incorrect. Here is a sample Grid:
Model:

public class CustomProduct
  {
      public int ID { get; set; }
      public string Name { get; set; }
  }

Controller:

public ActionResult MVCGrid()
{
    return View(new[] {
        new CustomProduct
        {
            ID = 1,
            Name = "Product 1"

        },
        new CustomProduct
        {
            ID = 2,
            Name = "Product 2"

        },
         new CustomProduct
        {
            ID = 3,
            Name = "Product 3"
        }
    });

}

View:

@model IEnumerable<TelerikMVCRazorQ22011.Models.CustomProduct>
<h2>
    MVCGrid</h2>
@{ Html.Telerik().Grid(Model)
        .Name("OrdersGrid")
        .DataKeys(keys => keys.Add("ID"))
        .Columns(columns =>
        {
            columns.Bound(o => o.ID);
            columns.Bound(o => o.Name);

            columns.Bound(o => o.ID)
            .Template(@<text>

                        @Html.ActionLink("Edit", "NotIndex", new { id = item.ID })

                    </text>);
        })

        .Selectable()
        .Sortable()
        .Filterable()
        .Render();
}

More info on using templates with Razor can be found here:
http://www.telerik.com/help/aspnet-mvc/using-with-the-razor-view-engine.html
and here (in the View code tab): http://demos.telerik.com/aspnet-mvc/razor/grid/templatesserverside
 

All the best,
Georgi Tunev
the Telerik team