CODEWITHSUNDEEP
kendo-ui
john
john

Reputation: 77

kendo UI window z-index

how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.

@(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")

.Modal(false)

.Content(@<text>
    <div class="armchair">
        <img src="@Url.Content("~/content/web/window/armchair-402.png")"
                alt="Artek Alvar Aalto - Armchair 402" />
        Artek Alvar Aalto - Armchair 402
    </div>

    <p>
        Alvar Aalto is one of the greatest names in modern architecture and design.
        Glassblowers at the iittala factory still meticulously handcraft the legendary
        vases that are variations on one theme, fluid organic shapes that let the end user
        ecide the use. Interpretations of the shape in new colors and materials add to the
        growing Alvar Aalto Collection that remains true to his original design.
    </p>       
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())

)

Upvotes: 2

Views: 7156

Answers (3)

Leblanc Meneses
Leblanc Meneses

Reputation: 3091

the z-index is set on the "style" property dynamically of the div.

with css all you need is an !important rule that will override styles defined on the element.

  #mycontainer .k-window{
        z-index: 3 !important;
  }

Upvotes: 1

OnaBai
OnaBai

Reputation: 40917

Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.

You just need to use the following HTML: 

<div class="k-block"><div class="k-header">Header</div>Block with header</div>

Upvotes: 1

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.

So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.

Upvotes: 1

Related Questions