Responsive Design

[Markus]

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

[Galin]

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

[Markus]

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

[Saquib]

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

[Rick]

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; }}

[Galin]

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

[Rick]

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

[Galin]

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

[Chris]

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.


 

[GreenLizzard]

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

[Jeff]

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

[Paul J]

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

http://codepen.io/pixelchar/full/rfuqK

[Galin]

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

 

 

[Curtis]

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.

[Paul J]

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

[Curtis]

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!

[Paul J]

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...

[Venelin]

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

 

 

[Moon]

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.

[Venelin]

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

 

 

[Ashandra]

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;
    }
}

[Pavlina]

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

[J]

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.

[J]

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>

[J]

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?

[Rogerio]

Four Years... and the same 'needed features'/'questions' are still 'living'...

Is there any news?