GridTemplateColumn HeaderStyle-Width css

11 posts, 1 answers
  1. Michael
    Michael avatar
    31 posts
    Member since:
    Dec 2011

    Posted 09 Jan 2012 Link to this post

    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
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 09 Jan 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 09 Jan 2012 Link to this post

    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
  5. Michael
    Michael avatar
    31 posts
    Member since:
    Dec 2011

    Posted 09 Jan 2012 Link to this post

    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.
  6. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 10 Jan 2012 Link to this post

    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
  7. Michael
    Michael avatar
    31 posts
    Member since:
    Dec 2011

    Posted 10 Jan 2012 Link to this post

    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
  8. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Jan 2012 Link to this post

    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
  9. Michael
    Michael avatar
    31 posts
    Member since:
    Dec 2011

    Posted 16 Jan 2012 Link to this post

    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
  10. Jaya
    Jaya avatar
    81 posts
    Member since:
    Mar 2011

    Posted 06 Feb 2015 in reply to Jayesh Goyani Link to this post

    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

  11. Jaya
    Jaya avatar
    81 posts
    Member since:
    Mar 2011

    Posted 06 Feb 2015 in reply to Jayesh Goyani Link to this post

    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
  12. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 10 Feb 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017