Getting kendo-window parameter

Question

I have a JavaScript method that opens up a kendo-window, this window contains a kendo-grid which has a datasource that I want to get from my controller. In order to get the data to fill this grid I need to pass on an ID. The JavaScript method that opens up this window contains the necessary data, however I do not know how to get this data in my kendo-grid. I need to get my ID to the (read => read.Action("Read_Action", "ControlerName", new { linenum = ??? }) part where I want to replace the question marks with my ID.

JavaScript:

    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dataItem.LineNum);
        var wnd = $("#Details").data("kendoWindow");
        wnd.center().open();
    }

Kendo-window:

@{Html.Kendo().Window().Name("Details")
    .Title("Location Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
    .Height(600)
    .Content(                                
          Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
               .Name("LocItemGrid")
               .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(m => m.BinLocationItemId))
                    .Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ??? })))
                    .ToHtmlString()).Render();
}

Answer 1

You can only do this using a controller to open your window content as a partial view.

Set up your controller which will render the partial view and add the id to ViewBag to retrieve in kendo window,

public ActionResult GetKendoWindow(){
    ViewBag.Id = 123;
    return PartialView("_PartialView"); // Html file name
}

Your "_PartialView" file will now contain the grid only with Id assigned from ViewBag.Id

Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
               .Name("LocItemGrid")
               .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(m => m.BinLocationItemId))
                    .Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ViewBag.Id }))

Your kendo().window() method will change to this (without the content as it'll load from the Partial View)

@{Html.Kendo().Window().Name("Details")
    .Title("Location Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
    .Height(600)
    .LoadContentFrom("GetKendoWindow", "Controller")
    .ToHtmlString()).Render();
}

If your ID is coming from the parent page (the page you're opening the window from), you will need to pass the ID up to the controller, your .LoadContentFrom("GetKendoWindow", "Controller") would then become .LoadContentFrom("GetKendoWindow?ID=123", "Controller").

And your controller declaration would become public ActionResult GetKendoWindow(int ID)

Edit: As you retrieve the value from JavaScript event, you would preferably want to open your window using JavaScript for simplicity, in your event put the following

$("#Details").kendoWindow({
    width: "620px",
    height: "620px",
    title: "Window Title",
    content: {
       url: "GetKendoWindow",
       type: "GET",
       data: {ID : dataItem.ID}
    }
});

Remove your Kendo().Window() Razor function completely, and leave an empty div with id Details, and open the window using $("#Details").data("kendoWindow").center().open()

Complete code for simplicity:

<div id="Details"></div>

<script>
// Your event function where you retrieve the dataItem
$("#Details").kendoWindow({
    width: "620px",
    height: "620px",
    title: "Window Title",
    content: {
       url: "GetKendoWindow",
       type: "GET",
       data: {ID : dataItem.ID}
    }
});

$("#Details").data("kendoWindow").center().open()
//End the event function
</script>

Then add your controller method from above.

public ActionResult GetKendoWindow(int ID){
    ViewBag.Id = ID;
    return PartialView("_PartialView"); // Html file name
}