[Solved] Background of Grid wrong size in all templates.

[Ryan]

The background of all my grids seems to be off...see attached image.  Wondering if this is a CSS naming collision or a known issue.
Attached screenshot is of Web20 but they all seem to have the same similar oddity.


Here's my markup:

<div id="Buyers" class="t-widget t-grid">
    <table cellspacing="0">
        <colgroup>
            <col /><col /><col /><col /><col /><col /><col /><col /><col />
        </colgroup><thead>
            <tr>
                <th class="t-header" scope="col">Buyer Login</th><th class="t-header" scope="col">Buyer First Name</th><th class="t-header" scope="col">Buyer Last Name</th><th class="t-header" scope="col">Buyer Address</th><th class="t-header" scope="col">Buyer City</th><th class="t-header" scope="col">Buyer State</th><th class="t-header" scope="col">Buyer Zip</th><th class="t-header" scope="col">Buyer Created Date</th><th class="t-header t-last-header" scope="col">Buyer Unpaid</th>
            </tr>
        </thead><tfoot>
            <tr>
                <td class="t-footer" colspan="9"><div class="t-status">
                    <a class="t-icon t-refresh" href="#"></a>
                </div></td>
            </tr>
        </tfoot><tbody>
            <tr>
                <td>[e-mail]</td><td>Holly</td><td>Jones</td><td>28572 JOLIE PRE Way</td><td>jackson</td><td>IL</td><td>17470-5908</td><td>1/22/2006 10:08:13 AM</td><td>3</td>
            </tr><tr class="t-alt">
                <td>[e-mail]</td><td>Angelina</td><td>Jones</td><td>28889 VIRGINIA Way</td><td>lockport</td><td>MD</td><td>91375</td><td>11/24/2001 11:47:40 AM</td><td>4</td>
            </tr><tr>
                <td>[e-mail]</td><td>Cade</td><td>Jones</td><td>6719 PIKE Pl.</td><td>orrville</td><td>RI</td><td>03036</td><td>9/14/2007 8:46:01 AM</td><td>4</td>
            </tr><tr class="t-alt">
                <td>[e-mail]</td><td>Alyssa</td><td>Jones</td><td>78915 BRANNON St.</td><td>woodland hills</td><td>MP</td><td>41786</td><td>5/15/2008 2:07:57 PM</td><td>2</td>
            </tr><tr>
                <td>[e-mail]</td><td>Darius</td><td>Jones</td><td>47630 MIRA FLORES Pl.</td><td>manchester</td><td>CT</td><td>12082-1059</td><td>3/14/2008 10:01:20 PM</td><td>4</td>
            </tr><tr class="t-alt">
                <td>[e-mail]</td><td>Anna</td><td>Jones</td><td>1973 JASMINE Lane</td><td>kentwood</td><td>NH</td><td>41071</td><td>11/16/2003 4:34:29 AM</td><td>4</td>
            </tr><tr>
                <td>[e-mail]</td><td>Nia</td><td>Jones</td><td>64473 JARED Circle</td><td>newton</td><td>FM</td><td>13605</td><td>4/27/2002 10:53:02 AM</td><td>0</td>
            </tr><tr class="t-alt">
                <td>[e-mail]</td><td>Porter</td><td>Jones</td><td>7879 KENTFIELD Circle</td><td>oklahoma city</td><td>VI</td><td>15985-1337</td><td>9/19/2003 2:49:29 PM</td><td>3</td>
            </tr><tr>
                <td>[e-mail]</td><td>Sophia</td><td>Jones</td><td>87120 JACKSON Ave.</td><td>snellville</td><td>MO</td><td>02878</td><td>11/19/2006 10:15:52 PM</td><td>4</td>
            </tr><tr class="t-alt">
                <td>[e-mail]</td><td>Dennis</td><td>Jones</td><td>4315 SUTTER Way</td><td>chesterfield</td><td>AR</td><td>29363</td><td>5/11/2009 10:38:24 PM</td><td>3</td>
            </tr><tr>
                <td>[e-mail]</td><td>Lola</td><td>Jones</td><td>65379 ROZANNA Circle</td><td>west monroe</td><td>KS</td><td>92132</td><td>5/31/2009 1:51:49 AM</td><td>2</td>
            </tr><tr class="t-alt">
                <td>[e-mail]</td><td>Alyssa</td><td>Jones</td><td>54777 WILD OAK Ave.</td><td>pensacola</td><td>OR</td><td>44092</td><td>10/18/2008 2:55:00 PM</td><td>1</td>
            </tr>
        </tbody>
    </table>
</div>

[Alex Gyoshev]

Hi Ryan,

My guess is that you're using auto-generated columns and there is not enough space for the grid data. And since the columns come without column widths, nothing triggers the horizontal scrolling. Can you please try to set the columns manually, and if that doesn't help - please send us how you are using the grid in the view (rather than the HTML output).

Sincerely yours,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ryan]

You were right...I'm omitting column width.  Since I do not want to display my entire model I need to manually add the columns...what is the best practice for making sure that my widths (columns.Add(o => o.BuyerLogin).Width(xxx); are optimal?  Trial and error?
I just tried adding .Width(100) to each...and it had no effect.

Html.Telerik().Grid<SGW2.DomainObjects.Buyer>(Model)
    .Name("Buyers")
    .Columns(columns =>
        {
            columns.Add(o => o.BuyerLogin);
            columns.Add(o => o.BuyerFirstName);
            columns.Add(o => o.BuyerLastName);
            columns.Add(o => o.BuyerAddress);
            columns.Add(o => o.BuyerCity);
            columns.Add(o => o.BuyerState);
            columns.Add(o => o.BuyerZip);
            columns.Add(o => o.BuyerCreatedDate.ToShortDateString()).Title("Created");
            columns.Add(o => o.BuyerUnpaid).Sortable(false);
        })
        .Sortable()
        .Pageable()      
        .Render();

[Ryan]

What's interesting...is if that background box did manage to scale to the appropriate size of the rest of the grid...the alternating lines would get lost.

I tried doing it again, this time binding to the entire model and the same issue occurs (screenshot attached):

Html.Telerik().Grid<SGW2.DomainObjects.Buyer>(Model)
           .Name("Buyer2")
           .Sortable()
           .Render();

[Alex Gyoshev]

Hi Ryan,

Since there is not enough space for the columns, you need to enable scrolling (using the .Scrollable() method). You'll notice that the columns get squeezed - to fight with this problem, you have to set the column width with the .Width() method of the columns, as you already tried (this time, it will work). I'm attaching a sample project that demonstrates it - just place the Telerik.Web.Mvc dll in the ReferencedAssemblies directory and add a reference in the project, in order to get it going. The relevant code is as follows:

<% Html.Telerik().Grid((IEnumerable<TelerikMvcApplication.Models.Customer>)ViewData["Customers"])
           .Name("Grid")
           .Columns(columns =>
           {
               columns.Add(c => c.CustomerID).Width(100);
               columns.Add(c => c.CompanyName).Width(250);
               columns.Add(c => c.ContactName).Width(180);
               columns.Add(c => c.ContactTitle).Width(200);
               columns.Add(c => c.Address).Width(230);
               columns.Add(c => c.City).Width(120);
               columns.Add(c => c.Region).Width(100);
               columns.Add(c => c.PostalCode).Width(100);
               columns.Add(c => c.Country).Width(100);
               columns.Add(c => c.Phone).Width(150);
               columns.Add(c => c.Fax).Width(150);
           })
           .Scrollable(scrollOptions => scrollOptions.Height(500))
           .Render(); %>

All the best,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.