Adding custom css class to different controls.

1 Answer 3347 Views
General Discussions
Seven Spikes
Top achievements
Rank 1
Seven Spikes asked on 05 Feb 2013, 09:33 AM
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

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Feb 2013, 07:02 AM
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!
 
Seven Spikes
Top achievements
Rank 1
commented on 07 Feb 2013, 11:31 AM

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

Best Regards,
Alexander
Graham
Top achievements
Rank 2
Iron
Iron
commented on 06 Dec 2016, 02:15 PM

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?

Dimo
Telerik team
commented on 06 Dec 2016, 03:13 PM

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
Graham
Top achievements
Rank 2
Iron
Iron
commented on 06 Dec 2016, 04:38 PM

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();

Dimo
Telerik team
commented on 08 Dec 2016, 07:52 AM

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
Graham
Top achievements
Rank 2
Iron
Iron
commented on 09 Dec 2016, 09:49 AM

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");

 

Robert
Top achievements
Rank 1
commented on 06 Mar 2017, 10:14 PM

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?

Dimo
Telerik team
commented on 07 Mar 2017, 11:51 AM

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
Robert
Top achievements
Rank 1
commented on 07 Mar 2017, 06:57 PM

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

Tags
General Discussions
Asked by
Seven Spikes
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or