Loading
Kendo Gird selected row display in modal popup
  1. "text/x-kendo-template" id="template">  
  2.     "details-container">  
  3.         "width:100%">  
  4.               
  5.               
  6.                   
  7.                     AccountName :  
  8.                   
  9.                   
  10.                     #=AccountName #  
  11.                   
  12.               
  13.   
  14.             "height:10px">  
  15.               
  16.                   
  17.                     AccountWebsiteUrl :  
  18.                   
  19.                   
  20.                     #=AccountWebsiteUrl #  
  21.                   
  22.               
  23.             @*"height:10px">  
  24.               
  25.                   
  26.                     AccountDescription :  
  27.                   
  28.                   
  29.                     #=AccountDescription #  
  30.                   
  31.             *@  
  32.             "height:10px">  
  33.               
  34.                   
  35.                     AccountOwner :  
  36.                   
  37.                   
  38.                     #=AccountOwner #  
  39.                   
  40.               
  41.             @*"height:10px">  
  42.                   
  43.                       
  44.                         AccountParentNo :  
  45.                       
  46.                       
  47.                         #=AccountParentNo #  
  48.                       
  49.                 *@  
  50.                 "height:10px">  
  51.                   
  52.                       
  53.                         AccountContactNo :  
  54.                       
  55.                       
  56.                         #=AccountContactNo #  
  57.                       
  58.                   
  59.                @*"height:10px">  
  60.                   
  61.                       
  62.                         AccountCompanyName :  
  63.                       
  64.                       
  65.                         #=AccountCompanyName #  
  66.                       
  67.                   
  68.                 "height:10px">  
  69.                   
  70.                       
  71.                         City :  
  72.                       
  73.                       
  74.                         #=City #  
  75.                       
  76.                   
  77.                 "height:10px">  
  78.                   
  79.                       
  80.                         Country :  
  81.                       
  82.                       
  83.                         #=Country #  
  84.                       
  85.                   
  86.                 "height:10px">  
  87.                   
  88.                       
  89.                         AccountStatus :  
  90.                       
  91.                       
  92.                         #=AccountStatus#  
  93.                       
  94.                   
  95.                 "height:10px">  
  96.                   
  97.                       
  98.                         InsertedBy :  
  99.                       
  100.                       
  101.                         #=InsertedBy#  
  102.                       
  103.                   
  104.                 "height:10px">  
  105.                   
  106.                       
  107.                         InsertedOn :  
  108.                       
  109.                       
  110.                         #=InsertedOn#  
  111.                       
  112.                   
  113.                 "height:10px">  
  114.                   
  115.                       
  116.                         LastModifiedBy :  
  117.                       
  118.                       
  119.                         #=LastModifiedBy#  
  120.                       
  121.                   
  122.                 "height:10px">  
  123.                   
  124.                       
  125.                         LastModifiedOn :  
  126.                       
  127.                       
  128.                         #=LastModifiedOn#  
  129.                       
  130.                   
  131.                 "height:10px">  
  132.                   
  133.                       
  134.                         IsActive :  
  135.                       
  136.                       
  137.                         #=IsActive#  
  138.                       
  139.                   
  140.                 "height:10px">  
  141.                   
  142.                       
  143.                         IsDelete :  
  144.                       
  145.                       
  146.                         #=IsDelete#  
  147.                       
  148.                 *@  
  149.             @*"height:15px">*@  
  150.           
  151.     
  
  •   
    • step 3. 
    1. "text/javascript">  
    2.     var detailsTemplate = kendo.template($("#template").html());  
    3.   
    4.     function showDetails(e) {  
    5.         e.preventDefault();  
    6.   
    7.         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));  
    8.         var wnd = $("#Details").data("kendoWindow");  
    9.   
    10.         wnd.content(detailsTemplate(dataItem));  
    11.         wnd.open().element.closest(".k-window").css({  
    12.             top: 125,  
    13.             left: 350  
    14.   
    15.         });  
    16.     }  
    17.   
     note:- here showDetails is a column command in grid
    1. @(Html.Kendo().Grid(Model)  
    2.            .Name("grid")  
    3.              
    4.            .Columns(columns =>  
    5.            {  
    6.                  
    7.                columns.Bound(c => c.AccountName).Title("Name").Width(200);  
    8.                columns.Bound(c => c.AccountWebsiteUrl).Title("WebsiteUrl").Width(250).Filterable(false);  
    9.                //columns.Bound(c => c.AccountDescription).Title("Description").Width(200);  
    10.                columns.Bound(c => c.AccountOwner).Title("Owner").Width(250);  
    11.                //columns.Bound(c => c.AccountParentNo).Title("ParentNo").Width(250);  
    12.                columns.Bound(c => c.AccountContactNo).Title("ContactNo").Width(250);  
    13.                //columns.Bound(c => c.AccountCompanyName).Title("CompanyName").Width(250);  
    14.                //columns.Bound(c => c.City).Title("City").Width(250);  
    15.                //columns.Bound(c => c.Country).Title("Country").Width(250);  
    16.                //columns.Bound(c => c.AccountStatus).Title("Status").Width(250);  
    17.                //columns.Bound(c => c.InsertedBy).Title("InsertedBy").Width(250);  
    18.                //columns.Bound(c => c.InsertedOn).Title("InsertedOn").Width(250);  
    19.                //columns.Bound(c => c.LastModifiedBy).Title("LastModifiedBy").Width(250);  
    20.                //columns.Bound(c => c.LastModifiedOn).Title("LastModifiedOn").Width(250);  
    21.                //columns.Bound(c => c.IsActive).Title("IsActive").Width(250);  
    22.                //columns.Bound(c => c.IsDelete).Title("IsDelete").Width(250);  
    23.                columns.Command(command => command.Custom("Edit").Click("editDetails")).Title("Modify").Width(30);  
    24.                columns.Command(command => command.Custom("View").Click("showDetails")).Title("Details").Width(30);  
    25.                columns.Command(c => { c.Destroy(); }).Title("Remove").Width(30);  
    26.                  
    27.            })  
    28.            //.Scrollable()  
    29.            //.Events(e => e.DataBound("onRowBound"))  
    30.                .Sortable()  
    31.                .Filterable()  
    32.            //.ColumnMenu()  
    33.            //.Filterable(ftb => ftb.Mode(GridFilterMode.Row))  
    34.                     .Events(e => e.DataBound("onRowBound"))  
    35.            .DataSource(dataSource => dataSource  
    36.            .Ajax()  
    37.            .Model(model => model.Id(p => p.AccountId))  
    38.            .PageSize(5)  
    39.                                     .Create(update => update.Action("AddAccount", "Account"))  
    40.                                   .Update(update => update.Action("UpdateAccount", "Account"))  
    41.                                    .Read(read => read.Action("GetAllAccount", "Account"))  
    42.                                  .Destroy(destroy => destroy.Action("DeleteAccount", "Account"))  
    43.            )  
    44.             .Resizable(resize => resize  
    45.             .Columns(true)  
    46.          )  
    47.   
    48.           .ToolBar(toolbar =>  
    49.            {  
    50.                toolbar.Custom().Name("newAdd").Text("+ Add Account ").Url("#").HtmlAttributes(new { id = "newAdd" });  
    51.   
    52.            })  
    53.   
    54.   
    55.   
    56.            .Pageable(pageable =>  
    57.            {  
    58.                pageable.Refresh(true);  
    59.                pageable.PageSizes(true);  
    60.            })  
    61.    )  
    62. lt;/div>  
     
    0