Border in Window Actions

[Ahmad]

how to all the buttons at the bottom of the window and drawing a border?

[Dimo]

Hello Ahmad,

Moving the Window titlebar buttons to the bottom is not trivial, but you can easily create your own custom buttons, style them according to your preferences and use the Window API in their click handlers:

http://demos.kendoui.com/web/window/api.html

You can hide the titlebar buttons like this:

.k-window  .k-window-actions
{
      visibility: hidden ;
}

The above will hide the titlebar buttons of all Window instances. If you need the discussed customization for only one instance, you will need a custom CSS class applied to the Window wrapper with Javascript (e.g. in the widget's open event). Then use it instead of the k-window class.

Regards,
Dimo
the Telerik team

[Ahmad]

I need a fotter in window!
fotter in bottom location in window.
plz help me.

[Dimo]

Hello Ahmad,

The Window does not provide a footer currently, but you can easily add one manually as part of the Window content.

Regards,
Dimo
the Telerik team

[Ahmad]

my master form:

@{

    ViewBag.Title = "Person";

}

  

@(Html.Kendo().Grid<KendoMVCWrappers.Models.PersonViewModel>().Name("persons")

    .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model=>model.Id(m=>m.PersonID))

        .Read(read => read.Action("GetPersons", "Person"))

        .Create(up => up.Action("CreatePerson", "Person"))

        .Update(up => up.Action("UpdatePerson", "Person"))

        .Destroy(del => del.Action("DeletePerson", "Person"))

              

    )

    .ToolBar(cmd => cmd.Create().Text("Add"))          

    .Columns(columns =>

    {

        columns.Bound(c => c.FName).Width(100);

        columns.Bound(c => c.LName).Width(200);

        columns.Command(cmd =>

        {

            cmd.Edit().UpdateText("Save").CancelText("Cancel").Text("Detail");

            cmd.Destroy().Text("Del");

        });

          

          

    })

         

    .Pageable()

    .Selectable(sel => sel.Mode(GridSelectionMode.Single))

    .Filterable()

    .Sortable()

    .Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("PersonDetail").Window(w => w.Title("Detail")))     

)

and window:

@model KendoMVCWrappers.Models.PersonViewModel

  

    <div class="k-content">

        <div id="detail">

            <ul>

                <li>

                    <label for="fname" class="required">First Name</label>

                    <input type="text" id="fname" name="fname" class="k-textbox" data-bind="value: FName" />

                </li>

                <li>

                    <label for="lname">Last Name</label>

                    <input id="lname" name="lname" type="number" class="k-textbox" data-bind="value: LName"/>

                </li>

                <li style="height:250px">

                </li>

            </ul>

        </div>

</div>

please you write in my code. you create fotter border.
i can not create a border out of "Save" and "Cancel" button in Window form.

[Dimo]

Hello Ahmad,

Designing a footer area with a border and two buttons inside requires general HTML/CSS knowledge. How would you do that if the Kendo UI Window was not involved? You can try implementing the desired appearance outside the Window widget (on a standalone HTML page) and if you have problems integrating the resulting HTML markup inside the Window content area afterwards, I will help you with that.

Providing assistance with custom styling and coding, which is not directly related to our widgets, is in the scope of our premium support services:

http://www.telerik.com/services/overview.aspx

Let me know if you have additional questions with regard to using the Kendo UI widgets.

Greetings,
Dimo
the Telerik team

[Ahmad]

I do not have access to the bottom of the window form.
I have knowledge of CSS/HTML, But I do not have access
You please help me.

[Dimo]

Hi Ahmad,

The Kendo UI Window does not have a bottom part (status bar), so I am not sure which bottom you are referring to. The widget only has a bottom border, which is applied by the following CSS rule and can be overridden if needed:

div.k-window
{
       border-width: 1px;
}

So you need to create that bottom part manually.

What you can do is implement the desired look inside a regular <div> element (without any Javascript behaviors) and then if you need assistance in integrating it to the Window, I will show you how to do it.

All the best,
Dimo
the Telerik team