Telerik Forums
This is a migrated thread and some comments may be shown as answers.

[Solved] How do you line up Columns with their Headings ?

9 Answers 307 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
IQworks
Top achievements
Rank 1
IQworks asked on 10 Dec 2009, 02:54 PM
Hi,
   I am new to Telerik's MVC extensions. 
   Does lining up columns underneath their associated headings depend on binding or CSS ?
   When I try to work off of the examples for instance, my Grid looks like this .... 
   heading1               heading2          heading3       
   data1a   data2a   data3a
   data1b   data2b data3b

   I am trying to understand the concept so I can control this to make it look like this 
heading1               heading2          heading3       
data1a                   data2a             data3a
data1b                   data2b             data3b
  
   thanks


    

9 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 10 Dec 2009, 03:15 PM
screenshot.png
Hi IQworks,

Columns should be aligned under their headers as expected. Check this screenshot for a reference. Could you please paste here your grid declaration as well as a screenshot how it looks at your end?


Regards,
Atanas Korchev
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.
0
IQworks
Top achievements
Rank 1
answered on 10 Dec 2009, 05:37 PM
columnissues.JPG
Hi Atanis,

(the difference between this code and the one in the other issue I posted about scrolling is "tables" in the view. )

This is my masterpage .....
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>  
    <script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script> 
    <script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script> 
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> 
      
 
<!-- iqworks for telerik -->      
<%= Html.Telerik().StyleSheetRegistrar()                         
.DefaultGroup(group => group.Add("Site.css")                                                    
.Add("telerik.common.css")                                                      
.Add("telerik.hay.css")                                                     
.Combined(true)                                    
) %>   
 
</head> 
 
<body> 
    <div class="page">  
 
        <div id="header">  
            <div id="title">  
                <h1>My Body Science</h1> 
            </div> 
                
            <div id="logindisplay">  
                <% Html.RenderPartial("LogOnUserControl"); %> 
            </div>   
              
            <div id="menucontainer">  
              
            
 
 
              
              
                <ul id="menu">                
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>  
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>  
                </ul> 
              
            </div> 
        </div> 
 
        <div id="main">  
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
              
            <div id="footer">  
            </div> 
        </div> 
    </div> 
                                                   
  <% Html.Telerik().ScriptRegistrar().Render(); %>                                                                                                                                                          
                                                            
 
</body> 
</html> 
 

This is my view .....
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"   
Inherits="System.Web.Mvc.ViewPage<IEnumerable<MBSAnalysisMVC.Models.Members>>" %> 
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  
       
</asp:Content> 
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
    <p> 
       Telerik GRID Data .....  
    </p> 
     
<%  Html.Telerik().Grid(Model)  
    .Name("MemberGrid")  
    .Columns(columns => 
    {   
     columns.Add(o => o.MemberNo).Width(10);  
     columns.Add(o => o.Username).Width(150);  
     columns.Add(o => o.FirstName).Width(150);  
     columns.Add(o => o.DateCreated).Format("{0:MM/dd/yyyy}").Width(120);  
    })  
       // .Ajax() // Needs additional information.  
         // .Scrollable()  // Will throw off position, needs to be further configured.  
        .Filterable()  
       .Pageable()  
        .Sortable()  
        .Scrollable()  
        .Render();  
        %> 
    
    </asp:content> 
 
 
0
Georgi Krustev
Telerik team
answered on 16 Dec 2009, 12:35 PM
Hello David,

The cause of the aforementioned erroneous behavior is missing asset handler registration. Please examine this online help article. Also please notice the important note in this article, which points the need of handler registration.

All the best,
Georgi Krustev
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.
0
IQworks
Top achievements
Rank 1
answered on 20 Jan 2010, 10:01 PM
telerik-colunm-issue.JPG

Hi Georgi,
          Enclosed is the screen shot.
          I do have the handler registered , and I read both of the suggested links from your last post ....

