Kendo Gird selected row display in modal popup

Question

Hi Team,

Good Afternoon. I havea kendo grid and display the data and now I need to show details of selected row in a modal popup.

My Kendo Grid is having 10 columns and my modal popup should display all the details of selected row.

Please suggest.

Sachin Singh · Answer

go through my blog article https://www.sharpencode.com/article/KendoUI/add-and-edit-kendo-grid-with-popup-window another approach that i have not mentioned in the article would be step 1. create a kendo window class = "col-md-12" > @(Html.Kendo().Window().Name( "Details" ) .Title( "View Account" ) .Visible( false ) .Modal( true ) .Draggable() .Width(610) .Height(233) ) step 2. use the template "text/x-kendo-template" id= "template" > "details-container" > "width:100%" > AccountName : #=AccountName # "height:10px" > AccountWebsiteUrl : #=AccountWebsiteUrl # @* "height:10px" > AccountDescription : #=AccountDescription # *@ "height:10px" > AccountOwner : #=AccountOwner # @* "height:10px" > AccountParentNo : #=AccountParentNo # *@ "height:10px" > AccountContactNo : #=AccountContactNo # @* "height:10px" > AccountCompanyName : #=AccountCompanyName # "height:10px" > City : #=City # "height:10px" > Country : #=Country # "height:10px" > AccountStatus : #=AccountStatus# "height:10px" > InsertedBy : #=InsertedBy# "height:10px" > InsertedOn : #=InsertedOn# "height:10px" > LastModifiedBy : #=LastModifiedBy# "height:10px" > LastModifiedOn : #=LastModifiedOn# "height:10px" > IsActive : #=IsActive# "height:10px" > IsDelete : #=IsDelete# *@ @* "height:15px" > *@ step 3. "text/javascript" > var detailsTemplate = kendo. template ($( "#template" ).html()); function showDetails(e) { e.preventDefault(); var dataItem = this .dataItem($(e.currentTarget).closest( "tr" )); var wnd = $( "#Details" ).data( "kendoWindow" ); wnd.content(detailsTemplate(dataItem)); wnd.open().element.closest( ".k-window" ).css({ top: 125, left: 350 }); } note:- here showDetails is a column command in grid @(Html.Kendo().Grid(Model) .Name( "grid" ) .Columns(columns => { columns.Bound(c => c.AccountName).Title( "Name" ).Width(200); columns.Bound(c => c.AccountWebsiteUrl).Title( "WebsiteUrl" ).Width(250).Filterable( false ); //columns.Bound(c => c.AccountDescription).Title("Description").Width(200); columns.Bound(c => c.AccountOwner).Title( "Owner" ).Width(250); //columns.Bound(c => c.AccountParentNo).Title("ParentNo").Width(250); columns.Bound(c => c.AccountContactNo).Title( "ContactNo" ).Width(250); //columns.Bound(c => c.AccountCompanyName).Title("CompanyName").Width(250); //columns.Bound(c => c.City).Title("City").Width(250); //columns.Bound(c => c.Country).Title("Country").Width(250); //columns.Bound(c => c.AccountStatus).Title("Status").Width(250); //columns.Bound(c => c.InsertedBy).Title("InsertedBy").Width(250); //columns.Bound(c => c.InsertedOn).Title("InsertedOn").Width(250); //columns.Bound(c => c.LastModifiedBy).Title("LastModifiedBy").Width(250); //columns.Bound(c => c.LastModifiedOn).Title("LastModifiedOn").Width(250); //columns.Bound(c => c.IsActive).Title("IsActive").Width(250); //columns.Bound(c => c.IsDelete).Title("IsDelete").Width(250); columns.Command(command => command.Custom( "Edit" ).Click( "editDetails" )).Title( "Modify" ).Width(30); columns.Command(command => command.Custom( "View" ).Click( "showDetails" )).Title( "Details" ).Width(30); columns.Command(c => { c.Destroy(); }).Title( "Remove" ).Width(30); }) //.Scrollable() //.Events(e => e.DataBound("onRowBound")) .Sortable() .Filterable() //.ColumnMenu() //.Filterable(ftb => ftb.Mode(GridFilterMode.Row)) .Events(e => e.DataBound( "onRowBound" )) .DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(p => p.AccountId)) .PageSize(5) .Create(update => update.Action( "AddAccount" , "Account" )) .Update(update => update.Action( "UpdateAccount" , "Account" )) .Read(read => read.Action( "GetAllAccount" , "Account" )) .Destroy(destroy => destroy.Action( "DeleteAccount" , "Account" )) ) .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 ); }) ) lt;/div>

Kendo Gird selected row display in modal popup

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)