title: How to create page using Kendo Gird and Tabstrip
body: <p>I want to select a row of grid and show detail row at tabstrip. The same image should attach.</p>
  
  <p>Can anyone help me? I am using asp.net mvc 4 + Kendo Ui controls.</p>
  
  <p>Image is <a href="https://i.stack.imgur.com/89knq.png" rel="nofollow noreferrer">here</a>.</p>
  
  <p>File <strong><em>CandidateController.cs</em></strong></p>
  
  <pre><code>public ActionResult Index()
      {
          return View();
      }
  
      public ActionResult Can_Read([DataSourceRequest]DataSourceRequest request)
      {
          return Json(GetAllCan().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
      }
  
      public ActionResult Can_ReadId([DataSourceRequest]DataSourceRequest request, Guid id)
      {
          return Json(GetCanById(id).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>In partial view: <strong><em>Candidate Info</em></strong></p>
  
  <pre><code>@model RecruitmentOnlineMVC.Models.CandidateViewModel
  
      &lt;div class="candidate-detail" style="width: 827px!important"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Candidate Name&lt;/th&gt;
                  &lt;td&gt;@(Html.TextBoxFor(model =&gt; model.CandidateName, new { @class = "k-input k-textbox" }))&lt;/td&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;td&gt;@Html.TextBoxFor(model =&gt; model.ID, new { @class = "k-input k-textbox" })&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Email, new { @class = "k-input k-textbox" })&lt;/td&gt;
                  &lt;th&gt;Phone&lt;/th&gt;
                  &lt;td&gt;@Html.TextBoxFor(model =&gt; model.Phone, new { @class = "k-input k-textbox" })&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In <strong><em>View Index</em></strong></p>
  
  <pre><code>@model RecruitmentOnlineMVC.Models.CandidateViewModel
      @(Html.Kendo().Splitter()
        .Name("splitter")
        .Panes(panes =&gt;
            {
                panes.Add()
                     .Content(@&lt;div&gt;
                         @(Html.Kendo().Grid&lt;RecruitmentOnlineMVC.Models.CandidateViewModel&gt;()
                                          .Name("grid")
                                          .Columns(columns =&gt;
                                          {
                                              columns.Bound(c =&gt; c.CandidateName);
                                              columns.Bound(c =&gt; c.ID);
                                          })
                                          .Selectable(selectable =&gt; selectable
                                                      .Mode(GridSelectionMode.Single))
                                          .DataSource(dataSource =&gt; dataSource
                                              .Ajax()
                                              .PageSize(20)
                                              .Read(read =&gt; read.Action("Can_Read", "Candidate"))
                                           )
                                          .Pageable(pageable =&gt; pageable.ButtonCount(3))
                                          .Filterable()
                                          .Sortable()
                                          .ColumnMenu()
                                          .Events(e =&gt; e.Change("onSelected"))
                                      )
                     &lt;/div&gt;)
                     .Scrollable(true)
                     .Collapsible(true)
                     .Size("370px");
  
                panes.Add()
                     .Content(@&lt;div&gt;
                         @(Html.Kendo().TabStrip()
                                        .Name("tabstrip")
                                        .Items(tabstrip =&gt;
                                            {
                                                tabstrip.Add().Text("Candidate Detail")
                                                        .Selected(true)
                                                        .LoadContentFrom("/Candidate/CandidateInfo");
  
                                                tabstrip.Add().Text("Work History")
                                                        .LoadContentFrom("/Candidate/WorkHistory");
  
                                            })
                                  )
                     &lt;/div&gt;);
            }))
  </code></pre>
  
  <p><strong><em>Script</em></strong></p>
  
  <pre><code>&lt;script&gt;
  function onSelected() {
      var can = this.select();
      var propId = this.dataItem(can).ID;
  </code></pre>
  
  <p>\\In here, I want call action at Controller with propId and return detail on Tabstrip
  </p>
  
  <p>Can anyone help me?
  Thank so much !</p>
  
  <hr>
  
  <p>I want to handled according to process like this :</p>
  
  <p><img src="https://i.stack.imgur.com/XoMGi.jpg" alt="here"></p>
  
  <p>Please guide me. Thank so much!</p>