How to pass value from kendo grid to kendo window in MVC

Question

How can I pass the PreEmploymentId of the selected row from the grid to window on button click event of the grid. This may be simple, but I am new and still learning basics.

Script-

<script>
    $("[data-button-type='auction']")
                .click(function(e) {
                    myWindow.data("kendoWindow").open();
                    myWindow.data("kendoWindow").center();
                    myWindow.data("kendoWindow").top();
                });
</script>

Kendo Grid-

<div >
@*Telerik grid*@
@{
    Html.Kendo().Grid(Model.LstPreEmploymentWorkflowModellist)
        .Name("MyGrid")
        .Columns(col =>
        {
            //on edir button click action name Main in invoked in PreEmploymentWorkflow controller and PreEmploymentId is passed
            col.Template(@<text>
                             @Html.ActionLink("Edit", "Main", "PreEmploymentWorkflow", new {Id = item.PreEmploymentId}, new {@class = "classname"})</text>).Width(30);
            col.Bound(o => o.PreEmploymentId).Visible(false).Groupable(false);
            col.Bound(o => o.FirstName).Width(30).Groupable(false);
            col.Template(@<text>
                             @Html.ActionLink("OpenFile", "Openfile", "PreEmploymentWorkflow", new {Id = item.PreEmploymentId, uploadfilename = "EEOC Tracking Form"}, new {@class = "classname3"})</text>).Title("EEOC").Width(30);
            col.Template(@<text>@(Html.Kendo().Button()
                                      .Name("open" + @item.PreEmploymentId)
                                      .ImageUrl(Url.Content("/images/auction_16.gif")).HtmlAttributes(new {type = "submit", data_button_type = "auction" })
                                      )
                          </text>).Width(40).Title("Status");
            col.Template(@<text>
                             @Html.ActionLink("Delete", "Delete", "PreEmploymentWorkflow", new {Id = item.PreEmploymentId}, new {@class = "classname2"})</text>).Width(30);
        })
        //.HtmlAttributes(new { style = "width: 1100px" })
        .Sortable()
        .Render();
}

Kendo Window-

 @{Html.Kendo().Window()
      .Name("window")
      .Width(500)
      .Height(315)
      .Animation(true)
      .Draggable()
      .Visible(false)
      .Modal(true)
      .Title("Employment Status")
      .Actions(actions => actions.Close())
      .Content(@<text>
                   @using (Html.BeginForm("CreateStatus", "PreEmploymentWorkflow", FormMethod.Post, new { enctype = "multipart/form-data" }))
                   {
                       <table>
                           <tr>
                           <td>
                                   @(Html.Kendo().TextBoxFor(m => m.LstPreEmploymentWorkflowModel.PreEmploymentId))
                               </td>
                               <td>
                                   @(Html.Kendo().RadioButtonFor(m => m.LstPreEmploymentWorkflowModel.Status).Value(1).Label("Approved"))
                               </td>
                               <td>
                                   @(Html.Kendo().RadioButtonFor(m => m.LstPreEmploymentWorkflowModel.Status).Value(9).Label("Reject"))
                               </td>
                           </tr>
                           <tr>
                               <td>
                                   <label class="Bold" for="statusattachment">Status Attachment:</label>
                               </td>
                               <td><input type="file" name="uploadfilestatus"/></td>
                           </tr>
                           <tr>
                               <td>
                                   <input id="Button1" type="submit" value="Submit"/>
                               </td>
                           </tr>
                       </table>
                   }
                </text>)
      .Render();
}

Thanks in advance.

Sam S Sam S · Accepted Answer · 2016-07-21T20:22:21

If someone is searching, how to do that

<script>

function editItem(e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var pId = dataItem.PreEmploymentId;


       var myWin = $("#windowstatus").kendoWindow({

        modal: true,
        width: "450px",
        height: "250px",
        resizable: true,
        position: {
            top: 400,
            left: 650
        },
        title: "PreEmployment Status",
        content: {
            url: "../StatusWindow", //controller name
            data: { customerId: pId } //passing data
        }

    });
    myWin.data("kendoWindow").open();
    return false;
}
</script>

<script type="text/x-kendo-template" id="template">
    <div id="details-container">

    </div>
</script>

In kendo grid,

    col.Bound(o => o.PreEmploymentId).Visible(false).Groupable(false);
    col.Command(command => command.Custom("Change Status").Click("editItem")).Width("120px");

In StatusWindowController,

public class StatusWindowController : Controller
    {
        // GET: StatusWindow
        public ActionResult Index(int customerId)
        {

            return View(mixstatus);
        }
    }

How to pass value from kendo grid to kendo window in MVC

2 Answers