MVC "Theme/Skin" Suggestion...

[EricB]

Greetings,

  For some reason I can't use the "PITS" system to submit this idea so I'm doing it here instead.  Since Telerik touts the fact that the MVC extensions are built on jQuery I believe there is one feature that would be useful: Most jQuery plug-ins, now-a-days, use the jQuery themeroller stuff to support theming or skinning... I would encourage you guys to consider giving developers the option of either using the native Telerik skins, or to utilize the themebuilder skin/theme.

This would accomplish two things:

  1) Standardizes the Telerik suite with the rest of the jQuery community.
  2) Makes it so that regardless of whether or not I am using the Telerik bits or some jQuery plugin that the UI has a consistent look and feel. 

As it stands now there is a disconnect between the two and I'd LOVE to see this taken care of.  Perhaps another property on the StyleRegistrar or something similar could work?  Obviously the controls would have to be adjusted to read one or the other, but I imagine this is a do-able request. :)

Thanks for your time!

Eric

[Atanas Korchev]

Hello EricB,

I am afraid we cannot do this at this point. Although the Telerik themes share the primitive-based approach of jQuery UI they are not compatible at all. The Telerik UI extensions render different CSS classes which are then used heavily in the JavaScript. Thus changing the CSS class names would break the JavaScript. There is a another thing to take into account - compatibility. The Telerik MVC themes are made so they look as closely as possible to the RadControls for ASP.NET Ajax skins. As you would agree such compatibility cannot be found with the jQuery UI themes. Finally we have built an excellent tool for skin customization - the Visual Style Builder which provides quite similar experience to the Theme Roller.

Regards,
Atanas Korchev
the Telerik team

[EricB]

Being that we are currently also using the Rad Ajax Controls, I get what you're trying to do by keeping the look consistent between the control sets, and honestly this is a good goal...

But when you build upon an existing, well established framework like jQuery you should probably do your best to adhere to how that framework works as well.  That is why I suggested giving the option to use either the Telerik skin or the jQuery UI theme.

You guys could then use the jQuery theme roller to build your Telerik skins and eventually migrate everything down that path rather than re-inventing the wheel. :)

Again, just a suggestion.

Thanks,
Eric

[Matthew]

I've gotta agree here. I'm using the telerik MVC right now and like the themes in general, but find the Telerik MVC Window implementation a bit cumbersome compared to jqueryUI dialog() (I open seperate urls in all of my dialogs), and wanted to make sure all of my themes match. Now I have to go try and roll a jquery UI theme that matches as well as possible, my telerik theme I am using.

[Alex Gyoshev]

Hello Matthew,

The other option is to let us know why you find the Window component cumbersome and let us address the issues. What do you mean by "open seperate urls in all of my dialogs"?

All the best,
Alex Gyoshev
the Telerik team

[Matthew]

I'm sorry, let me rephrase that better.

In the projects (some of which are rather large ERP style MVC apps) where I use ASP.NET MVC2 and Telerik MVC, my use of Popup windows is entirely based around loading external URLs.

I've created A partial view and a model to help me simplify the experience. I also use the jquery forms addons to do ajax form submittal.

I'll post my (admittedly basic) View and Model class, and a Telerik version I just put together.
My (basic) Partial view for a jquery ui dialog

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<ActionItemsMVC.Models.PopupWindow>" %>

<script language="javascript" type="text/javascript">


    var dialogID = '<%=Model.ID %>';
    var jqueryDialogSearch = '#' + dialogID;
    function Popup<%=Model.ID %>(url) {
    //loading dialog is expected to exist here
        $(jqueryDialogSearch).html($("#loading-dialog").html());
        $(jqueryDialogSearch).load(url + "?ms=" + new Date().getTime());

        $(jqueryDialogSearch).dialog('open');
    }


    function OnReady<%=Model.ID %>() {
    $(jqueryDialogSearch).dialog({
        autoOpen: false,
        height: 600,
        width: 750,
        modal: true,
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    });
    }
</script>
  <% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {%>
                            OnReady<%=Model.ID %>();
                            <%}
                            );%>



