[Solved] Fixed size grid .

[Jonisan]

Hello ,

I need a fixed size grid , like for a daily program with columns (Monday - Wednesday) and 3 rows (Doctor name 1 ,2 ,3) .
I done a normal grid with 4 columns , first  with empty title :
 [KnownType(typeof (OverviewGridModel))]
    public class OverviewGridModel
    {
        [ScaffoldColumn(false)]
        public virtual int Id { get; set; }      
        public virtual string MO{ get; set; }       
        public virtual string TU{ get; set; }
        public virtual string WE{ get; set; }
        [Required]
        [DisplayName(@"  ")]        
        public virtual string rowsTitle {get;set;}
    }

I added this columns in a grid .

Q1: Is there any way that I can make the grid have the first column with the aspect of the columns title?
Q2: not that important , but can I hide the first column title .. not just to make him empty ?

[Dimo]

Hi Jonisan,

I am afraid I cannot understand your first question. Can you please explain in more detail and provide a screenshot, if necessary.

As for the second question - I suppose you want to make a "hole" in the Grid at the place of the ID column header cell. You can't simply hide the cell with a CSS style, because the background is applied to another element and it will remain visible. What you can do is:

- set a custom CSS class to the ID column's header cell with HeaderHtmlAttributes() of the respective column.
- use the following CSS rule:

.t-grid  .myHeaderClass
{
         background-color: #fff;
         border-color: #fff;
}

.t-grid  .myHeaderClass .t-link
{
      visibility: hidden;
}

Note that this will still leave the Grid outer border visible. You can remove that as well, if needed.

Regards,
Dimo
the Telerik team

[Jonisan]

Ok ..
thank you .. for the first Q , the grid must be something like this :
http://postimage.org/image/4ey94mhsj/ 
 

[Dimo]

Hi,

I see. Well, such a layout is not supported, but you can apply a custom CSS class to all cells from the first column (by using HtmlAttributes() of the first column) and apply a background and other styles of your choice.

Greetings,
Dimo
the Telerik team

[Jonisan]

Ok , Thank you !

[Jonisan]

OK , this is my partial solution for ppl ho want a grid to have row names :
http://s18.postimage.org/yxeeeqj15/last.jpg

 <% = Html.Telerik().Grid<OverviewGridModel>()
                            .Footer(false)
                          .Name("Grid")
                          .DataBinding(dataBinding => dataBinding.Ajax()
                                            .Select("Select" , "OverviewGrid")
                                        )
                          .HtmlAttributes(new
                            {
                                style = "width: 500px;border-color:#6B6B6B;text-align:center;border-width:0px" 
                            })
                          .DataKeys(dataKeys => dataKeys.Add(p => p.Id))
                          .Columns(columns =>
                                       {
                                           columns.Bound(p => p.rowsTitle).Width(200)
                                                        .HeaderHtmlAttributes(new
                                                        {
                                                            style = "visibility: hidden"
                                                        })
                                                        .HtmlAttributes((new
                                                                        {
                                                                            style = "border-width:0px;background: #6B6B6B url('/Content/2011.3.1115/Office2010Black/sprite.png') repeat-x 0 -752px;color:black;width:400px"
                                                                        }));
                                           columns.Bound(p => p.Quarry).Width(200)
                                           .HeaderHtmlAttributes(new
                                           {
                                               style = "border-width:1px;text-align:center;"
                                           })
                                           .HtmlAttributes(new
                                           {
                                               style = "border-width:1px;border-top-width: 0px"
                                           });
                                           columns.Bound(p => p.Plant).Width(200)
                                           .HeaderHtmlAttributes(new
                                           {
                                               style = "border-width:1px;border-left-width: 0px;text-align:center"
                                           })
                                           .HtmlAttributes(new
                                           {
                                               style = "border-width:1px;border-left-width: 0px;border-top-width: 0px"
                                           });
                                           ;
                                           columns.Bound(p => p.StoneShipment).Width(200)
                                           .HeaderHtmlAttributes(new
                                           {
                                               style = "border-width:1px;border-left-width: 0px;text-align:center"
                                           })
                                           .HtmlAttributes(new
                                           {
                                               style = "border-width:1px;border-left-width: 0px;border-top-width: 0px"
                                           });
                                           ;
                          })
      
                    %>



It is partial because I have no row lines at  column names, and I needed to hardcode the path to the image of the theme column , so if you change the theme you need to change that