0
Ich habe eine einfache Seite mit einigen Steuerelemente wie Textfeld, Dropdown-Liste und ein Gitter, das der Code:KendoUI MVC Wie man Kontrollen reagiert,
<div id="order">
<p>Create Order</p>
<ul id="fieldlist">
<li>
<label for="client">Client:</label>
@(Html.Kendo().TextBox()
.Name("client")
.Enable(false)
.Value(@Model.ClientId.ToString() + " - " + @Model.Client)
.HtmlAttributes(new { style = "width: 100%" })
)
</li>
<li>
<label for="date">Date:</label>
@(Html.Kendo().TextBox()
.Name("date")
.Value(@DateTime.Now.ToShortDateString())
.HtmlAttributes(new { style = "width: 100%" })
)
</li>
<li>
<label for="address">Address:</label>
@(Html.Kendo().DropDownList()
.Name("address")
.DataTextField("Name")
.DataValueField("AddressId")
.BindTo(@Model.Addresses)
.Value(@Model.MainAddress.ToString())
.HtmlAttributes(new { style = "width: 100%" })
)
</li>
<li>
<label for="items">Items:</label>
@(Html.Kendo().Grid(Model.Detail)
.Name("items")
.Columns(columns =>
{
columns.Bound(a => a.ItemId);
columns.Bound(a => a.Name).Width(200);
columns.Bound(a => a.Price).HtmlAttributes(new { style = "text-align:right" }).Width(100);
columns.Bound(a => a.Quantity).HtmlAttributes(new { style = "text-align:right" }).Width(100);
})
.ToolBar(toolBar =>
{
toolBar.Save().SaveText("Send Order");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Scrollable()
.Pageable(pageable => pageable
.ButtonCount(5)
)
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(datasource => datasource
.Ajax()
.Batch(true)
.PageSize(30)
.ServerOperation(false)
.Model(model =>
{
model.Id(a => a.ItemId);
model.Field(a => a.Name).Editable(false);
model.Field(a => a.Price).Editable(false);
model.Field(a => a.Quantity);
})
.Update(update => update.Action("SendOrder", "Orders"))
))
</li>
</ul>
Ich würde gerne wissen, Wie kann ich diese Seite auf verschiedenen Bildschirmen oder Geräten ansprechen? Ich habe mir die telerik demos page auf meinem Handy angesehen und die Seiten und Steuerelemente passt sich an die Größe des Bildschirms an.
Ich habe das Projekt mit der Vorlage Telerik C# MVC Web Application erstellt, also habe ich alle Skripte und alles, ich weiß nur nicht, welche Klassen oder Stile sollte ich anwenden, um dieses Verhalten zu haben.