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

Responsive Design

25 Answers 1614 Views

Grid

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

25 Answers, 1 is accepted

answered on 08 Oct 2012, 07:27 AM

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.

answered on 10 Apr 2013, 04:46 PM

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

answered on 15 Apr 2013, 07:28 AM

testPage.zip

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

answered on 15 Apr 2013, 04:38 PM

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

answered on 19 Apr 2013, 02:26 PM

Capture.JPG

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.

answered on 19 May 2014, 07:17 AM

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.

answered on 21 Jun 2016, 11:54 PM

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.

answered on 21 Jun 2016, 11:58 PM

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>

answered on 22 Jun 2016, 12:10 AM

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?

Responsive Design

25 Answers, 1 is accepted

How to Make Telerik Grid Responsive With jQuery FooTable