HeaderTemplate Question

[Ed]

I have a custom header template I am using on columns of my grid which is image based and working great. I would still like to inject the normal "Title"  element into it so that I get sorting/filtering/etc.

Anyone know how to get at that in a HeaderTemplate?

Thanks in advance.

[Ed]

Bump...

Anyone from Telerik?

[Dimo]

Hi Ed,

Injecting native HTML markup in a Grid header cell will work, but this is a hack that is not officially supported.

<a href="#" class="t-link">Header Text</a>

The above HTML code will enable sorting. The filtering icon will appear automatically, but only if you use a HeaderTemplate for a Bound column. Since I cannot confirm this will work in the future, I recommend you to use the native Grid headers and inject your custom content instead. Use the Grid OnLoad client event and standard DOM (jQuery) manipulations.

Generally, Telerik does not guarantee responses in the forums. If your company has spare MVC extensions licenses, let them add you as a license developer, so that you can submit support tickets.

Greetings,
Dimo
the Telerik team

[Ed]

Dimo,

Thanks for the reply, I'll give that a try.

We are using a demo right now for a "proof of concept" to justify the final purchase of the entire suite.

[Ed]

Dimo,

Putting the <a> link in there gives me the link, but it does not give me the sorting functionality "automatically".

I'll post the code in a moment, maybe that will help...

[Ed]

Here is the markup:

@Code       
    'declare the grid and enable features   
    Dim contactsGrid = Html.Telerik().Grid(Model.Contacts).
        Name("Contacts").
        Pageable(Function(p) p.PageSize(5)).
        Scrollable().
        Sortable()
    
    With contactsGrid
        .DataKeys(Function(key) key.Add(Function(contact) contact.ID))
        
        .Columns(Function(columns) columns.Bound(Function(contact) contact.Inactive).
                     HeaderTemplate(String.Format("<div class=""{0}""></div><div class=""{1}"" style=""{2}""><a href=""#"" class=""t-link"">{3}</a></div><div class=""{4}""></div>",
                                                  "gridHeaderLeft",
                                                  "gridHeaderCenter",
                                                  "width: 44px !important;",
                                                  "Inactive",
                                                  "gridHeaderRight")).
                     HtmlAttributes(New With {.style = "text-align:center"}).
                     HeaderHtmlAttributes(New With {.style = "text-align:center"}).
                     Title("Inactive").
                     Width(80))
        
        .Columns(Function(columns) columns.Bound(Function(contact) contact.ID).
                     HeaderTemplate(String.Format("<div class=""{0}""></div><div class=""{1}"" style=""{2}""><a href=""#"" class=""t-link"">{3}</a></div><div class=""{4}""></div>",
                                                  "gridHeaderLeft",
                                                  "gridHeaderCenter",
                                                  "width: 44px !important;",
                                                  "ID",
                                                  "gridHeaderRight")).
                     Title("Id").
                     Width(80))
        
        .Columns(Function(columns) columns.Bound(Function(contact) contact.FirstName).
                     HeaderTemplate(String.Format("<div class=""{0}""></div><div class=""{1}"" style=""{2}""><a href=""#"" class=""t-link"">{3}</a></div><div class=""{4}""></div>",
                                                  "gridHeaderLeft",
                                                  "gridHeaderCenter",
                                                  "width: 144px !important;",
                                                  "First Name",
                                                  "gridHeaderRight")).
                     Title("First Name").
                     Width(180))
        
        .Columns(Function(columns) columns.Bound(Function(contact) contact.LastName).
                     HeaderTemplate(String.Format("<div class=""{0}""></div><div class=""{1}"" style=""{2}""><a href=""#"" class=""t-link"">{3}</a></div><div class=""{4}""></div>",
                                                  "gridHeaderLeft",
                                                  "gridHeaderCenter",
                                                  "width: 144px !important;",
                                                  "Last Name",
                                                  "gridHeaderRight")).
                     Title("Last Name").
                     Width(180))
        
        .Columns(Function(columns) columns.Bound(Function(contact) contact.EmailAddress).
                     HeaderTemplate(String.Format("<div class=""{0}""></div><div class=""{1}"" style=""{2}""><a href=""#"" class=""t-link"">{3}</a></div><div class=""{4}""></div>",
                                                  "gridHeaderLeft",
                                                  "gridHeaderCenter",
                                                  "width: 365px !important;",
                                                  "Email Address",
                                                  "gridHeaderRight")).
                     Title("Email Address"))
        
        .Render()
    End With