The asset handler registered ....         

  <handlers> 
      <remove name="WebServiceHandlerFactory-Integrated" /> 
      <remove name="ScriptHandlerFactory" /> 
      <remove name="ScriptHandlerFactoryAppServices" /> 
      <remove name="ScriptResource" /> 
      <remove name="MvcHttpHandler" /> 
      <remove name="UrlRoutingHandler" /> 
      <!--iqworks for telerik 12/09/2009--> 
      <remove name="AssetHandler" /> 
      <!-- iqworks for telerik end --> 
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
      <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
      <add name="MvcHttpHandler" preCondition="integratedMode" verb="*" path="*.mvc" type="System.Web.Mvc.MvcHttpHandler, System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
      <add name="UrlRoutingHandler" preCondition="integratedMode" verb="*" path="UrlRouting.axd" type="System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" /> 
      <!--iqworks for telerik 12/09/2009--> 
      <add name="AssetHandler" preCondition="integratedMode" verb="GET,HEAD" path="asset.axd" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc" /> 
      <!-- iqworks for telerik end --> 
    </handlers> 

         This is my master page ...

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>  
    <script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script> 
    <script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script> 
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> 
      
 
<!-- iqworks for telerik -->      
<%= Html.Telerik().StyleSheetRegistrar()                         
.DefaultGroup(group => group.Add("Work.css")                                                    
.Add("telerik.common.css")                                                      
.Add("telerik.hay.css")                                                     
.Combined(true)                                    
) %>   
 
</head> 
 
<body> 
    <div class="page">  
      
    <div> 
     <h1>MemberNo: <%=TempData["vdMemberNo"]%></h1>   
     <h1>Body Composition Analysis for :  <%= TempData["vdDisplayName"]%></h1>  
 
    </div> 
      
     <div id="menucontainer">  
              
              <ul id="menu">                
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>  
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>  
                </ul> 
              
            </div> 
 
         <%  
             MenuOrientation orientation = (MenuOrientation)Enum.Parse(typeof(MenuOrientation),  
                       (string)ViewData["orientation"]);   
                    var htmlAttributes = new { style = "float: left; z-index: 3; position: relative;" };  
             if (orientation == MenuOrientation.Vertical)   
                 htmlAttributes = new { style = "float: left; width: 250px;" };   
               
             Html.Telerik().Menu()  
                 .Name("Menu")  
                 .HtmlAttributes(htmlAttributes)  
                 .Orientation(orientation)  
                 .Items(menu =>   
                 {    
                     menu.Add()  
                     .Text("Goals")  
                     .ImageUrl("~/Content/Images/Icons/Suites/mvc.png")  
                     .Items(item => 
                     {  
                         item.Add().Text("Grid") ;   
                         item.Add().Text("Menu") ;  
                         item.Add().Text("PanelBar") ;  
                         item.Add().Text("TabStrip") ;   
                     });  
                     menu.Add()  
                         .Text("Exercises")   
                         .ImageUrl("~/Content/Images/Icons/Suites/sl.png")  
                         .Items(item =>    
                         {   
                             item.Add().Text("GridView");   
                             item.Add().Text("Scheduler");  
                             item.Add().Text("Docking");   
                             item.Add().Text("Chart");    
                         });   
                       
                      })   
                      .Render();    %> 
    </div> 
     <div id="main">  
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
     </div>         
            <div id="footer">  
        </div>      
            <%-- THE SCRIPTMANAGER - Either in the masterpage or in the child pages --%> 
           <%-- %> <%= Html.Telerik().ScriptRegistrar() %> --%>   
<%  
    Html.Telerik().ScriptRegistrar()   
        .Render();  
%> 
   
</body> 
</html> 
 

This is my aspx ...

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Work.Master"%> 
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  
 <div> 
     <h1>MemberNo: <%=ViewData["vdMemberNo"]%></h1>   
     <h1>Body Composition Analysis for :  <%= TempData["vdDisplayName"]%></h1>  
 </div>    
</asp:Content> 
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
    <p> 
       Telerik GRID Data .....  
    </p> 
  <table>   
  <tr> 
  <td align="center" style="width:800px;" > 
  <% Html.RenderPartial("MemberGrid", Model); %> 
   
   
  </td>    
  </tr> 
  <tr> 
  <td align="center" style="width:800px;">  
  <% Html.RenderPartial("CompanyGrid",ViewData["Company"]); %>     
 
  </td>            
  </tr>    
   <tr> 
  <td align="center" style="width:700px;">  
  <% Html.RenderAction("WorkViews", "Work"); %>    
   
  </td>            
  </tr>    
    
     
   <tr> 
  <td align="center" style="width:700px;">  
   <% Html.RenderPartial("FacilityGrid2"); %>     
   
  </td>            
  </tr>     
    
    <tr> 
  <td align="center" style="width:700px;">  
    <% Html.RenderPartial("FacilityGrid3"); %>      
   
  </td>            
  </tr>                   
  </table>    
     
    </asp:content> 
 

        

This is my partial view 

 

FacilityGrid3

 

 

 

<%-- This Partial view loads data by itself, not from the controller with inserts --%> 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 
 
 
<% Html.BeginForm( "Adds", "Work", FormMethod.Post); %>   
 
