why combobox is disabled or not working by defualt?

12 posts, 0 answers
  1. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 29 Jul 2011 Link to this post

    hi,

    I have rad combo box: ((ddlGroups2)) not working fine in my telerik converted website, I can build my website normally but after I run it, I found the rad combo box is disabled, so nothing happened if I click the arrow to open the drop down menu !


    if I replace the rad combo box with normal asp.net drop down list, thin it works fine but with telerik its not working,

    here is a snapshot:

  2. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 30 Jul 2011 Link to this post

    I think I got the reason of the problem,

    I put radcombobox control inside specific jquery side banner, when I move it outside it works, I think the problem is because of z index,

    here is the banner: jquery mb.extruder

    and this is there source code which may conflict with telerik:

    /*******************************************************************************
     jquery.mb.components
     Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
     email: mbicocchi@open-lab.com
     site: http://pupunzi.com

     Licences: MIT, GPL
     http://www.opensource.org/licenses/mit-license.php
     http://www.gnu.org/licenses/gpl.html
     ******************************************************************************/

    /*
     * Name:jquery.mb.extruder
     * Version: 2.3
     * dependencies: jquery.metadata.js, jquery.mb.flipText.js, jquery.hoverintent.js
     */


    (function($) {
        document.extruder = new Object();
        document.extruder.left = 0;
        document.extruder.top = 0;
        document.extruder.bottom = 0;
        document.extruder.right = 0;
        document.extruder.idx = 0;
        var isIE = $.browser.msie;

        $.mbExtruder = {
            author: "Matteo Bicocchi",
            version: "2.3",
            defaults: {
                width: 350,
                positionFixed: true,
                sensibility: 800,
                position: "top",
                accordionPanels: true,
                top: "auto",
                extruderOpacity: 1,
                flapMargin: 35,
                textOrientation: "bt", // or "tb" (top-bottom or bottom-top)
                onExtOpen: function() { },
                onExtContentLoad: function() { },
                onExtClose: function() { },
                hidePanelsOnClose: true,
                closeOnExternalClick: true,
                autoCloseTime: 0,
                autoOpenTime: 0,
                slideTimer: 300
            },

            buildMbExtruder: function(options) {
                return this.each(function() {
                    this.options = {};
                    $.extend(this.options, $.mbExtruder.defaults);
                    $.extend(this.options, options);
                    this.idx = document.extruder.idx;
                    document.extruder.idx++;
                    var extruder, extruderContent, wrapper, extruderStyle, wrapperStyle, txt, closeTimer, openTimer;
                    extruder = $(this);
                    extruderContent = extruder.html();

                    extruder.css("zIndex", 100);

                    var isVertical = this.options.position == "left" || this.options.position == "right";

                    var extW = isVertical ? 1 : this.options.width;

                    var c = $("<div/>").addClass("content").css({ overflow: "hidden", width: extW });
                    c.append(extruderContent);
                    extruder.html(c);

                    var position = this.options.positionFixed ? "fixed" : "absolute";
                    extruder.addClass("extruder");
                    extruder.addClass(this.options.position);
                    var isHorizontal = this.options.position == "top" || this.options.position == "bottom";
                    extruderStyle =
                            this.options.position == "top" ?
                            { position: position, top: 0, left: "50%", marginLeft: -this.options.width / 2, width: this.options.width} :
                                    this.options.position == "bottom" ?
                                    { position: position, bottom: 0, left: "50%", marginLeft: -this.options.width / 2, width: this.options.width} :
                                            this.options.position == "left" ?
                                            { position: position, top: 0, left: 0, width: 1} :
                                            { position: position, top: 0, right: 0, width: 1 };
                    extruder.css(extruderStyle);
                    if (!isIE) extruder.css({ opacity: this.options.extruderOpacity });
                    extruder.wrapInner("<div class='ext_wrapper'></div>");
                    wrapper = extruder.find(".ext_wrapper");

                    wrapperStyle = { position: "absolute", width: isVertical ? 1 : this.options.width };
                    wrapper.css(wrapperStyle);
                    wrapper.height(wrapper.height() - 45);

                    if (isHorizontal) {
                        this.options.position == "top" ? document.extruder.top++ : document.extruder.bottom++;
                        if (document.extruder.top > 1 || document.extruder.bottom > 1) {
                            alert("more than 1 mb.extruder on top or bottom is not supported jet... hope soon!");
                            return;
                        }
                    }

                    if ($.metadata) {
                        $.metadata.setType("class");
                        if (extruder.metadata().title) extruder.attr("extTitle", extruder.metadata().title);
                        if (extruder.metadata().url) extruder.attr("extUrl", extruder.metadata().url);
                        if (extruder.metadata().data) extruder.attr("extData", extruder.metadata().data);
                    }
                    var flapFooter = $("<div class='footer'/>");
                    var flap = $("<div class='flap'><span class='flapLabel'/></div>");
                    if (document.extruder.bottom) {
                        wrapper.prepend(flapFooter);
                        wrapper.prepend(flap);
                    } else {
                        wrapper.append(flapFooter);
                        wrapper.append(flap);
                    }

                    txt = extruder.attr("extTitle") ? extruder.attr("extTitle") : "";
                    var flapLabel = extruder.find(".flapLabel");
                    flapLabel.text(txt);
                    if (isVertical) {
                        flapLabel.html(txt).css({ whiteSpace: "noWrap" }); //,height:this.options.flapDim
                        var orientation = this.options.textOrientation == "tb";
                        var labelH = extruder.find('.flapLabel').getFlipTextDim()[1];
                        extruder.find('.flapLabel').mbFlipText(orientation);
                    } else {
                        flapLabel.html(txt).css({ whiteSpace: "noWrap" });
                    }

                    if (extruder.attr("extUrl")) {
                        extruder.setMbExtruderContent({
                            url: extruder.attr("extUrl"),
                            data: extruder.attr("extData"),
                            callback: function() {
                                if (extruder.get(0).options.onExtContentLoad) extruder.get(0).options.onExtContentLoad();
                            }
                        })
                    } else {
                        var container = $("<div>").addClass("text").css({ width: extruder.get(0).options.width, height: extruder.height(), overflowX: "hidden", overflowY: "auto" });
                        c.wrapInner(container);
                        extruder.setExtruderVoicesAction();
                    }

                    flap.bind("click", function() {
                        if (!extruder.attr("isOpened")) {
                            extruder.openMbExtruder();
                        } else {
                            extruder.closeMbExtruder();
                            extruder.removeAttr("isOpened");
                        }
                    }).bind("mouseenter", function() {
                        if (extruder.get(0).options.autoOpenTime > 0) {
                            openTimer = setTimeout(function() {
                                extruder.openMbExtruder();
                                $(document).one("click.extruder" + extruder.get(0).idx, function() { extruder.closeMbExtruder(); });
                            }, extruder.get(0).options.autoOpenTime);
                        }
                    }).bind("mouseleave", function() {
                        clearTimeout(openTimer);
                    });

                    c.bind("mouseleave", function(e) {
                        if (extruder.get(0).options.closeOnExternalClick) {

                            //Chrome bug: FORMELEMENT fire mouseleave event.
                            if (!$(e.target).parents().is(".text"))
                                $(document).one("click.extruder" + extruder.get(0).idx, function() { extruder.closeMbExtruder(); });
                        }
                        closeTimer = setTimeout(function() {

                            if (extruder.get(0).options.autoCloseTime > 0) {
                                extruder.closeMbExtruder();
                            }
                        }, extruder.get(0).options.autoCloseTime);
                    }).bind("mouseenter", function() {
                        clearTimeout(closeTimer);
                        $(document).unbind("click.extruder" + extruder.get(0).idx);
                    });

                    if (isVertical) {
                        c.css({ height: "100%" });
                        if (this.options.top == "auto") {
                            flap.css({ top: 100 + (this.options.position == "left" ? document.extruder.left : document.extruder.right) });
                            this.options.position == "left" ? document.extruder.left += labelH + this.options.flapMargin : document.extruder.right += labelH + this.options.flapMargin;
                        } else {
                            flap.css({ top: this.options.top });
                        }
                        var clicDiv = $("<div/>").css({ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", background: "transparent" });
                        flap.append(clicDiv);
                    }
                });
            },

            setMbExtruderContent: function(options) {
                this.options = {
                    url: false,
                    data: "",
                    callback: function() { }
                };
                $.extend(this.options, options);
                if (!this.options.url || this.options.url.length == 0) {
                    alert("internal error: no URL to call");
                    return;
                }
                var url = this.options.url;
                var data = this.options.data;
                var where = $(this), voice;
                var cb = this.options.callback;
                var container = $("<div>").addClass("container");
                if (!($.browser.msie && $.browser.version <= 7))
                    container.css({ width: $(this).get(0).options.width });
                where.find(".content").wrapInner(container);
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    async: false,
                    dataType: "html",
                    success: function(html) {
                        where.find(".container").append(html);
                        voice = where.find(".voice");
                        voice.hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });
                        where.setExtruderVoicesAction();
                        if (cb) {
                            setTimeout(function() { cb(); }, 100);
                        }
                    }
                });
            },

            openMbExtruder: function(c) {
                var extruder = $(this);
                extruder.attr("isOpened", true);
                $(document).unbind("click.extruder" + extruder.get(0).idx);
                var opt = extruder.get(0).options;
                extruder.addClass("isOpened");
                if (!isIE) extruder.css("opacity", 1);
                var position = opt.position;
                extruder.mb_bringToFront();
                if (position == "top" || position == "bottom") {
                    extruder.find('.content').slideDown(opt.slideTimer);
                    if (opt.onExtOpen) opt.onExtOpen();
                } else {

                    if (!isIE) $(this).css("opacity", 1);
                    extruder.find('.ext_wrapper').css({ width: "" });
                    extruder.find('.content').css({ overflowX: "hidden", display: "block" });
                    extruder.find('.content').animate({ width: opt.width }, opt.slideTimer);
                    if (opt.onExtOpen) opt.onExtOpen();
                }
                if (c) {
                    setTimeout(function() {
                        $(document).one("click.extruder" + extruder.get(0).idx, function() { extruder.closeMbExtruder(); });
                    }, 100);
                }
            },

            closeMbExtruder: function() {
                var extruder = $(this);
                extruder.removeAttr("isOpened");
                var opt = extruder.get(0).options;
                extruder.removeClass("isOpened");
                $(document).unbind("click.extruder" + extruder.get(0).idx);
                if (!isIE) extruder.css("opacity", opt.extruderOpacity);
                if (opt.hidePanelsOnClose) extruder.hidePanelsOnClose();
                if (opt.position == "top" || opt.position == "bottom") {
                    extruder.find('.content').slideUp(opt.slideTimer);
                    if (opt.onExtClose) opt.onExtClose();
                } else if (opt.position == "left" || opt.position == "right") {
                    extruder.find('.content').css({ overflow: "hidden" });
                    extruder.find('.content').animate({ width: 1 }, opt.slideTimer, function() {
                        extruder.find('.ext_wrapper').css({ width: 1 });
                        extruder.find('.content').css({ overflow: "hidden", display: "none" });
                        if (opt.onExtClose) opt.onExtClose();
                    });
                }
            }
        };

        jQuery.fn.mb_bringToFront = function() {
            var zi = 10;
            $('*').each(function() {
                if ($(this).css("position") == "absolute" || $(this).css("position") == "fixed") {
                    var cur = parseInt($(this).css('zIndex'));
                    zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
                }
            });
            $(this).css('zIndex', zi += 1);
            //alert(zi);
            return zi;
        };

        /*
        * EXTRUDER CONTENT
        */

        $.fn.setExtruderVoicesAction = function() {
            var extruder = $(this);
            var opt = extruder.get(0).options;
            var voices = $(this).find(".voice");
            voices.each(function() {
                var voice = $(this);
                if ($.metadata) {
                    $.metadata.setType("class");
                    if (voice.metadata().panel) voice.attr("panel", voice.metadata().panel);
                    if (voice.metadata().data) voice.attr("data", voice.metadata().data);
                    if (voice.metadata().disabled) voice.attr("setDisabled", voice.metadata().disabled);
                }

                if (voice.attr("setDisabled"))
                    voice.disableExtruderVoice();

                if (voice.attr("panel") && voice.attr("panel") != "false") {
                    voice.append("<span class='settingsBtn'/>");
                    voice.find(".settingsBtn").css({ opacity: .5 });
                    voice.find(".settingsBtn").hover(
                            function() {
                                $(this).css({ opacity: 1 });
                            },
                            function() {
                                $(this).not(".sel").css({ opacity: .5 });
                            }).click(function() {
                                if ($(this).parents().hasClass("sel")) {
                                    if (opt.accordionPanels)
                                        extruder.hidePanelsOnClose();
                                    else
                                        $(this).closePanel();
                                    return;
                                }

                                if (opt.accordionPanels) {
                                    extruder.find(".optionsPanel").slideUp(400, function() { $(this).remove(); });
                                    voices.removeClass("sel");
                                    voices.find(".settingsBtn").removeClass("sel").css({ opacity: .5 });
                                }
                                var content = $("<div class='optionsPanel'></div>");
                                voice.after(content);
                                $.ajax({
                                    type: "POST",
                                    url: voice.attr("panel"),
                                    data: voice.attr("data"),
                                    async: false,
                                    dataType: "html",
                                    success: function(html) {
                                        var c = $(html);
                                        content.html(c);
                                        content.children().not(".text")
                                        .addClass("panelVoice")
                                        .click(function() {
                                            extruder.closeMbExtruder();
                                        });
                                        content.slideDown(400);
                                    }
                                });
                                voice.addClass("sel");
                                voice.find(".settingsBtn").addClass("sel").css({ opacity: 1 });
                            });
                }

                if (voice.find("a").length == 0 && voice.attr("panel")) {
                    voice.find(".label").not(".disabled").css("cursor", "pointer").click(function() {
                        voice.find(".settingsBtn").click();
                    });
                }

                if ((!voice.attr("panel") || voice.attr("panel") == "false") && (!voice.attr("setDisabled") || voice.attr("setDisabled") != "true")) {
                    voice.find(".label").click(function() {
                        extruder.hidePanelsOnClose();
                        extruder.closeMbExtruder();
                    });
                }
            });
        };

        $.fn.disableExtruderVoice = function() {
            var voice = $(this);
            var label = voice.find(".label");
            voice.removeClass("sel");
            voice.next(".optionsPanel").slideUp(400, function() { $(this).remove(); });
            voice.attr("setDisabled", true);
            label.css("opacity", .4);
            voice.hover(function() { $(this).removeClass("hover"); }, function() { $(this).removeClass("hover"); });
            label.addClass("disabled").css("cursor", "default");
            voice.find(".settingsBtn").hide();
            voice.bind("click", function(event) {
                event.stopPropagation();
                return false;
            });
        };

        $.fn.enableExtruderVoice = function() {
            var voice = $(this);
            voice.attr("setDisabled", false);
            voice.find(".label").css("opacity", 1);
            voice.find(".label").removeClass("disabled").css("cursor", "pointer");
            voice.unbind("click");
            voice.find(".settingsBtn").show();
        };

        $.fn.hidePanelsOnClose = function() {
            var voices = $(this).find(".voice");
            $(this).find(".optionsPanel").slideUp(400, function() { $(this).remove(); });
            voices.removeClass("sel");
            voices.find(".settingsBtn").removeClass("sel").css("opacity", .5);
        };

        $.fn.openPanel = function() {
            var voice = $(this).hasClass("voice") ? $(this) : $(this).find(".voice");
            voice.each(function() {
                if ($(this).hasClass("sel")) return;
                $(this).find(".settingsBtn").click();
            })
        };

        $.fn.closePanel = function() {
            var voice = $(this).hasClass("voice") ? $(this) : $(this).parent(".voice");
            voice.next(".optionsPanel").slideUp(400, function() { $(this).remove(); });
            voice.removeClass("sel");
            $(this).removeClass("sel").css("opacity", .5);
        };

        $.fn.buildMbExtruder = $.mbExtruder.buildMbExtruder;
        $.fn.setMbExtruderContent = $.mbExtruder.setMbExtruderContent;
        $.fn.closeMbExtruder = $.mbExtruder.closeMbExtruder;
        $.fn.openMbExtruder = $.mbExtruder.openMbExtruder;

    })(jQuery);

    I tried to change the z-index of radcombobox but that doesnt work
    any help please?
  3. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 01 Aug 2011 Link to this post

    Hello Khaled,

    Did you review the following help topic which discusses the default z-indexes of our controls:

    http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html

    Greetings,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  4. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 03 Aug 2011 Link to this post

    hi,
    I have tried the z-index but its not working at all,

    please download this project ( www.leamratech.com/test_rad_controls.rar ), which I had problem on it becuase I have used the zIndex but with no advantage


  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 04 Aug 2011 Link to this post

    Hello Khaled,

    Could you please try to set the z-index of RadComboBox like the following:

    <telerik:radcombobox
        id="RadComboBox1"
        runat="server"
        style="z-index:160016">
        <Items>  
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" />  
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" />  
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" />
        </Items>
    </telerik:radcombobox>

    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 04 Aug 2011 Link to this post

    I tried it but its not working

    can you please check the sample project that I have sent

    XXXXXXXXXXXXXXXXX

    please let me know how to solve this issue because I try too much and I waste a lot of time but it does not work

    regards,
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 05 Aug 2011 Link to this post

    Hi Khaled,

    I checked the sample project and the provided solution worked locally at least under IE9.
    What is the exact browser that you use?

    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 05 Aug 2011 Link to this post

    yes, its not working in any browser I tested it in ie9, ie8, chrome, ff, and opera moreover, I did test in other computers


    did u try the radcombobox control which has id="RadComboBox2" (( not the one of id="RadComboBox2"))?

    because there are two radcombobox, the problem occurred with the one of id="RadComboBox2" which is nested inside jquery slider element extruderRight

    try to open the list items in combobox ((which is nested with jquery right slider)), can you see the list?

    for me I cant open it, same as picture above it looks like as if the control is disabled !
  9. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 10 Aug 2011 Link to this post

    Hello Khaled,

    We tried the latest version of our controls - 2011.2.712.35 and everything worked at our side. Please find below a video as part of our local tests:
    http://screencast.com/t/xvttQAal

    As a side note - could you please remove your uploaded project, because it contains the dev version of our controls?
    I've edited your post from 04-Aug-2011 and removed the download link.

    Kind regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2011 Link to this post

    first of all, I'm sorry, really I forgot to delete the project file, but I have remove it now :)

    please check this video in hd resolution in youtube (because it did not work with me in ie, ff, chrome):

    http://www.youtube.com/watch?v=MFq1TMOUJRA

    please send me your project to my email, cuz mine is not working !!
  11. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 12 Aug 2011 Link to this post

    sorry, I forgot to show u a snapshot of rad components version in the video:

  12. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 16 Aug 2011 Link to this post

    Hi Khaled,

    Please find attached a project which works at least under IE(I've tested with IE9). It doesn't work perfect under other browsers. For example under Firefox I made it work after clearing the cache and page refresh.


    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top