padding in mastertableview ItemTemplate

[Albert Shenker]

I am implementing a cardview solution which displays a list of custom objects in a datalist like structure. I use a global ItemTemplate which contains no padding. However, it appears that the grid (perhaps because of the the "Hay" skin), is inserting padding and/or margin in between items. Is there a way to eliminate this without creating a custom skin?

My

<telerik:RadGrid ID="rgResults"
                                runat="server"
                                GridLines="None"
                                AllowPaging="True"
                                AllowSorting="False"
                                PageSize="10"
                                ShowHeader="False"
                                Skin="Hay"
                                Width="500px"

                        >
                            <PagerStyle Mode="NextPrevAndNumeric" />
                            <MasterTableView TableLayout="Fixed">
                                <ItemTemplate>
                                    a user control which renders the data item                                </ItemTemplate>
                                <NoRecordsTemplate><div class="Alert" style="padding:5px;">Your search returned <strong>0</strong> results. Please modify the search parameters and try again.</div></NoRecordsTemplate>
                            </MasterTableView>

                        </telerik:RadGrid>

markup is:

[Dimo]

Hello Albert,

If there are any <td> elements inside the ItemTemplate or user control inside the template, they will inherit padding styles from the RadGrid skin. If this is the case, you can use the following:

ASPX

<telerik:RadGrid  CssClass="NoPadding"  />


CSS

div.NoPadding  .MasterTable_Hay  td
{
      padding: 0;
}


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Albert Shenker]

Thanks, that did the trick. One other thing.. is there a way to turn off the alternating background colors used by the grid. I tried setting the background-color property of the "NoPadding" class, but it didn't work. I assume the Item background-color comes from some other element.

[Dimo]

Hi Albert,

In order to remove the alternating background color, please use:


.NoPadding .GridRow_Hay
{
     background: none transparent;
}


Alternatively, you can use


.RadGrid_Hay .GridRow_Hay
{
     background: none transparent;
}


if you want this customization to work for all Hay grids in your website.


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Albert Shenker]

Hmmm. That seems to have gotten rid of the item background colors, but there still appears to be a general background color for the grid as well as Item borders. I tried setting border:0; for the .NoPadding .GridRow_Hay class, but this didn't work.  Is there eanother class for this and the general grid background?

If you can't tell, I would like the grid to supply no styling to the items. All styling will be handled by the ItemTemplate. I suppose it isn't critical that I use the Hay skin, but the "Default" skin had its own, albeit simpler, styles.

[Dimo]

Hello Albert,

Yes, the main RadGrid <div> also has a background. This is how to remove it:


div.NoPadding  /* only for RadGrids with this CssClass */
{
      background: none transparent;
}

or

div.RadGrid_Hay  /* for all Hay RadGrids */
{
      background: none transparent;
}


In RadGrid the item backgrounds are set to table rows, while the borders and paddings are set to table cells. This is how to remove borders and paddings:


.NoPadding  .GridRow_Hay  td,
.NoPadding  .GridAltRow_Hay  td
{
     border:0;
     padding:0;    
}


By the way, Firebug for Firefox is a very useful tool for finding out what to change in order to override some CSS styles. I strongly recommend it.


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Albert Shenker]

Thanks for your help. That took care of everything. I have used Firebug in the past, but I am now using Firefox 3.0. I was under the impression that FIrebug was not available in this release. Am I mistaken?

[Dimo]

Hello Albert,

Sure it is available - the latest Firebug versions support Firefox 3.

http://getfirebug.com/

https://addons.mozilla.org/en-US/firefox/addon/1843


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Albert Shenker]

Thanks!

[Albert Shenker]

I have run into a complication with this solution. My grid is within a panel that gets Ajaxified. When the grid first loads (the default data), everything appears normal. When a button is clicked, new data is retrieved and the grid is rebound. This occurs with an AjaxManager Update and loading panel. After the grid is rebound, the results look right, except now the grid's default styles appear and the altered ones do not apply. My grid and the custom style definitions are all togetehr in one use control (which resides in the panel that gets ajaxified). Any ideas?

[Albert Shenker]

I should add that this appears to only occur in IE (6 & 7) and not Firefox 3.

[Dimo]

Hello Albert,

This problem can be reproduced without any RadControls on the page or in the user control. No matter whether this is an ASP.NET AJAX bug or browser problem, you should move your <style> or <link> tags out of the page <body> , because they do not belong there. Please use external CSS files registered in the page header.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Albert Shenker]

Thanks. That took care of it.

[Albert Shenker]

The style suggestions (below) in this thread seem to have been broken by the new Q1 '09 skinning framework. Can you please provde the altered styles to accomplish the no padding/border grid. Thanks!

div.RadGridNoPadding_Default  /* only for RadGrids with this CssClass */
{
    background: none transparent;
    border:0;
}

div.RadGridNoPadding_Default  .MasterTable_Default  td {
    padding: 0;
}

.RadGridNoPadding_Default .GridRow_Default
{
    background: none transparent;
}

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

[Dimo]

Hello Albert,

Please replace the old CSS classes as follows:

MasterTable_Default   ->   rgMasterTable
GridRow_Default   ->   rgRow
GridAltRow_Default   ->   rgAltRow

The full list of old and new RadGrid CSS classes is available at:

http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

In addition to renaming the CSS classes, you need to increase the specificity of the last two CSS rules by adding "div" in front of ".RadGridNoPadding_Default" or "tr" in front of the row CSS class. For example:

div.RadGridNoPadding_Default   tr.GridRow_Default   td, 
div.RadGridNoPadding_Default   tr.GridAltRow_Default  td 
{ 

}


Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.