Hopefully this will show you what I am trying to do.
Index.cshtml
@(Html.Kendo().Grid<
Project.ViewModels.ConfigurationSetting
>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(a => a.Name);
columns.Bound(a => a.ServiceName).Title("Service<
br
/>Name");
columns.Bound(a => a.TestMode).Title("Is in<
br
/>Test Mode?");
columns.Bound(a => a.JobSourceItem).Title("Job Source").ClientTemplate("#=JobSourceItem.JobSourceName#").Width(200);
columns.Bound(a => a.DatabaseLiveConnection).Title("Live Database<
br
/>Connection");
columns.Bound(a => a.DatabaseTestConnection).Title("Test Database<
br
/>Connection");
columns.Bound(a => a.Timer).Title("Timer Settings (ms)");
columns.Command(command => command.Edit());
})
.Editable(edit =>
edit.Mode(GridEditMode.PopUp)
.Window(window =>
window.Animation(true)
.Scrollable(true)
.Resizable(resize => resize.Enabled(true))
.Width(650)
.Height(600)
)
.TemplateName("ConfigurationSettingEditor")
)
.Pageable()
.Pageable(c => c.PageSizes(new int[] { 10, 20, 50, 100 }))
.Sortable()
.HtmlAttributes(new { style = "height:600px;" })
.Events(events => events.DataBound("onDataBound"))
.Scrollable()
.Resizable(c => c.Columns(true))
.ClientDetailTemplateId("template")
.Events(e => e.Edit("onEdit"))
.ToolBar(toolBar =>
{
toolBar.Create();
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ConfigurationSetting_Read", "Home"))
.Update(update => update.Action("ConfigurationSetting_Update", "Home"))
.Create(create => create.Action("ConfigurationSetting_Create", "Home"))
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(a => a.ConfigurationSettingID);
model.Field(a => a.JobSourceItem).DefaultValue(new Project.ViewModels.JobSourceSetting());
})
)
)
<
script
id
=
"template"
type
=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<
Project.ViewModels.ConfigurationSettingItem
>()
.Name("Grid_#=ConfigurationSettingID#")
.Columns(columns =>
{
columns.Bound(b => b.KeyName);
columns.Bound(b => b.KeyValue).HtmlAttributes(new { style = "overflow: hidden;text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");
columns.Bound(b => b.SqlDBType);
columns.Bound(b => b.Enabled);
columns.Command(command =>
{
command.Edit();
});
}
)
.Sortable()
.Pageable(c => c.PageSizes(new int[] { 10, 20, 50, 100 }))
.Scrollable()
.ToolBar(toolBar =>
{
toolBar.Create();
}
)
.Editable(edit =>
{
edit.Mode(GridEditMode.InLine);
edit.Enabled(true);
}
)
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(datasource => datasource
.Ajax()
.PageSize(10)
.ServerOperation(true)
.Read(read => read.Action("ConfigurationItem_Read", "Home", new { configurationSettingID = "#=ConfigurationSettingID#" }))
.Update(update => update.Action("ConfigurationItem_Update", "Home"))
.Create(create => create.Action("ConfigurationItem_Create", "Home", new { configurationSettingID = "#=ConfigurationSettingID#" }))
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(q => q.ID);
model.Field(q => q.KeyValue).Editable(true);
model.Field(q => q.Enabled).DefaultValue(true);
})
)
.ToClientTemplate()
)
</
script
>
<
script
type
=
"text/javascript"
>
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function onEdit(e) {
//attach validator to the PopUp window
$("[data-role=window]").kendoValidator();
}
function onDataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function resizeGrid() {
var gridElement = $("#Grid");
var dataArea = gridElement.find(".k-grid-content");
var newGridHeight = $(document).height() - 200;
var newDataAreaHeight = newGridHeight - 85;
dataArea.height(newDataAreaHeight);
gridElement.height(newGridHeight);
$("#Grid").data("kendoGrid").refresh();
}
$(document).ready(function () {
resizeGrid();
});
</
script
>
-----------------------------------------------------------
ConfigurationSettingEditor.cshtml
@model Project.ViewModels.ConfigurationSetting
@Html.HiddenFor(cs => cs.ConfigurationSettingID)
<
div
class
=
"container"
>
<
div
class
=
"col-xs-12 col-sm-12 col-md-12 col-lg-12"
>
<
div
class
=
"form-horizontal"
>
<
div
class
=
"panel panel-primary"
>
<
div
class
=
"panel-heading"
>Standard Settings</
div
>
<
div
class
=
"panel-body"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.Name, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label " })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.ServiceName, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.ServiceName, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.JobSourceItem, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8"
>
@(
Html.Kendo().DropDownListFor(m => m.JobSourceItem)
.DataValueField("JobSourceSettingID")
.DataTextField("JobSourceName")
.HtmlAttributes(new { style = "width:100%;" })
.DataSource(
data => data.Read("Get_JobSources", "Home")
).AutoBind(false)
.OptionLabel("Select Source Name....")
)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.TestMode, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.CheckBoxFor(m => m.TestMode)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.Timer, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.Kendo().NumericTextBoxFor(m => m.Timer).Format("#").Step(10000).Min(60000)
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.Enabled, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.CheckBoxFor(m => m.Enabled)
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"panel panel-primary"
>
<
div
class
=
"panel-heading"
>Database Settings</
div
>
<
div
class
=
"panel-body"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.DatabaseLiveConnection, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.DatabaseLiveConnection, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.DatabaseTestConnection, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.DatabaseTestConnection, new { @class = "form-control" })
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"panel panel-primary"
>
<
div
class
=
"panel-heading"
>File Server Settings</
div
>
<
div
class
=
"panel-body"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.LiveFileServer, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.LiveFileServer, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.TestFileServer, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.TestFileServer, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.SuccessFolder, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.SuccessFolder, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.MonitoringFolder, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.MonitoringFolder, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.ErrorFolder, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.ErrorFolder, new { @class = "form-control" })
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"panel panel-primary"
>
<
div
class
=
"panel-heading"
>Email Settings</
div
>
<
div
class
=
"panel-body"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.MailServer, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.MailServer, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.DeveloperEmail, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.DeveloperEmail, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.ErrorEmail, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.ErrorEmail, new { @class = "form-control" })
</
div
>
</
div
>
<
div
class
=
"form-group"
>
@Html.LabelFor(m => m.FromEmail, new { @class = " col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
<
div
class
=
"col-xs-8 col-sm-8 col-md-8 col-lg-8 "
>
@Html.TextBoxFor(m => m.FromEmail, new { @class = "form-control" })
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>