Responsive Design

25 posts, 0 answers
  1. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 02 Oct 2012 Link to this post

    Does the RadGrid come withany out of the box fuctionallity for responsive Design.

    Or how would you go about it if you want to have Screens lager then 1024 and those smaller show different grids, or remove some colums for smart phones?

    Markus
  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 08 Oct 2012 Link to this post

    Hi Markus,

    To integrate the RadGrid in a responsive design you should place it in a container and set Height="100%". The RadGrid will occupy the full space of its wrapper and you can easy control its dimensions.

    Also, you can add Media Queries (breakpoints) and hide the column on desired screen resolution, e.g.
    CSS:
    @media screen and (max-width: 900px)
    {
    .additionalColumn {
        display: none;
     }
    }

    the Markup
    <telerik:RadGrid ID="RadGrid1" runat="server" Height="100%" AllowPaging="True" Skin="Simple"
        AllowCustomSorting="True" AutoGenerateColumns="true" OnNeedDataSource="RadGrid_NeedDataSource">
        <MasterTableView DataKeyNames="ID">
            <HeaderStyle Width="200px" />
            <Columns>
                <telerik:GridBoundColumn HeaderText="ID" DataField="ID"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Name" DataField="Name"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Location" DataField="Location">
                    <HeaderStyle CssClass="additionalColumn" />
                    <ItemStyle CssClass="additionalColumn" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="Date" DataField="Date"></telerik:GridBoundColumn>
            </Columns>
            <CommandItemTemplate>
            </CommandItemTemplate>
        </MasterTableView>
        <ClientSettings AllowExpandCollapse="True">
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
    </telerik:RadGrid>

    I hope this helps.

    All the best,
    Galin
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 08 Oct 2012 Link to this post

    Dear Galin

    Thank's. I will be using the media Query to handle it. thanks for the tip about header and item style css.

    Markus
  5. Saquib
    Saquib avatar
    2 posts
    Member since:
    Mar 2013

    Posted 28 Mar 2013 Link to this post

    How to Make Telerik Grid Responsive With jQuery FooTable

    I am using "User Control" in telerik grid in line edit form mod, and in User Control I have used footable JQuery (Refrence Link http://themergency.com/footable-demo/demo.htm) , its not working in telerik in line edit form , but its working other then telerik , is there any conflict between , telerik and other jQuery Plugins ...?
    I want to make Telerik grid behave as footable (Refrence Link http://themergency.com/footable-demo/demo.htm) Please Help if possible...

    Thanks
  6. Rick
    Rick avatar
    5 posts
    Member since:
    Jan 2013

    Posted 10 Apr 2013 Link to this post

    Galin,

    Your solution above does not seem to work fully. I am using a Media Query to attempt to eliminate columns.

    The query is working fine for the ItemStyle, but not for the HeaderStyle. What is happening is that the data for the column disappears, but the header cell remains, and the CssClass does not apply - but the data shifts over. Something like this:

    Name         Address    Address2     Phone   Etc....
    Name         Address    Phone          Etc....

    Address2 DATA does get the CssClass "additionalColumn" applied, and goes away. Its header though, does not go away, so the data columns shift to the left below it, and the RadGrid does not truly behave responsively and is broken.

    Any advice? Thanks!

    <telerik:GridBoundColumn    HeaderText="Address2"
                                DataField="Address2"
                                AllowFiltering="true"
                                ItemStyle-Width="50px"
                                HeaderStyle-Width="50px">
                                <HeaderStyle CssClass="additionalColumn" />
                                <ItemStyle CssClass="additionalColumn" />
    </telerik:GridBoundColumn>


    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .additionalColumn {
        display: none !important; }}
  7. Galin
    Admin
    Galin avatar
    526 posts

    Posted 15 Apr 2013 Link to this post

    Hello Rick,

    I have tested the provided suggestion and it works as expected. Therefore, I am sending a sample runnable page, which demonstrates it. Please check it out and let me know how it goes.

    Kind regards,
    Galin
    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.
  8. Rick
    Rick avatar
    5 posts
    Member since:
    Jan 2013

    Posted 15 Apr 2013 Link to this post

    Hi Galin,

    Thanks for your response.

    Yes I can see it works in your files. But it does not work in mine.  :)

    When I view in firebug in my code, I see this for the header row and data rows. Note that the CssClass is only getting applied to the data cell, and not the header.

    <th class="pointer rgHeader" scope="col">Address2</th>
     
    <td class="additionalColumn" style="width:50px;"> </td>

    Again here is the code for my column.

    <telerik:GridBoundColumn   
         HeaderText="Address2"
         DataField="Address2"
         AllowFiltering="true"
         ItemStyle-Width="50px"
         HeaderStyle-Width="50px">
         <HeaderStyle CssClass="additionalColumn" />
         <ItemStyle CssClass="additionalColumn" />
    </telerik:GridBoundColumn>

    What property of the Telerik controls may be overriding my HeaderStyle CssClass from being applied?

    For fun, I'll include some other code from the RadGrid...

    <telerik:RadGrid    ID="AddressGrid"
                        runat="server"
                        GridLines="None"
                        Width="100%"
                        AutoGenerateColumns="False" 
                        AllowPaging="True"
                        AllowCustomPaging="False"
                        AllowMultiRowSelection="false"
                        AllowFilteringByColumn="True"
                        AllowSorting="True"
                        GroupingEnabled="False"
                        OnItemCreated="AddressGrid_ItemCreated"
                        OnItemCommand="AddressGrid_OnItemCommand"
                        OnNeedDataSource="AddressGrid_OnNeedDataSource"
                        OnSelectedIndexChanged="AddressGrid_OnSelectedIndexChanged"
                        OnDataBound="AddressGrid_OnDataBound">         
                                                
        <MasterTableView
                        datakeynames="AddressID"
                        Width="100%"
                        PageSize="10"
                        GridLines="None"
                        CommandItemDisplay="Top"
                        AllowMultiColumnSorting="true"
                        EnableHeaderContextMenu="True"
                        EnableHeaderContextFilterMenu="True"
                        IsFilterItemExpanded="False"
                        OverrideDataSourceControlSorting="true">
     
            <RowIndicatorColumn Visible="False">  
                <HeaderStyle Width="20px"></HeaderStyle>            
            </RowIndicatorColumn>
     
            <NoRecordsTemplate>
                There are no active addresses.
            </NoRecordsTemplate>
            <PagerStyle NextPageText="<%$Resources : StoreResources, GRID_PAGER_NEXT%>" PrevPageText="<%$Resources : StoreResources, GRID_PAGER_PREV%>" Mode="NextPrevNumericAndAdvanced" />
            <CommandItemTemplate>
                <ecf:ThemedImage EnableViewState="false" ID="InfoImage" runat="server" UseSkin="false" ImageUrl="Images/Info.gif" CssClass="InfoImage" />
                <telerik:RadToolTip runat="server" TargetControlID="InfoImage" Position="BottomRight" RelativeTo="Element" RenderInPageRoot="True" Animation="Fade" ShowEvent="OnMouseOver" HideEvent="LeaveTargetAndToolTip" AutoCloseDelay="0" Width="400px">
                    Use spreadsheet functions to search for your address:
                    <ul>
                        <li>Click the column title to sort addresses.  Sorting may be done on multiple columns in either ascending or descending order.</li>
                        <li>Right-click on the column heading will show a context menu.  The menu allows you to sort or clear the sorting for a column.</li>
                        <li>The list may be filtered using the filter function within the context menu.  The filter may be cleared by pressing the "Clear Filter" button.</li>
                    </ul>
                </telerik:RadToolTip>
     
                <telerik:RadButton runat="server" ID="InsertBusinessAddressButton" OnClientClicking="ShowInsertForm" CommandArgument="BusinessAddress" Text="<%$Resources : StoreResources, CHECKOUT_ADDRESS_NEW_SHIPPING_ADDRESS %>">
                    <Icon PrimaryIconCssClass="rbAdd"></Icon>
                </telerik:RadButton>
                <telerik:RadButton runat="server" ID="InsertPersonalAddressButton" OnClientClicking="ShowInsertForm" CommandArgument="PersonalAddress" Text="<%$Resources : StoreResources, CHECKOUT_ADDRESS_NEW_BILLING_ADDRESS %>">
                    <Icon PrimaryIconCssClass="rbAdd"></Icon>
                </telerik:RadButton>
     
                <telerik:RadButton ID="ClearFilterButton" runat="server" Text="Clear Filter" CommandName="ClearFilter"  CausesValidation="False" Visible="False">
                    <Icon PrimaryIconCssClass="rbRemove"></Icon>
                </telerik:RadButton>
            </CommandItemTemplate>
     
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectionColumn" ItemStyle-Width="25px" CommandName="Select" />
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_ID%>"
                                            DataField="AddressId"
                                            Visible="false"
                                            AllowFiltering="false"
                                            AllowSorting="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_COMPANY%>"
                                            DataField="Company"
                                            AllowFiltering="true"
                                            ItemStyle-Width="50px"
                                            HeaderStyle-Width="50px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_FIRST_NAME%>"
                                            DataField="FirstName"
                                            AllowFiltering="true"
                                            ItemStyle-Width="50px"
                                            HeaderStyle-Width="50px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_LAST_NAME%>"
                                            DataField="LastName"
                                            AllowFiltering="true"
                                            ItemStyle-Width="50px"
                                            HeaderStyle-Width="50px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_ADDRESS%>"
                                            DataField="Address1"
                                            AllowFiltering="true"
                                            ItemStyle-Width="75px"
                                            HeaderStyle-Width="75px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="Address2"
                                            DataField="Address2"
                                            AllowFiltering="true"
                                            ItemStyle-Width="50px"
                                            HeaderStyle-Width="50px">
                                            <%--<HeaderStyle CssClass="rgHeader additionalColumn" />
                                            <ItemStyle CssClass="additionalColumn" />--%>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="Address3"
                                            DataField="Address3"
                                            AllowFiltering="false"
                                            AllowSorting="false"
                                            ItemStyle-Width="50px"
                                            HeaderStyle-Width="50px">
                                            <HeaderStyle CssClass="additionalColumn" />
                                            <ItemStyle CssClass="additionalColumn" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_CITY%>"
                                            DataField="City"
                                            AllowFiltering="true"
                                            ItemStyle-Width="25px"
                                            HeaderStyle-Width="25px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_STATE_REGION%>"
                                            DataField="State"
                                            AllowFiltering="true"
                                            ItemStyle-Width="30px"
                                            HeaderStyle-Width="30px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_POSTAL_CODE%>"
                                            DataField="PostalCode"
                                            ItemStyle-Width="30px"
                                            HeaderStyle-Width="30px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn    HeaderText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_COUNTRY%>"
                                            DataField="Country"
                                            AllowFiltering="true"
                                            ItemStyle-Width="30px"
                                            HeaderStyle-Width="30px">
                </telerik:GridBoundColumn>
     
                <telerik:GridButtonColumn                        
                                            UniqueName="DeleteColumn"
                                            CommandName="Delete"
                                            ConfirmText="<%$Resources : StoreResources, ADDRESS_GRID_MODULE_DELETE_CONFIRMATION%>"
                                            ConfirmTitle="Delete Address?"                       
                                            HeaderStyle-Width="20px"
                                            ItemStyle-Width="20px"
                                            ButtonType="PushButton"
                                            ButtonCssClass="rgDel"
                                            Text=""
                                            ConfirmDialogType="RadWindow" Visible="false" />
            </Columns>
     
            <ExpandCollapseColumn Visible="False" Resizable="False">
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
     
            <EditFormSettings>
                <PopUpSettings ScrollBars="None"></PopUpSettings>
            </EditFormSettings>
     
        </MasterTableView>
        <GroupingSettings CaseSensitive="false" />
        <ClientSettings AllowColumnsReorder="False">
            <Scrolling AllowScroll="True" UseStaticHeaders="false" SaveScrollPosition="True"></Scrolling>
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
    </telerik:RadGrid>

    Thank you SO much for your help!

    Kind regards,
    Rick
  9. Galin
    Admin
    Galin avatar
    526 posts

    Posted 18 Apr 2013 Link to this post

    Hi Rick,

    I am afraid the issue you are facing is not replicable on my side. Therefore, I would appreciate it, if you open a formal support thread and send a simple running project so that I can examine it locally.

    Greetings,
    Galin
    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.
  10. Chris
    Chris avatar
    1 posts
    Member since:
    Apr 2013

    Posted 19 Apr 2013 Link to this post

    Is there any more documentation or posts that deal with a responsive radgrid in more detail? I have filtering and paging on one of my radgrids but the paging doesn't seem to fit properly and the filter leaves cells for the columns that are display:none.


     
  11. GreenLizzard
    GreenLizzard avatar
    6 posts
    Member since:
    Feb 2011

    Posted 24 Apr 2013 Link to this post

    Hi guys,

    I found this page about the responsive design and I hope it will be helpfully for you

    http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
  12. Jeff
    Jeff avatar
    4 posts
    Member since:
    Jan 2013

    Posted 05 Mar 2014 Link to this post

    In the Q1 2014 version of the Telerik ASP.NET controls, some controls are now elastic and/or have responsive capabilities. There are also containers and alternative renderings for different sized browsers and devices.  A demo of this functionality can be found at:  http://demos.telerik.com/responsive-web-design-aspnet/samples.aspx
  13. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 14 Mar 2014 Link to this post

    Would love to see the Grid control get a responsive implementation like the one you see here:

    http://codepen.io/pixelchar/full/rfuqK
  14. Galin
    Admin
    Galin avatar
    526 posts

    Posted 19 Mar 2014 Link to this post

    Hi Paul,

    Thank you for providing this suggestion. It will be forwarded to our developers so they can consider the implementing of this behavior in the future.

    Regards,
    Galin
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  15. Curtis
    Curtis avatar
    23 posts
    Member since:
    Jan 2008

    Posted 13 May 2014 in reply to Galin Link to this post

    I completely echo Paul J's comment and the link he provided is the best behavior for responsive grids that need to scale down to smartphones.

    Basically, functionality would be very limited on a smartphone screen (limit command toolbar buttons, make paging controls very simple) but would have all the normal features on a tablet or desktop.

    This elastic behavior for the RadGrid would be a huge improvement.

  16. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 14 May 2014 in reply to Curtis Link to this post

    even better would be to incorporate the following responsive layout options as seen:

    http://filamentgroup.github.io/tablesaw/demo/kitchensink.html

    https://github.com/filamentgroup/tablesaw
  17. Curtis
    Curtis avatar
    23 posts
    Member since:
    Jan 2008

    Posted 14 May 2014 in reply to Paul J Link to this post

    Wow, thanks for sharing that link Paul J. The swipe mode is a brilliant idea. I would think Telerik could implement that with the frozen column and their enable header menu is very similar to the mini map.

    Until then, I think we may have to switch from RadGrid and implement this in a Repeater as we have struggled trying to make the RadGrid responsive.

    This is awesome!
  18. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 15 May 2014 in reply to Curtis Link to this post

    Sure. I've always thought the filament group are pioneers when it comes to usability design and practices. they're always offering up free solutions to common problems. I highly recommend following their blog. http://blog.filamentgroup.com/lab/

    yeah, if we're lucky maybe telerik will consider implementing such responsive table solutions for their radGrid in the near future. With their current structure of it, I wouldn't think it would be too difficult...
  19. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 19 May 2014 Link to this post

    Hi Paul,

    "yeah, if we're lucky maybe telerik will consider implementing such responsive table solutions for their radGrid in the near future. With their current structure of it, I wouldn't think it would be too difficult..."

    This is the direction we will follow in future - make more and more controls responsive/adaptive/elastic.
    We are in a phase of extensive research on different possibilities for making RadGrid behavior more suitable to mobile devices, so all your suggestions are very welcome. In the case of RadGrid it's a bit tricky however, because of  its rich functionality and the many nested controls (inputs, dropdowns, buttons, menus etc.) that also need to behave well on mobile devices.

    Thank you all once again for the valuable feedback. It will help us to improve our controls.

    Regards,
    Venelin
    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.

     
  20. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 09 Jul 2014 in reply to Venelin Link to this post

    I rarely use RadGrid with nested controls.

    Perhaps whip out a version of a responsive grid for display and row click (as a selector) - no nested controls in the light version.
  21. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 14 Jul 2014 Link to this post

    Hello Moon,

    "I rarely use RadGrid with nested controls."
    As I've mentioned we are in a phase of researching where the balance between functionality and "lightness" is. Some of the nested controls like inputs, dropdowns, buttons, menus are almost mandatory for some users. However it is very clear that the mobile version of RadGrid won't and doesn't need to support all the features that are supported in desktop.

    Regards,
    Venelin
    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.

     
  22. Ashandra
    Ashandra avatar
    2 posts
    Member since:
    Oct 2013

    Posted 22 Mar 2015 in reply to Galin Link to this post

    Hi,

    This works well. Solved my problem with this solution.  The @media tag in the css helps determine the size of the HTML table when the radgrid is rendered from asp to the browser. This way you can set which columns to not display at that resolution.
    @media (max-width: 341px)
    {
        .additionalColumn
        {
            display: none;
        }
    }



  23. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 21 Jul 2015 Link to this post

    Hi guys,

    You can find below a summary of the currently available resources for responsive grid UI and layout:
    Mobile Rendering Overview Help article
    Mobile RadGrid demo
    Responsive RadGrid Code Library
    Responsive Sample Application

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  24. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 21 Jun in reply to Rick Link to this post

    Hate to necro, but this is the only post I've found that talks about the exact issue I'm facing.  I'm experiencing the same issue as Rick using the latest version of the controls and bootstrap 3 classes.

    Rick, did you ever figure out a solution?

    My columns:
    <telerik:GridTemplateColumn DataField="ElectAppoint" UniqueName="colElectAppoint" HeaderText="Elect/Appoint" AutoPostBackOnFilter="true" HeaderStyle-CssClass="hidden-sm hidden-xs" ItemStyle-CssClass="hidden-sm hidden-xs"></telerik:GridTemplateColumn>

    <telerik:GridTemplateColumn UniqueName="colActions" AllowFiltering="false" HeaderStyle-CssClass="hidden-xs" ItemStyle-CssClass="hidden-xs"></telerik:GridTemplateColumn>

     

    When I shrink the page to a mobile size, the data area disappears but the header and filter box remain.  The css classes are not getting applied to the TD elements in the THEAD nor are they applied to the COLGROUP COL elements.  Does it have to do with it being a TemplateColumn or the Filtering being enabled?

    In the console, if I simply add the hidden-xs and hidden-sm classes to the TH elements in the THEAD, the headers disappear exactly as expected and desired.

  25. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 21 Jun in reply to J Link to this post

    Note, I removed the content inside my template for simplicity's sake since I don't believe it's relevant to the issue, but just in case:

    <telerik:GridTemplateColumn DataField="ElectAppoint" UniqueName="ColElectAppoint" HeaderText="Elect/Appoint" AutoPostBackOnFilter="true" HeaderStyle-CssClass="hidden-sm hidden-xs" ItemStyle-CssClass="hidden-sm hidden-xs">
    <ItemTemplate>
    <asp:Literal ID="litElectAppoint" runat="server" Text='<%# Bind("ElectAppoint") %>' />
    </ItemTemplate>
    <EditItemTemplate>
    <asp:DropDownList ID="ddlElectAppoint" runat="server" SelectedValue='<%# Bind("sToOffice") %>'>
    <asp:ListItem Text="Elected" Value="E" />
    <asp:ListItem Text="Appointed" Value="A" />
    </asp:DropDownList>
    </EditItemTemplate>
    <HeaderStyle Width="100px" />
    </telerik:GridTemplateColumn>

    <telerik:GridTemplateColumn UniqueName="colActions" AllowFiltering="false" HeaderStyle-CssClass="hidden-xs" ItemStyle-CssClass="hidden-xs">
    <ItemTemplate>
    <asp:Button ID="btnEdit" runat="server" CssClass="btn btn-xs btn-primary ddBtn" Text="Edit" CausesValidation="false" CommandName="Edit" />
    <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-xs btn-danger ddBtn" Text="Delete" CausesValidation="false" CommandName="Delete" />
    </ItemTemplate>
    <EditItemTemplate>
    <asp:Button ID="btnSave" runat="server" CssClass="btn btn-xs btn-success ddBtn" Text="Save" CommandName="Update" CommandArgument='<%# Bind("uRegDetail_id") %>' />
    <asp:Button ID="btnCancel" runat="server" CssClass="btn btn-xs btn-warning ddBtn" Text="Cancel" CausesVaidation="false" CommandName="Cancel" />
    </EditItemTemplate>
    <HeaderStyle Width="165px" />
    </telerik:GridTemplateColumn>

  26. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 21 Jun in reply to J Link to this post

    Bleh, it's been a long day and mis-typed (seriously, no edit option for posts Telerik?).

    The css classes are being applied to the TH elements in THEAD, but are not being applied to the TD elements in THEAD where the filter row is.  Manually adding the "hidden-xs hidden-sm" classes to the TD elements in THEAD removes the column as desired.  So it seems to be the filtering option that causes it to always display.

    I looked for a way to add classes to the filter row items but I don't see one like there is for the Header and Item. I've ended up using jQuery to add the classes to it which worked, but this is not an ideal solution as I'd need to update the jQuery if I make any column changes in the future, so I'm going to need to do it server side when the items are created.

    Is there a way to add classes to the filter row items in markup that I've overlooked?  Is this behavior expected?

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