End code

Here is the Css:

.gridHeaderLeft
{
	display:block;
	float:left; 
	background:url('~/Content/Images/Grid/balloon_left.png') no-repeat scroll 0pt 0pt transparent; 
	width:10px;	
	height:50px;
}
.gridHeaderCenter
{
	display:block;
	float: left; 
	background: url('~/Content/Images/Grid/balloon_center.png') no-repeat scroll center 0pt transparent; 
	height: 50px;
	text-align:center;
	padding-top:10px;
	margin-bottom:-10px;
}
.gridHeaderRight
{
	display: block;
	float: left; 
	background: url('~/Content/Images/Grid/balloon_right.png') no-repeat scroll 0pt 0pt transparent; 
	width: 10px;	
	height: 50px;
}

Like I indicated, this all gives me the exact output I am looking for with the header images. The only thing I am trying to do is maintain the generated header link for each column so I can still use sorting, filtering, etc.

I've attached an image to give you an idea of what the header should look like.

[Dimo]

Hello Ed,

The <a class="t-link"> element cannot be nested inside other elements. It should be a direct child of the header cell.

Currently the sorting should work on your side, but the sort indicator does not appear, because the Grid cannot find where to put it. it only searches for direct <a> children with the t-link CSS class.

Regards,
Dimo
the Telerik team

[Ed]

Yeah, I was afraid you would say that. :(

You guys should fix that so we can specify an id or something.  :)

Have any samples of using the second suggestion from your post above?

BTW, removed everything from the header template except the link you provided, and it does not work, no sorting and no filter.

[Ed]

The point of doing what I was attempting to, was to allow 3 images (left, middle, right) to work for any size column in any grid implemented in the project.

With this "shortcoming", my only alternative is to use a single background image in css (instead of 3), which also means that I have to create a bunch of background images to cover various column widths.

Unfortunately, this may be a show stopper in our purchase of the suite and ultimately, the use of the MVC Grid. :(

[Dimo]

Hello Ed,

In order to make the header text appear inside and on top of your custom background, it doesn't have to be inside the 3 div's. You can use negative margins and/or absolute and relative positioning to achieve the desired look.

I am afraid I don't have an example showing how to inject content in the DOM, but this is pretty straightforward when using the jQuery appendTo() method.

>> "BTW, removed everything from the header template except the link you provided, and it does not work, no sorting and no filter."

Are you sure all required Javascript files are registered on the page and there are no Javascript errors? Do you have sorting and filtering working in a standard Grid with no header template?

Regards,
Dimo
the Telerik team

[Ed]

I don't see how negative margins are going to help with a 3 element image Dimo.

The left and right images are "end caps" the center image expands with the width of the columns (minus the width of the end caps).

[Dimo]

Hello,

The negative margins or positioning styles will help you position the <a> element over the <div>s.

Regards,
Dimo
the Telerik team

[Ed]

Dimo,

Thanks for the suggestion, I got it to work just as I wanted to by eliminating that center <div> and applying the style directly to the <a> tag.

Still have a lot of styling/positioning to do to get the filter and sorting icons where I want, but it is very close to what I am looking for.

Thanks again!!

[Mahesh]

Hello Dimo,


How can I use Header Template as used in Server Binding of Telerik Grid of MVC for Ajax Binding...

I want like following format

    Name                          Address
Fname         Sname           City State

and at the time of edit or add iwnat to add the data for Fname,Sname,City and Address



Please Help Me........I am waiting for your reply


Thanks in advance.......


Please tell me is it possible or not....................