or
$(document).ready(function () { var window = $("#window").data("kendoWindow"); $("#open").click(function (e) { window.center(); window.open(); }); $("#close").click(function (e) { window.close(); }); });
public
class
ClientModel
{
private
readonly
Guid _id;
public
string
Id
{
get
{
return
_id.ToString(); }
}
[Required(ErrorMessage =
"Please enter a Name for this client."
)]
[Display(Name =
"Name"
)]
public
string
Name {
get
;
set
; }
[Display(Name =
"Address"
)]
public
string
AddressLine1 {
get
;
set
; }
public
string
AddressLine2 {
get
;
set
; }
public
string
AddressLine3 {
get
;
set
; }
[Display(Name =
"Email Address"
)]
public
string
EmailAddress {
get
;
set
; }
[Display(Name =
"Home Phone"
)]
public
string
HomePhone {
get
;
set
; }
[Display(Name =
"Cellular Phone"
)]
public
string
CellularPhone {
get
;
set
; }
[Display(Name =
"Work Phone"
)]
public
string
WorkPhone {
get
;
set
; }
}
@using Models
@section Styles {
<
link
href
=
"@Url.Content("
~/Content/Client.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
}
<
div
class
=
"k-toolbar k-grid-toolbar"
>
<
a
class
=
"k-button k-button-icontext k-add-button"
href
=
"#"
><
span
class
=
"k-icon k-add"
></
span
>Add Client</
a
>
</
div
>
<
script
type
=
"text/x-kendo-tmpl"
id
=
"client-view-template"
>
<
div
class
=
"client"
>
<
h3
>${Name}</
h3
>
<
div
class
=
"client-details"
>
<
dl
>
<
dt
>${AddressLine1}</
dt
>
<
dt
>${AddressLine2}</
dt
>
<
dt
>${AddressLine3}</
dt
>
</
dl
>
<
h4
>Phone</
h4
>
<
dl
>
<
dt
>(H) ${HomePhone}</
dt
>
<
dt
>(M) ${CellularPhone}</
dt
>
<
dt
>(W) ${WorkPhone}</
dt
>
</
dl
>
<
dl
>
<
dt
>${EmailAddress}</
dt
>
</
dl
>
<
div
class
=
"edit-buttons"
>
<
a
class
=
"k-button k-button-icontext k-edit-button"
href
=
"\\#"
><
span
class
=
"k-icon k-edit"
></
span
>Edit</
a
>
<
a
class
=
"k-button k-button-icontext k-delete-button"
href
=
"\\#"
><
span
class
=
"k-icon k-delete"
></
span
>Delete</
a
>
</
div
>
</
div
>
</
div
>
</
script
>
@(Html
.Kendo()
.ListView<
ClientModel
>()
.Name("ClientList")
.TagName("div")
.ClientTemplateId("client-view-template")
.DataSource(dataSource => dataSource
.Model(model =>
{
model.Id("Id");
model.Field<
string
>("Id").DefaultValue(Guid.Empty).Editable(false);
model.Field<
string
>("Name").DefaultValue(string.Empty);
model.Field<
string
>("Address1").DefaultValue(string.Empty);
model.Field<
string
>("Address2").DefaultValue(string.Empty);
model.Field<
string
>("Address3").DefaultValue(string.Empty);
model.Field<
string
>("HomePhone").DefaultValue(string.Empty);
model.Field<
string
>("CellularPhone").DefaultValue(string.Empty);
model.Field<
string
>("WorkPhone").DefaultValue(string.Empty);
model.Field<
string
>("EmailAddress").DefaultValue(string.Empty);
})
.Read(read => read.Action("ClientRead", "Clients"))
.Create(create => create.Action("ClientCreate", "Clients"))
.Update(update => update.Action("ClientUpdate", "Clients"))
.Destroy(destroy => destroy.Action("ClientDestroy", "Clients"))
)
.Editable(editable => editable.TemplateName("ClientModelEdit"))
)
<
script
>
$(function() {
var listView = $("#ClientList").data("kendoListView");
$(".k-add-button").click(function(e) {
listView.add();
e.preventDefault();
});
});
</
script
>
@using Models
@model ClientModel
@{ Html.EnablePartialViewValidation(); }
<
div
class
=
"client-edit"
>
@Html.ValidationSummary(true);
@Html.HiddenFor(model => model.Id)
<
dl
>
<
dt
>@Html.LabelFor(p => p.Name)</
dt
>
<
dd
>
@Html.EditorFor(p => p.Name)
</
dd
>
<
dt
>
@Html.LabelFor(p => p.AddressLine1)
</
dt
>
<
dd
>
@Html.EditorFor(p => p.AddressLine1)
</
dd
>
<
dt
>
</
dt
>
<
dd
>
@Html.EditorFor(p => p.AddressLine2)
</
dd
>
<
dt
>
</
dt
>
<
dd
>
@Html.EditorFor(p => p.AddressLine3)
</
dd
>
<
dt
>
@Html.LabelFor(p => p.HomePhone)
</
dt
>
<
dd
>
@Html.EditorFor(p => p.HomePhone)
</
dd
>
<
dt
>
@Html.LabelFor(p => p.CellularPhone)
</
dt
>
<
dd
>
@Html.EditorFor(p => p.CellularPhone)
</
dd
>
<
dt
>
@Html.LabelFor(p => p.WorkPhone)
</
dt
>
<
dd
>
@Html.EditorFor(p => p.WorkPhone)
</
dd
>
<
dt
>
@Html.LabelFor(p => p.EmailAddress)
</
dt
>
<
dd
>
@Html.TextBoxFor(p => p.EmailAddress)
</
dd
>
</
dl
>
<
div
class
=
"edit-buttons"
>
<
a
class
=
"k-button k-button-icontext k-update-button"
href
=
"\\#"
><
span
class
=
"k-icon k-update"
></
span
>Save</
a
>
<
a
class
=
"k-button k-button-icontext k-cancel-button"
href
=
"\\#"
><
span
class
=
"k-icon k-cancel"
></
span
>Cancel</
a
>
</
div
>
</
div
>
I have a server bound grid that is working well until I add a second command button to a row. When I do this the formatting is thrown off and a second grid is placed at the bottom of the first. Does anyone recognize the problem?
@(Html.Kendo().Grid<
TimeAndAttendance.Models.DaysActivityViewModel
>(Model.DayActivities)
.Name("DaysActivities")
.Columns(columns =>
{
columns.Bound(da => da.Facility);
columns.Bound(da => da.Position);
columns.Bound(da => da.Shift);
columns.Bound(da => da.Paycode);
columns.Bound(da => da.Hours);
columns.Bound(da => da.Notes);
columns.Command(command => { command.Edit().Text(""); });
})
.Scrollable()
.HtmlAttributes(new { style = "height:200px;" })
.DataSource(dataSource => dataSource
.Server()
.Update(update => update.Action("Edit", "IndividualTimeEntry"))
.Destroy(destroy => destroy.Action("Delete", "IndividualTimeEntry"))
.Model(model => model.Id(da => da.ID))
)
)
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Width(60);
columns.Bound(p => p.Title).Width(250);
})
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Get", "Grid", new {view = "MyActive", showAll = false}))
)
)
columns.Bound(c => c.IsRead).ClientTemplate(
""
+
"#if(IsRead== true) {#"
+
"Read"
+
"#} else{#"
+
"Not Read +
"#}#"
)
.Title(
"State"
).Width(120);
columns.Bound(c => c.IsRead).ClientTemplate(
""
+
"#if(IsRead== true) {#"
+
"#=data.Id#"
+
// Shows parent Id
"#} else{#"
+
"\\#=data.Id\\# +
// Shows the correct id from the detail row
"#}#"
)
.Title(
"State"
).Width(120);
<
script
>
function submit() { $("#searchForm").submit() }
</
script
>
@(Html.Kendo().DropDownListFor(m => m.ListID).DataValueField("ID").DataTextField("Name")
.BindTo(Model.Lists).Events(e => e.Change("submit")))
@Html.Kendo().AutoCompleteFor(m => m.SearchText).Placeholder("Search")
<
input
type
=
"submit"
value
=
"Search"
/>
@Html.Kendo().Grid(Model.Albums).Name("AlbumsGrid").BindTo(Model.Albums).Pageable().Sortable()
}