asp.net - customize popup window in telerik grid in mvc -

i have display customize popup window in telerik grid because cannot display values in grid want when user click on grid edit button , according particular row datakey fetch data table , display records in popup window , want open window when user click on grid button not on checkout button can do

view  <%@ page title="" language="c#" masterpagefile="~/content/jobseekers.master" inherits="system.web.mvc.viewpage<ienumerable<itclassifieds.viewmodels.workexperience>>" %>  <asp:content id="content1" contentplaceholderid="titlecontent" runat="server">     trial </asp:content>  <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <script type="text/javascript">     function onrowselected(e) {        var ordersgrid = $('#grid').data('tgrid');         var resexpid = e.row.cells[0].innerhtml;          // update ui text                $('#rexsepid').text(resexpid);         // rebind related grid //        ordersgrid.rebind({ //            resexpid: resexpid //        });         var window = $("#window").data("twindow");         window.center().open();         }           function closewindow() {             var window = $("#window").data("twindow");             window.close();                  var undobutton = $('#undo');             undobutton.show();         }          function openwindow() {             var window = $("#window").data("twindow");             window.center().open(); //            var ordersgrid = $('#grid').data('tgrid'); //            var resexpid = ordersgrid.row.cells[0].innerhtml;  //            $('#rexsepid').text(resexpid);  //            alert(resexpid);            }          function viewdetails(activityid) {             //....do stuff here...              alert(activityid);          }     </script>      <h2>trial</h2>      <%=html.telerik().grid(model).name("grid").datakeys(keys => keys.add(m => m.resexpid))       .columns(columns=>      {         columns.bound(m => m.resexpid).width(100);         columns.bound(m => m.company).width(100);         //columns.bound("title").width(100);         columns.bound(m=>m.title).width(200);         columns.command(commands =>             {                 commands.edit().buttontype(gridbuttontype.text);                 commands.delete().buttontype(gridbuttontype.text);             }).width(200).title("command");          columns.bound(m => m.resexpid).clienttemplate("<a onclick='viewdetails('" + "'<#= id #>'" + "');' href='javascript:'>view</a>").title("view");          //columns.bound(m => m.date).width(200);     })      .clientevents(events => events.onrowselect("onrowselected"))          .databinding(databinding =>          {                 databinding.ajax()                 .select("_firstlook","editresume")                 .update("_saveajaxediting", "editresume")                 .delete("_deleteajaxediting", "editresume");              })         .scrollable(scrolling => scrolling.enabled((bool)viewdata["scrolling"]))         .sortable(sorting => sorting.enabled((bool)viewdata["sorting"]))         .pageable(paging => paging.enabled((bool)viewdata["paging"]))         .filterable(filtering => filtering.enabled((bool)viewdata["filtering"]))         .groupable(grouping => grouping.enabled((bool)viewdata["grouping"]))         .footer((bool)viewdata["showfooter"])          .rowaction(row => row.selected = row.dataitem.resexpid.equals(viewdata["id"]))           %>         <button class="button medium gray" onclick="openwindow()">checkout</button>     <% html.telerik().window()            .name("window")            .title("update option")             .draggable(false)            .resizable(resizing => resizing                .enabled(true)                .minheight(250)                .minwidth(250)                .maxheight(500)                .maxwidth(500)             )            .scrollable(true)            .modal(true)            .buttons(b => b.maximize().close())            .content(() =>            {%>            <div>           <%--  <% %>            <% if (resumepackgeexits == true && jobpackageexist == true)               {               }               else if (resumepackgeexits == false && jobpackageexist == true)               {                 %>--%>             <div>               <table border="1" cellpadding="5" cellspacing="0" bordercolor="#cccccc" style="font-family:verdana, arial, helvetica, sans-serif;font-size:11px;border:1px solid #aaa;margin:5px;">                      <tr> <td colspan="3">                     provied unlimeted resume subscription.                     if want resume subscription please click on resume package button.                     </td></tr>               </table>              <br />             <%=html.actionlink("resume package", "resumepackage", null, new { @class = "button medium gray" })%>            </div>             <%--<%}else if(resumepackgeexits == true && jobpackageexist == false)                {%> --%>               <div>                     <table border="1" cellpadding="5" cellspacing="0" bordercolor="#cccccc" style="font-family:verdana, arial, helvetica, sans-serif;font-size:11px;border:1px solid #aaa;margin:5px;">          <tr>           <td colspan="3">           provied job subscription.                     if want job subscription please click on job package button.           </td>          </tr>        </table>       <br />        <%=html.actionlink("job package", "jobpackage", null, new { @class = "button medium gray" })%>               </div>             <%--   <%} %>--%>            <br /> <%--                <% using (html.beginform("checkout", "package", formmethod.post, new { name = "frmdcc", onsubmit = "return checkform();" }))                 { %>                    <input type="hidden" value="<%= model.total%>" name="totalpayment" />                     <table>                    <tr>                    <td><%=html.radiobutton("paymentoption","paypalpayment") %></td>                    <td><img  src='https://www.paypal.com/en_us/i/btn/btn_xpresscheckout.gif' border='0' align='top' alt='check out paypal' /></td>                    </tr>                    <tr>                    <td><%=html.radiobutton("paymentoption","creditcart") %></td>                    <td> <img  src="https://www.paypal.com/en_us/i/bnr/horizontal_solution_ppecheck.gif" border="0" alt="check out credit cart" /></td>                    </tr>                    </table>                      <input type="submit" value="go" name="submit" class="button medium gray" />                  <%} %>                --%>                   </div>            <%})            .width(500)            .height(400)            .visible(false)             .render();     %>     </asp:content>   controller      public actionresult trial()         {             //var re = (from j in db.resumes             //          select new             //          jobresults { jobtitle = j.jobtitle, company = j.companyinfo }).asenumerable();             var re = (from j in db.resumes join res in db.res_exp on j.resumeid equals res.resume.resumeid                       j.resumeid == 258                       select new workexperience {title=j.resumetitle,company=j.desiredcompany ,resexpid=res.resexpid}                       ).asenumerable();                 viewdata["ajax"] = true;             viewdata["scrolling"] = true;             viewdata["paging"] = true;             viewdata["filtering"] = true;             viewdata["grouping"] = true;             viewdata["sorting"] = true;             viewdata["showfooter"] = true;             return view(re);          } 

in order make customized popup in telerik grid need exploit editor templates. make editor template viewmodel. this brad wilson's tutorial start. this post @ telerik forum may also