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

Are Telerik Ajax UI Controls Responsive to different devices

10 Answers 300 Views

General Discussions

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

10 Answers, 1 is accepted

answered on 10 Feb 2014, 09:47 AM

Hi, Yassin.

The question you are asking "will [TelerikUI] work with Bootstrap and be responsive to different devices" is not one with a single answer:

1) If you are asking if TelerikUI for ASP.NET Ajax controls will work with bootstrap (as in behave, work properly, do not break), the answer is Yes, with latest improvements being available with 2014 Q1. We devoted sometime and fixed many compatibility issues.

2) If you are asking if TelerikUI controls will be styled by Bootstrap themes, the answer is No.

3) If you are asking if TelerikUI controls will "respond" e.g. resize in bootstrap based layout, they will, as long as you set proper width (e.g. 100%)

In addition to purely resizing, we have prepared two "adaptive" controls that offer optimized experience for touch devices, namely RadMenu and RadScheduler, but will announce more with the release.

Did I answer your question? If not, can you please clarify your question, because as I noted, it's not one with a single answer.

Regards,
Ivan Zhekov
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 10 Feb 2014, 02:47 PM

Hi, Yassin.

By setting the width to 100% the controls will try take all available space. Examine the following snippet:

<style>

html .RadComboBox {width: 100%}

</style>

<div class="col-xs-12 col-md-6 col-lg-4">

<telerik:RadComboBox runat="server">...</telerik:RadComboBox>

</div>

First is the styles -- we are a overriding the width of all comboboxes (within the styles scope) to be 100%. That means it will take all available space.

Then we have a div element styled with Bootstrap class names. It reads "on extra small devices make the column full row wide, then on medium devices make it 6 units wide (half column) and then on large devices make it 4 units wide (third column).

That doesn't make RadComboBox responsive, it just makes it take all available space. For what is worth, any control placed with either explicit attribute or stylesheet will do the same.

We like to refer to this type of behaviour as fluid.

In contrast a responsive control is one that will provide optimized (or improved) interaction for the device you are currently viewing the control. While the combobox has little or nothing to improve in terms of interactions, a scheduler like control can indeed improve a lot (and we have done so).

The other controls you mentioned -- Grid, TabsTrip and RadInput -- do not provide the optimized experience yet, but are in the works.

Bootstrap / Telerik theme... That's another story. For TelerikUI controls to be able to use a Bootstrap theme, it means that everything we have in the suite (in terms of base components) should have it's equivalent Bootstrap.

For instance, there is no Bootstrap treeview, you can hardly do a Bootstrap ComboBox / DropDownList.

At the same time, the skins for TelerikUI have only one type of button, instead of the 5 predefined types in Bootstrap. There are no badges; no alerts ...

And finally, but not least, both suites rely on javascript for some interactions and that would mean change in the rendering. While small fixes (read changes) in TelerikUI are considered OK, as long as they are not a major breaking change, to match our rendering to that of Bootstrap will be a complete and utter breaking change.

So to sum up, such integration as of the time being is quite impossible.

Regards,
Ivan Zhekov
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 13 Feb 2014, 06:06 PM

This is still in development. The Rad Windows works just fine when Desktop and Tablet resolution but when on a Mobile Resolution it opens the RadWindow on the center of the screen. Is there a way not to specify the Width and Height of the rad window I want it to adjust the parent screen width.

Here is the code. I am currently using Bootstrap 2.3.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Overlay="false" Skin="Default">
<Windows>
<telerik:RadWindow ID="PopupDialog" runat="server" Width="600px" Height="450px" Modal="true"
ReloadOnShow="true" ShowContentDuringLoad="false" Behaviors="Close" AutoSize="true" AutoSizeBehaviors=""
NavigateUrl="" VisibleStatusbar="false" VisibleTitlebar="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function ShowDialog(url) {
var url = document.getElementById("SidebarContent_Subscription_HiddenFieldURL").value;
window.radopen(url, 'PopupDialog');
}
</script>
</telerik:RadCodeBlock>
<div class="section">
<asp:Panel ID="SideBarPanelSubscription" CssClass="insert" runat="server" Visible="false"
BackColor="#FFFFFF" BorderStyle="Solid" BorderWidth="1px" BorderColor="#EEEEEE"
Width="100%">
<div class="sidebarHeader">
<h6> </h6>
</div>
<crm:WebLinks WebLinkSetName="Subscription Navigation" runat="server" ID="CoreMotivesSubscriptionNavigation">
<ItemTemplate>
<a href="#" onclick="ShowDialog('#'); return false;" class="navigation">Manage Subscription </a>
</ItemTemplate>
</crm:WebLinks>

</asp:Panel>

</div>
<asp:HiddenField ID="HiddenFieldURL" runat="server" />