1
votes

I am trying to have image column headers in my grid. They sort of look like one of those cartoon balloons. But it is a 3 part image:

  1. Left (fixed)
  2. Middle (expands to fit)
  3. Right (fixed)

Using the HeaderTemplate, I was able to get this working visually.

My question is, I still want the link that would be there if I were not using a HeaderTemplate.

Is there a Grid object in the Telerik Grid API that generates the header link that I can use (and maintain sorting, etc)?

Thanks for any and all replies.

1
Have you tried on of the many jquery plugins? - jrummell
I don't see how a jQuery plug-in is going to provide me the generated column header link. - Ed DeGagne
If I was "pirating for rep", I would have made that comment an answer. :) I'm just suggesting alternatives ... - jrummell
Ahhhh, I see. ;-) Got a response from Telerik on a way how to resolve this, I'll mark it up in here if it works. Thanks! - Ed DeGagne

1 Answers

0
votes

Turns out that in order to achieve what I was looking for, I had to remove the center <div> and apply the style directly the <a> link. Once I did that, it worked perfectly.

So the header template is in the code for one of my columns below (VB.Net):

.Columns(Function(column) column.Bound(Function(cartItem) cartItem.Quantity).
                         Sortable(False).
                         Filterable(False).
                         HeaderTemplate(String.Format("<div class=""{0}""></div><a href=""#"" class=""t-link {1}"" style=""{2}"">{3}</a><div class=""{4}""></div>",
                                                     "gridHeaderLeft",
                                                     "gridHeaderCenter",
                                                     "width: 30px !important;",
                                                     "Qty.",
                                                     "gridHeaderRight")).
                         HtmlAttributes(New With {.style = "text-align:center;"}).
                         Width(75))

Be aware that the column width is always 45px larger than the width specified for the a link (in my case, yours may be a little different).