This is a migrated thread and some comments may be shown as answers.

Border in Window Actions

7 Answers 108 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ahmad
Top achievements
Rank 1
Ahmad asked on 30 Dec 2012, 01:25 PM
how to all the buttons at the bottom of the window and drawing a border?

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 Jan 2013, 02:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ahmad
Top achievements
Rank 1
answered on 01 Jan 2013, 03:59 PM
I need a fotter in window!
fotter in bottom location in window.
plz help me.
0
Dimo
Telerik team
answered on 01 Jan 2013, 04:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ahmad
Top achievements
Rank 1
answered on 01 Jan 2013, 05:44 PM
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.
0
Dimo
Telerik team
answered on 02 Jan 2013, 09:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ahmad
Top achievements
Rank 1
answered on 05 Jan 2013, 12:25 PM
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.
0
Dimo
Telerik team
answered on 07 Jan 2013, 08:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Ahmad
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ahmad
Top achievements
Rank 1
Share this question
or