<%    
     
  // IEnumerable<MBSAnalysisMVC.Models.Facility> fac =   
  // MBSAnalysisMVC.Models.MBSAnalysisMVCDataContext.GetFacilities();  
 
   Html.Telerik().Grid(MBSAnalysisMVC.Models.MBSAnalysisMVCDataContext.GetFacilities())   
    .Name("FacilityGrid")  
    .Columns(columns => 
    {  
        columns.Add(c =>  {  
                        %> 
                        <%= Html.ActionLink("Edit", "Edit", new { id = c.fcFacilityNo},  
                                 new { @class="t-link action-edit" })%>   
                        <%= Html.ActionLink("Delete", "Delete", new { id = c.fcFacilityNo},  
                            new { @class = "t-link action-delete" }) %> 
                        <%   
                        }).Title("Actions").Width(150);     
        columns.Add(o => o.fcMemberNo).Width(150);  
        columns.Add(o => o.fcCompanyNo ).Width(150);  
        columns.Add(o => o.fcFacilityNo).Width(150);  
        columns.Add(o => o.fcFacilityName).Width(150);  
    })  
     
 
       // .Ajax() // Needs additional information.  
          .Scrollable()  // Will throw off position, needs to be further configured.  
        .Filterable()  
       .Pageable()  
        .Sortable()  
        .Render();  
        %> 
      <style type="text/css">   
         .action-edit { background-image: url('<%= ResolveUrl("~/Content/Images/Icons/edit.png") %>'); }  
         .action-delete { background-image: url('<%= ResolveUrl("~/Content/Images/Icons/delete.png") %>'); }   
         .action-edit, .action-delete      
         {padding-left: 18px;  
          background-repeat: no-repeat;  
          background-position: 0 50%;  
          margin-right: 10px;}  
          .action-edit:hover,  
          .action-delete:hover  
          {text-decoration: none;}  
      </style>    
      <tr> 
       <p> 
        <td><%=Html.SubmitImage("save", "~/Content/images/Icons/add.gif", new { alt = "Add" })%> 
        &nbsp; Name..&nbsp;<%=Html.TextBox("Name", "")%>   
        &nbsp; Description ..&nbsp;<%=Html.TextBox("Desc", "")%></td>  
       </p>   
      </tr>    
    <% Html.EndForm(); %>   
                

 

0
IQworks
Top achievements
Rank 1
answered on 21 Jan 2010, 05:01 AM
    It looks like the ,Scrollable() property is throwing the alignment of columns with the heading off a bit.
    Also,  I still dont know what is making only the column detail scroll horizontally and not the headings.
0
IQworks
Top achievements
Rank 1
answered on 21 Jan 2010, 04:47 PM
As I stated, I think the scrollable property throws off the column headings. 
How do you work with the scrollable property so that it keeps the headings and columns aligned ?
thanks 
0
Alex Gyoshev
Telerik team
answered on 22 Jan 2010, 09:44 AM
columnalignment.zip
Hello David,

I'm attaching a sample application that uses most of the code you sent and the scrolling behaves normally.

If this doesn't help, please open a support ticket and send us a working sample that we can take a look at. There may be some clashing styles that cause the problem.

Kind regards,
Alex Gyoshev
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.
0
Pierre-Andre van Leeuwen
Top achievements
Rank 1
answered on 10 May 2010, 01:24 PM
Did you ever manage to fix this?

I'm experiencing the same problem, but only in IE7. IE8 works correctly. I've confirmed that removing the Scrollable() call fixes the problem. This is however not a viable option, as the grid needs to be scrollable.
0
Dave
Top achievements
Rank 1
answered on 11 May 2010, 11:04 PM
I was able to resolve this by NOT specifying the .Width property on at least 1 of my columns:

 .Columns(columns => 
            { 
                columns.Bound(a => a.ActiveXType).Width(143); 
                columns.Bound(a => a.ActiveXUrl); 
                columns.Bound(a => a.Description).Width(150); 
                columns.Bound(a => a.IsCurrent).Width(70); 
                columns.Bound(a => a.Version).Width(70); 
                columns.Command(commands => 
                { 
                    commands.Edit(); 
                    commands.Delete(); 
                }).Width(100).Title("Options"); 
            }) 

So my "ActiveXUrl" column doesn't have a width specified.   This fixes the issue in IE7.. I also tested in IE8, Chrome and Firefox 3.6
Tags
Grid
Asked by
IQworks
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
IQworks
Top achievements
Rank 1
Georgi Krustev
Telerik team
Alex Gyoshev
Telerik team
Pierre-Andre van Leeuwen
Top achievements
Rank 1
Dave
Top achievements
Rank 1
Share this question
or