This is a migrated thread and some comments may be shown as answers.
Header Template with Ajax Binding
3 Answers 45 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Insomniac82
Top achievements
Rank 1
Insomniac82 asked on 13 Jan 2012, 05:39 PM
How can I format the grid header when I am using ajax binding?  I do not need to format individual cells but to format the entire row.

I have tried this example. http://demos.telerik.com/aspnet-mvc/razor/grid/headerfootertemplates?theme=outlook.  But it seems to be for server binding only.  I need something to work for client/ajax binding.

I have found a hack.  I can use a toolbar template to create the header I want; that works.  Next, I need to hide the real header (hopefully, that will not hide the toolbar too or leave an empty space between the grid and the toolbar).  But that is a hack.  Is there a better way?

This is a look at what I have started.  I want the format of the header to match the format of the rows.
    .DataBinding(binding => binding.Ajax().Select(
and
    .ClientRowTemplate(crt =>
            "<table>" +
                "<tr>" +
                    "<td><#= StatusImage #></td>" +
                    "<td>" +
                        "<table>" +
                            "<tr>" +
                                "<td><#= Org #></td>" +
                                "<td><#= ExtId #></td>" +
                                "<td><#= Reference #></td>" +
                            "</tr>" +
                            "<tr>" +
                                "<td><#= Name #></td>" +
                            "</tr>" +
                        "</table>" +
                    "</td>" +
                    "</tr>" +
            "</table>")

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Jan 2012, 04:55 PM
Hello Glen,

In order to mimic a header row with a toolbar template, you need to use HTML markup, which is similar to that of the original header row. In addition, you need to use some additional CSS styles to align table cells better.

Here is a good starting point:

#Grid div.t-grid-header {
       display: none;
}
 
#Grid .t-grid-toolbar {
    padding: 0;
}
 
#Grid th.t-header {
    border-bottom-width: 0;
    border-top-width: 0;
}
 
#Grid .t-grid-content td {
    padding-left: 0;
    padding-right: 0;
}
 
#Grid .t-grid-content td td{
    padding-left: .6em;
    padding-right: .6em;
}


Use the GridID (Name) to limit the effect of the CSS rules to a specific Grid instance.

The cells in the toolbar template should align with the table cells from the row template. In order to achieve this, you should use tables with a fixed table-layout style and properly defined column widths. For example:

.ToolBar(t => t.Template(() =>
{ %>
    <table style="width:100%;table-layout:fixed;" class="t-grid-header">
        <colgroup>
            <col style="width:229px" />
            <col style="width:426px" />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th class="t-header"><span class="t-link">cell 1</span></th>
                <th class="t-header"><span class="t-link">cell 2</span></th>
                <th class="t-header"><span class="t-link">cell 3</span></th>
            </tr>
        </thead>
    </table>
<%}))


Please note that the scenario that you are implementing will not support functionality that relies on the native header cells, such as column resizing, column hiding and sorting.

Regards,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Insomniac82
Top achievements
Rank 1
answered on 16 Jan 2012, 05:07 PM
I'ved notice the problem with this approach not supporting sorting. 
Is there a way that I can use the Telerik MVC grid to have ajax binding, a custom row format and a matching header format that supports sorting?
From what I can tell, there isn't at least not with out a ton of work.
0
Dimo
Telerik team
answered on 16 Jan 2012, 05:11 PM
Well, basically you will need to implement all the sorting-related functionality yourself - click handlers for the fake header cells, sort indicators management, and triggering sorting via the client API.

Greetings,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
Grid
Asked by
Insomniac82
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Insomniac82
Top achievements
Rank 1
Share this question
or