problem using item template and default skin

[andieje]

Hi

I want to make use of the new Item template feature side the default skin to be able to add new custom header rows to the grid. This is what i have done. I have a label which takes the width of the grid and this is only shown when i want to insert my custom header.(i.e. it is set so visible = false but in the item bound event i sent it to visible depending on some row condition). I've then used a table to try and recreate the standard grid structure so that the grid rows match the columns on the header rows

<telerik:RadGrid ID="RadGrid1" runat="server" width="400">

 

<MasterTableView width="400" AutoGenerateColumns="false">

 

<Columns>

 

<telerik:GridBoundColumn HeaderText="ID" DataField="ID" >

 

<ItemStyle width="200"/></telerik:GridBoundColumn>

 

<telerik:GridBoundColumn HeaderText="Test" DataField="JourneyNo" >

 

<ItemStyle width="200"/></telerik:GridBoundColumn>

 

</Columns>

<

ItemTemplate>

<

asp:label id="header" visible="false" runat="server" style="display:block"/>

<

table>

<

tr>

<

td><asp:label id="column1" runat="server" Width="200"/></td>

<

td><asp:label id="column2" runat="server" Width="200"/></td>

<

tr>

</

table>

</

ItemTemplate>

 

 

</

MasterTableView>

 

</telerik:RadGrid>

I'm having problems with the visual appearance. Firstly there are grey lines in the rows i think because i am using tables and secondly I can't get the 'columns' in the item template to line up with columns in the header

Please can you advise how I can sort out the appearance
thanks

[andieje]

This is my latest attempt at layout and it's not too bad. However I don't understand why the right hand column is coming out at a different width than the left, specifically it wider

<telerik:RadGrid ID="RadGrid1" runat="server" width="400">

<MasterTableView width="400" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn HeaderText="ID" DataField="ID" >

<ItemStyle width="200"/></telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Test" DataField="JourneyNo" >

<ItemStyle width="200"/></telerik:GridBoundColumn>

</Columns>

<

ItemTemplate>

<

asp:label id="header" visible="false" runat="server" style="display:block"/>

 

<

asp:label id="column1" runat="server" Width="160"/>

<

asp:label id="column2" runat="server" Width="160"/>

 

</

ItemTemplate>

</

MasterTableView>

</telerik:RadGrid>

[Dimo]

Hi Andrea,

Thank you for the code snippets.

Here are some hints on your scenario:

1) Concerning the grey lines appearing in the templates - indeed, these are borders, inherited from the Default skin. In order to remove them, you can use:

.GridRow_Default td td,
.GridAltRow_Default td td
{
    border:0;
    padding:0;
}

However, this will remove the borders from detail tables, when using hierarchy. That is why, it will be best to use a wrapping <div> for your item templates and remove borders for table cells located inside the div, for example:


<ItemTemplate>
<div class="template">

</div>
</ItemTemplate>

.GridRow_Default  .template  td,
.GridAltRow_Default  .template  td
{
    border:0;
    padding:0;
}


2) Concerning the column and asp:label widths:

2a) it is better to use HeaderStyle-Width instead of ItemStyle-Width. You will reduce your HTML output and also, Internet Explorer set column widths more correctly this way.

2b) asp:labels are <span> elements and their width does not work in Firefox, because Firefox does not support display:inline-block, which is set in this case automatically by the .Net framework. So if you want to have a cross-browser consistent design, you should think of a different approach, e.g. divs or table cells.


I hope you find these notes useful. Let us know if you need further advice.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[andieje]

Thanks veyr much Dimo. That really helped!