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

GridTemplateColumn HeaderStyle-Width css

10 Answers 1444 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 09 Jan 2012, 03:53 PM
Hi,
I am trying to set the width of a GridTemplateColumn from a stylesheet rather than in the aspx page but it doesnt seem to work.  For instance the below code works to set the GridTemplateColumn width to 30 pixels.


<telerik:GridTemplateColumn AllowFiltering="false" UniqueName="DeleteRecord" HeaderStyle-Width="30px" >
    <ItemTemplate>
        <asp:ImageButton ID="btnDeleteRecord" runat="server" ImageUrl="../../Common/Images/Icons/small/delete.gif" CommandName="DeleteRecord" CssClass="CursorHand"/>
    </ItemTemplate>
</telerik:GridTemplateColumn>

However, The following code does not:
<telerik:GridTemplateColumn AllowFiltering="false" UniqueName="DeleteRecord" HeaderStyle-CssClass="commandHeader" >
    <ItemTemplate>
        <asp:ImageButton ID="btnDeleteRecord" runat="server" ImageUrl="../../Common/Images/Icons/small/delete.gif" CommandName="DeleteRecord" CssClass="CursorHand"/>
    </ItemTemplate>
</telerik:GridTemplateColumn>

.commandHeader
{
    width:30px;
}


Is there a way around this problem? Or am i doing something wrong?

Thanks,
Michael

10 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 09 Jan 2012, 05:35 PM
Hello,

Method 1:
<telerik:GridTemplateColumn>
                  <ItemTemplate>
                      <asp:ImageButton Width="99px" />
                  </ItemTemplate>
 
                  <ItemStyle  CssClass="MyClass" />
                  <HeaderStyle CssClass="MyClass" />
                  </telerik:GridTemplateColumn>
<style type="text/css">
        .MyClass
        {
 
            width : 100px !important;
        }
    </style>


Method 2:

<telerik:GridTemplateColumn>
                   <ItemTemplate>
                       <asp:ImageButton Width="99px" />
                   </ItemTemplate>
 
                   <ItemStyle Width="100px" />
                   <HeaderStyle Width="100px" />
                   </telerik:GridTemplateColumn>


Thanks,
Jayesh Goyani
0
Pavlina
Telerik team
answered on 09 Jan 2012, 05:36 PM
Hello,

To achieve your goal you should use the CSS code snippet below: 
<style type="text/css">
    div.RadGrid_Default .commandHeader,
    div.RadGrid_Default th.rgResizeCol
    {
        width: 30px;
    }
</style>

Give it a try and let me know how it goes.

All the best,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Michael
Top achievements
Rank 1
answered on 09 Jan 2012, 06:12 PM
Hi,
Thanks for your response but I still couldn't get this working.  Please see the below zip file for a sample project.  If you take a look at lines 31 and 32, line 32 doesn't seem to size the column correctly. However, if you comment line 32 out and uncomment line 31 it will size as expected.

http://dl.dropbox.com/u/13207221/TelerikRadGridTestCorrect.zip

Many Thanks,
Michael

Edit: Linked the wrong project zip file. The above is now correct.
0
Pavlina
Telerik team
answered on 10 Jan 2012, 12:19 PM
Hello Michael,

I am afraid I was not able to replicate the problem you are facing while using commandHeader CSSClass. In the both cases the application is working properly. Please watch this video and let me know if I am leaving something out while testing.

All the best,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Michael
Top achievements
Rank 1
answered on 10 Jan 2012, 12:25 PM
Hi,
If you look in your video at 0:16 the size of the highlighted area is different to the size of the highlighted area at 1:01. However, These should be the same if it is reading the style correctly.  I suspect that the size of the box at 0:16 is not actually 30 pixels.

I am trying to make my icons appear and position the same as they do at 1:01 but using a stylesheet not hardcoded in the aspx page.

Thanks,
Michael
0
Accepted
Pavlina
Telerik team
answered on 11 Jan 2012, 10:14 AM
Hello,

Indeed you are right that the column is wider while using a stylesteet. However, to be able to set the desired width you should remove left and right paddings as shown below:
div.RadGrid_Default .commandHeader,
div.RadGrid_Default th.rgResizeCol
{
    width: 30px;
    padding-left: 0px;
    padding-right: 0px;
}


Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Michael
Top achievements
Rank 1
answered on 16 Jan 2012, 12:25 PM
Brilliant, I have now got this working.  For anyone else who's interested, having TableLayout="Fixed" will also causes issues with using CSS like the above.  In a couple of our grids this stumped me.  Understandably once I realised the mistake it was easily fixed but worth noting for anyone else :)

Thanks once again,
Michael
0
Jaya
Top achievements
Rank 1
answered on 06 Feb 2015, 06:25 AM
Hi

How to Implemented Filter and Sorting Radgrid using Datatable in C# Code for example my field this

ex:Name,Empno,Amout,Dob Fields

any one guide me how will do this?

Thanks
for supports to all

0
Jaya
Top achievements
Rank 1
answered on 06 Feb 2015, 07:34 AM
Hi

How to Implemented Telerik Grid Bind Records using List object i seen this code

<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="Select OrderID, OrderDate, ShipVia, ShipName, ShipAddress, ShipCity, ShipCountry FROM Orders"></asp:SqlDataSource>

but here i canot pass my stored procedure how so i move bind the records to server side c# then how to sorting , Filtering Concept using Telerik Grid 
any one guide me post the code thats helpful for me
0
Pavlina
Telerik team
answered on 10 Feb 2015, 12:33 PM
Hi Jaya,

I already answered the other forum thread you have opened on the subject:
http://www.telerik.com/forums/how-to-implemented-filter-and-sorting-radgrid 

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Pavlina
Telerik team
Michael
Top achievements
Rank 1
Jaya
Top achievements
Rank 1
Share this question
or