How to display Grid items

Question

Hi Team, I am using KENDO grid to display the data and I want to display selected row details in the below labels. Ex:- I have Emp details in the grid and I want to display the details of Id, Name, Sal, address in a four labels located in the below on the selected change event. 2) I am able to display the above details in the Div however look and feel is not great. Is there a way to display grid items in the form of labels. Thanks in advance.

Sachin Singh · Answer

I am using kendo Grid for 4 years , and i find the built-in edit template the best to show edit form. @(Html.Kendo().Grid () .Name( "grid" ) .Columns(columns => { columns.Bound(c => c.Id).Title( "Id" ).Visible( false ); columns.Bound(c => c.Name).Title( "Name" ).Width(150); columns.Bound(c => c.DOB).Title( "DOB" ).Width(150).Filterable( false ); columns.Bound(c => c.Salary).Title( "Salary" ).Width(150).Filterable( false ); columns.Bound(c => c.Gender).Title( "Gender" ).Width(150).Filterable( false ); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250); }).HtmlAttributes( new { style = "height: 550px;" }) .ToolBar(toolbar => toolbar.Create()) .Scrollable() .Groupable() .Sortable() .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.AccountId)) .PageSize(5) .Read(read => read.Action( "GetAll" , "Home" )) ) .Resizable(resize => resize .Columns( true ) ) .ToolBar(toolbar => { toolbar.Custom().Name( "newAdd" ).Text( "+ Add Account " ).Url( "#" ).HtmlAttributes( new { id = "newAdd" }); }) .Pageable(pageable => { pageable.Refresh( true ); pageable.PageSizes( true ); }) ) function editDetails(e) { debugger e.preventDefault(); var wnd = $( "#EditDetails" ).data( "kendoWindow" ); var dataItem = this .dataItem($(e.currentTarget).closest( "tr" )); document.getElementById( "txtid" ).value = dataItem.AccountId document.getElementById( "txtName" ).value = dataItem.AccountName ..... other columns $( "#btnUpdate" ).kendoButton({}).data( "kendoButton" ).enable( true ); wnd.open().element.closest( ".k-window" ).css({ top: 125, left: 350 }); } class = "col-md-12" > @(Html.Kendo().Window().Name( "EditDetails" ) .Title( "Update Account" ) .Visible( false ) .Modal( true ) .Events(events => events.Refresh( "refresh" )) .Content(@ "width:100%;" id= "fieldlist" > @*@Html.Partial( "_partialUpdateRole" )*@ @*@(Html.LabelFor(m=>m.)*@ "Updateform" > "update-container" > @Html.Hidden( "txtid" ) "width:100%" > Name : @(Html.Kendo().TextBox() .Name( "txtAName1" ) .HtmlAttributes( new { placeholder = "Enter AccountName" , required = "required" , validationmessage = "Enter AccountName" , maxlength = "50" , @ class = "col-sm-2 form-control" , style = "width: 100%" , }) ) "height:10px" > OtherColumn: @(Html.Kendo().TextBox() .Name( "txtOtherColumn" ) .HtmlAttributes( new { placeholder = "Enter something" , required = "required" , validationmessage = "Enter WebsiteUrl" , maxlength = "50" , @ class = "col-sm-2 form-control" , style = "width: 100%" , }) ) "width:55%;margin-top:20px;" > "right" > @(Html.Kendo().Button() .Name( "btnUpdate" ) .Content( "Update" ) .HtmlAttributes( new { type = "button" , @ class = "k-button k-primary" , style = "height:35px;width:70px;" }) .Events(e => e.Click( "btnUpdate_Click" )) ) @(Html.Kendo().Button() .Name( "btnUReset" ) .Content( "Reset" ) .HtmlAttributes( new { type = "button" , @ class = "k-button k-primary" , style = "height:35px;width:70px;" }) .Events(e => e.Click( "btnUReset_Click" )) ) ) .Draggable( true ) .Width(610) .Height(318) .Events(ev => ev.Close( "onClose1" )) ) public ActionResult GetEmployees(DataSourceRequest req) { KendoGridContext db= new KendoGridContext(); List emps= new List(); emps= db.Employees.ToList(); return Json(emps.ToDataSourceResult(req),JsonRequestBehavior.AllowGet); }

How to display Grid items

Answers (1)