Adding custom css class to different controls.

[Seven Spikes]

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

[Dimo]

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

 

 

[Seven Spikes]

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

Best Regards,
Alexander

[Graham]

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]

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

[Graham]

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]

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

[Graham]

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]

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]

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

[Robert]

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