<div id="<%=Model.ID %>" title="<%=Model.Title %>"></div>

My Model For the Dialogs ( I could add url and etc in here but for now my usage is pretty basic/limited)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ActionItemsMVC.Models
{
    public class PopupWindow
    {
        public string ID {get;set;}
        public string Title { get; set; }
    }
}

I call them in my pages like this

<p>
 <a href="#" onclick="PopupCreate('<%= Url.Content("~/Home/Create") %>')" >Create New Action Item</a>
 </p>
 <%Html.RenderPartial("PopupWindow", new ActionItemsMVC.Models.PopupWindow { ID = "Create", Title= "Create New Action Item" }); %>
 <%Html.RenderPartial("LoadingDialog"); %>

I made a telerik version of the control that is compatible, but it would probably be a home run if it had integrated ajax forms support or client-side URL loading. As it stands, it functions pretty much identically with the jquery UI dialog version, and I think for most people, if some of the extra hurdles for ajax forms or client-side loading of URLs were built in, it would present a nice alternative. I generally try to avoid using something if there is an equivalent widely accepted alternative (where there is with jquery ui dialog). On the other hand, the grids and etc have  been a huge help and labor saver for me.



Finally, I made a Telerik Version of my popupwindow partial that I can drop in pages, and it works pretty well, although there seems to be no real advantage to using it other than keeping with the telerik themes. I suppose I could put the URL into my model, but many of my url's are generated from javascript on the client side (like when selecting a link from a grid to open a popup).

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<ActionItemsMVC.Models.PopupWindow>" %>

<script language="javascript" type="text/javascript">


    var dialogID = '<%=Model.ID %>';
    var divID = '<%= Model.ID %>contents';
    var jqueryDialogSearch = '#' + dialogID;
    var jqueryContentsSearch = '#' + dialogID + "contents";
    function Popup<%=Model.ID %>(url) {

    //loading dialog is expected to exist here
       $(jqueryContentsSearch).html($("#loading-dialog").html());
        $(jqueryContentsSearch).load(url + "?ms=" + new Date().getTime());
      //  $(jqueryDialogSearch).data('tWindow').refresh();
        $(jqueryDialogSearch).data('tWindow').open();
    }


    function OnReady<%=Model.ID %>() {

    }
</script>
<% Html.Telerik().Window().Name(Model.ID).Title(Model.Title).Draggable(true).Resizable(resizing => resizing.Enabled(true).MinHeight(600).MinWidth(750)).Modal(true).Buttons(b => b.Close())
       .Content("<div id=\""+Model.ID +"contents\"></div>").Width(750).Height(600).Visible(false).Render();
        %>
  <% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {%>
                            OnReady<%=Model.ID %>();
                            <%}
                            );%>

[Alex Gyoshev]

Hello Matthew,

I could not see any problem in the Telerik-based popup that you sent -- except from a bit of optimization that can be done:

<% Html.Telerik().Window()
        .Name(Model.ID)
        .Title(Model.Title)
        .Draggable(true)
        .Resizable(resizing => resizing
            .MinWidth(750)
            .MinHeight(600)
        )
        .ClientEvents(events => events
            .OnLoad("OnReady" + Model.ID)
        )
        .Modal(true)
        .Visible(false)
        .Width(750)
        .Height(600)
        .Render();
%>

<script language="javascript" type="text/javascript">

    function Popup<%=Model.ID %>(url) {
        // loading dialog is expected to exist here
        $('#<%=Model.ID %>')
            .find('.t-window-content')
                .html($("#loading-dialog").html())
                .load(url + "?ms=" + new Date().getTime())
            .end()
            .data('tWindow').open();
    }

    function OnReady<%=Model.ID %>() {
        Popup<%=Model.ID %>('<%= Url.Action("About", "Home") %>');
    }
</script>

Apart from the Telerik styles, the benefit from using it is that you won't have to include the whole jQuery UI codebase - which will lead to smaller pages and better performance.

I'm attaching the project I used for testing.

Regards,
Alex Gyoshev
the Telerik team

[EricB]

