Kendo UI External Editing Form - kendo-asp.net-mvc

Question

I'm Working on a project in which i have implemented Kendo Grid and when i click the edit button a popup for editing is displayed. But what i want is a separate panel alongside of kendo grid which i have made using [bootstrap][1] and i want to populate it with the editing detail of particular row clicked in the Kendo grid. I have attached the image below to give you an idea what i want. the help bordered area is where i want to populate it showing editable detail of selected row. Any Help??
#(Html.Kendo().Grid<UserItem>()
.Name("usergrid")
.HtmlAttributes(new { style = "width:100%" })
.Columns(columns =>
{
columns.Bound(o => o.FirstName);
columns.Bound(o => o.LastName);
columns.Bound(o => o.EmailAddress);
columns.ForeignKey(o => o.RoleId, (System.Collections.IEnumerable)ViewData["Roles"], "Id", "Description")
.Title("Role");
columns.ForeignKey(o => o.SystemRoleId, (System.Collections.IEnumerable)ViewData["SystemRoles"], "Id", "Description")
.Title("Sys Role");
columns.ForeignKey(o => o.TimeZoneId, (System.Collections.IEnumerable)ViewData["TimeZones"], "Id", "Description")
.Title("Time Zone");
columns.Bound(e => e.DefaultPageSize).Title("Default Page Size");
columns.Bound(o => o.IsActive).Title("Is Active");
columns.Bound(o => o.LastLoginDate).Format("{0:d}").Title("Last Login");
columns.Command(command => { command.Edit().Text("Edit"); });
})
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar">
<span id="divCompany" style='#(roleName == Constants.SystemRoles.FifthMethod?"":"display:none;")'>
<label class="category-label" for="ddlCompany">Companies :</label>
#(Html.Kendo().DropDownList()
.Name("ddlCompany")
.DataTextField("Name")
.DataValueField("Id")
.AutoBind(true)
.Events(e => e.Change("CompanyChange"))
.HtmlAttributes(new { style = "width: 150px;" })
.BindTo(ViewBag.Companies)
.Value(Convert.ToString(ViewBag.CurrentCompanyID))
)
</span>
#Html.Kendo().Button().Name("btnNewUser").Content("New User").HtmlAttributes(new { #class = "k-button k-button-icontext k-grid-add pull-right" })
<button type="button" data-toggle="modal" data-target="#importUser-pop" class="k-button k-button-icontext pull-right">Import Users</button>
</div>
</text>);
})
.Editable(editable =>
{
editable.Mode(GridEditMode.PopUp);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(c => c.UserId);
model.Field(c => c.LastLoginDate).Editable(false);
})
.Create(create => create.Action("User_Create", "User").Data("GetCompanyId"))
.Read(read => read.Action("User_Read", "User").Data("GetCompanyId"))
.Update(update => update.Action("User_Update", "User"))
)
.Pageable()
.Sortable()
.Filterable()
.Events(e => e.Edit("grid_Edit"))
)

Answer 1

A complete example already exists in Kendo Docs how to edit records using external forms
A mvvm bounded section <div id="editForm"> to grid row using kendo.bind($("#editForm"), viewModel)