Adding custom css class to different controls.

11 posts, 0 answers
  1. Seven Spikes
    Seven Spikes avatar
    6 posts
    Member since:
    Oct 2009

    Posted 05 Feb 2013 Link to this post

    Hello,

    We have two plug-ins(Window) on the same page which use the <div class="k-widget k-window"> as a main container.
    Each of the two plug-ins use the same Kendo classes for most of their elements, and currently
    there's no way to style the elements individualy for each plug-in. Obviously we should add
    a specific class to the <div class="k-widget k-window">, so that we could specify each element.
    Could you give us a solution to this problem ?
    Thank you.

    Kind Regards,
    Aleksandar Ivanov
    Nop-Templates.com
  2. Dimo
    Admin
    Dimo avatar
    8369 posts

    Posted 07 Feb 2013 Link to this post

    Hello Aleksandar,

    Depending on your specific needs, you can do any of the following:

    1. Add a custom class to the element from which the Window is created. This is the element, which wraps all Window custom content (div.k-window-content), so if your idea is to customize the content, this will do and is easier.

    or

    2. Add a custom class to the Window outermost element (div.k-window), which is created on the fly. This is the way to go if you want to customize the appearance of the Window itself. Since the element does not exist initially, you need to use Javascript to add the class in the widget's open event, or alternatively, simply execute the script after Window initialization.


    // initialize the Window (if using Kendo UI server wrappers, this will happen automatically)
     
    $("#myWindow").kendoWindow({
      // settings here
    });
     
    // add a custom CSS class after initialization
      
    var winObject = $("#myWindow").data("kendoWindow");
    winObject.wrapper.addClass("myCustomClass");
      
    // add a custom CSS class in the open event handler
      
    function onWindowOpen(e) {
        e.sender.wrapper.addClass("myCustomClass");
    }


    All the best,
    Dimo
    the Telerik team
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Seven Spikes
    Seven Spikes avatar
    6 posts
    Member since:
    Oct 2009

    Posted 07 Feb 2013 Link to this post

    Thanks for the prompt reply! All worked just as it should!

    Best Regards,
    Alexander
  4. Graham
    Graham avatar
    22 posts
    Member since:
    Jul 2012

    Posted 06 Dec 2016 in reply to Dimo Link to this post

    What if the class is one that is widely used by Kendo - in this case, the font for a Kendo drop down list?

     

    .k-popup .k-item {
         font: 20px/1.8em bold Arial, Helvetica, sans-serif;
    }

     

    I only want this drop down list font on the modal window, please - not anywhere else on the page.

     

    Here's what I've tried:

     

       .gatehousedepots.k-popup .k-item {
         font: 20px/1.8em bold Arial, Helvetica, sans-serif;
       }

     

    ... and ...

     

        function openGatehouseExtraVehicle() {
            $('#GatehouseNewVehicle').data('kendoWindow').center().open();
            var winObject = $('#GatehouseNewVehicle').data('kendoWindow');
            winObject.wrapper.addClass("gatehousedepots");
        }

     

    ...but it doesn't work. Any suggestions, please?

  5. Dimo
    Admin
    Dimo avatar
    8369 posts

    Posted 06 Dec 2016 Link to this post

    Hi Graham,

    The Kendo UI DropDownList uses a detached popup element, which is not inside the Kendo UI Window.

    For this CSS rule to work...

       .gatehousedepots.k-popup .k-item {
         font: 20px/1.8em bold Arial, Helvetica, sans-serif;
       }

    ... you need to apply the gatehousedepots class to the list element reference of the DropDownList.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#fields-list

    Use the open event of the DropDownList:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-open


    .foo.k-popup .k-item {
      font-size: 24px;
    }
    $("#ddl1").kendoDropDownList({
      open: function(e) {
        e.sender.list.addClass("foo");
      }
    });


    Regards,
    Dimo
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Graham
    Graham avatar
    22 posts
    Member since:
    Jul 2012

    Posted 06 Dec 2016 in reply to Dimo Link to this post

    Thanks for this Dimo, but unfortunately it's still not working for me. Here's my drop down list:

     

                        @(Html.Kendo().DropDownList()
                                    .Name("LoadTipTypeDropDown")
                                    .BindTo(Model.LoadTipType)
                                    .OptionLabel("Select...")
                        )

     

    As soon as I run the function...

     

            $("#LoadTipTypeDropDown").kendoDropDownList({
                open: function(e) {
                    e.sender.list.addClass("gatehousedropfont");
                }
            });

     

    The list goes blank. Indeed, the list goes blank even if I run:

    var theList = $("#LoadTipTypeDropDown").kendoDropDownList();

  7. Dimo
    Admin
    Dimo avatar
    8369 posts

    Posted 08 Dec 2016 Link to this post

    Hi Graham,

    The problem is caused by duplicate widget initialization. I was not aware that you are using the MVC wrapper of the DropDownList. In this case, you need to attach the open event handler in the server-side declaration, instead of recreating the widget instance on the client (which removes all data-binding-related settings, hence the empty dropdown).

    More on duplicate initialization is discussed at:

    http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

    Regards,
    Dimo
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Graham
    Graham avatar
    22 posts
    Member since:
    Jul 2012

    Posted 09 Dec 2016 in reply to Dimo Link to this post

    Thanks Dimo - you were right: instead of:

     

    var theList = $("#LoadTipTypeDropDown").kendoDropDownList();

     

    What I actually needed was:

     

    var theList = $("#LoadTipTypeDropDown").data("kendoDropDownList");

     

    What worked for me in the end was the following style:

     

    <style>
        .fs20 { font-size: 20px; }
        .k-popup.fs20 { font-size: 20px !important; }
    </style>

     

    ...and the following JavaScript statements:

     

    var dropdown = $("#LoadTipTypeDropDown").data("kendoDropDownList");   
    dropdown.popup.element.addClass("fs20");

     

  9. Robert
    Robert avatar
    2 posts
    Member since:
    Mar 2017

    Posted 06 Mar in reply to Dimo Link to this post

    This is several years old, so I am not sure how relevant this post still is.

    I am trying to use this method and add a class to the wrapper but when I try, it messes up the content in the window.

    Just calling the .kendoWindow.data("kendoWindow") makes the content load as if it was received with ajax instead of inside an iframe. 

    If i remove that line of code, the page loads fine, but as soon as I try to add a class to the window it refuses to work correctly. any idea why that might happen?

  10. Dimo
    Admin
    Dimo avatar
    8369 posts

    Posted 07 Mar Link to this post

    Hi Robert,

    I assume that my initial response was a little misleading, because it demonstrated creating the Window and gettings its object reference at the same time. If simply copy-pasted, this code may cause duplicate Window initialization.

    The new snippet is:

    var winObject = $("#myWindow").data("kendoWindow");
    winObject.wrapper.addClass("myCustomClass");


    Please check the updated version of the code snippets and let me know if you still need assistance. In the latter case, please provide a runnable test page for inspection.

    Regards,
    Dimo
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Robert
    Robert avatar
    2 posts
    Member since:
    Mar 2017

    Posted 07 Mar in reply to Dimo Link to this post

    Thank You Dimo,

    The only part of the code I used before was that snippet and the issue still occurs for some reason.

    I just used a jquery function to add a class to the k-window class and that is working just fine so there's no worries.

    Thanks,
    Robert

Back to Top