"Apart from the Telerik styles, the benefit from using it is that you won't have to include the whole jQuery UI codebase - which will lead to smaller pages and better performance."

Alex,

  Don't you think that is doing some assuming?  You're assuming people are using ONLY the Telerik extensions.  So to turn the tables on your argument, if you guys used the jQuery skins/themes, it would technically make the pages perform better as we wouldn't be required to link in Telerik skins. :P

Thanks,
Eric

[Alex Gyoshev]

Hello Eric,

We did research the option of basing our skins on jQuery UI before starting to work on the components. We didn't want to be stuck with their styling decisions, thus we made our own themes and skinning model. We'll do our best to provide a better editing experience in the future, and you can always submit feature requests for widgets that you think are missing from the suite.

Greetings,
Alex Gyoshev
the Telerik team

[Matthew]

Thanks for the feedback, admittedly now that Im using both in the same contact theyre pretty similar.

I think if there was some way to easilly fit in jquery forms to the telerik control, it would offer a huge advantage over basic jquery ui dialogs.

-Matt

[George]

Hi, I am wondering if there is a way that I can have different theme/skin for different MVC telerik controls rendered on the same page.  For example I want to have the following setup:

1) a main navigation header that uses Menu control with the "webblue" theme
AND
2) on the same page use a PanelBar control with the "outlook" theme

Thanks in advance for your guidance.

PS.  Thanks for the great controls.

[Victor]

Interesting thread! I have also thought about the lack of compatibility with the ThemeRoller.

About the reply from you (Telerik) that the main reason is to not break the scripts I would think that the easy solution would be to add a global bool which when set renders the jQuery UI css classes AS WELL AS those needed for the scripts. Preferably that bool would also turn off the telerik css.

Just a thought

/Victor

[Atanas Korchev]

Hello,

We did research the option of basing our skins on jQuery UI before starting to work on the components. However we decided not to do so for various reasons:

1. The existing jQuery UI themes didn't visually match the skins of RadControls for ASP.NET Ajax. Visual compatibility with RadControls for ASP.NET Ajax was one of our goals. 
2. Lots of the CSS classes in jQuery UI are behavior related - drag and drop etc. Since we decided not to use the jQuery UI JavaScript we didn't need those.
3. The existing jQuery UI primitives didn't meet all our needs. We would have needed even more CSS primitives. This meant that the existing jQuery UI themes alone were not enough - more CSS was needed to cover all our requirements.
4. We had already decided not to use the jQuery UI JavaScript for various reasons.

In a word it seemed that jQuery UI CSS didn't meet our requirements. Thus the decision to implement Telerik specific skins and use our own Style Builder was made. 

Supporting jQuery UI skins does not seem viable at this point. It would require quite a lot of changes in our code not to mention testing and documentation. We have invested lots of effort and time in implementing the MVC skins and integrating them with the Visual Style Builder. This is why we don't have plans to add support for jQuery UI themes. We prefer to add new features, new components and extend our Visual Style Builder instead.

I hope this helps,

Atanas Korchev
the Telerik team

[Victor]

Thanks for that detailed answer. And while it would be nice to quickly get a consistant look with jQuery UI components I can certainly understand your decisions. What jQuery UI has in ease of use (for client-side code only of course) Telerik components certainly makes up in versatility.

The only thing I find seriously lacking with Telerik components today is the accessability, notably with the tabstrip component and the combobox component. For me the only way to build a site today is accessible with javascript and ajax to enhance the functionality. And - even though there are a few accessible demos (although the dropdown variant of the combobox just wont without javascript, right? really should default to a normal dropdown!) the majority of all demos are seriously lacking. Just surfing your demos without enabling javascript and clicking on one of the tabs (View/Controller/Site.Master) is one example of that.

However, and this should be noted, the support for accessible design with the Grid component is great - very easy to specify both server-side and client-side bindings for normal CRUD operations. All components should work like this! (The only thing here is that custom commands and custom column templates are a bit hard to implement both ways)


All in all though, a great set of components, especially if enhanced a bit accessability-wise!


/Victor