Pass selected row's dataItem of the grid to controller/action of a context menu's item as a parameter

[GPC]

I have a Telerik MVC grid in my application and a context menu set on the grid as well. When user clicks on the context menu, the action of the controller expects current row's id and some other data as a parameter. How can I pass this information to the action/controller from the context menu's item click?

The action is supposed to return a PDF file, so I can't use .Ajax in this case.

Here is code for the grid, context menu and the Action method.

public ActionResult ExportToPdf(int caseId, string caseNo)
{
    var rd = new ReportDocument();
    var server = @"SERVERNAME\SQLEXPRESS";
    var database = @"XYZ";

    rd.Load(Path.Combine(Server.MapPath("~/Reports"), "reportName.rpt"));
    rd.DataSourceConnections[0].SetConnection(server, database, "abc", "dbPassword");
    Response.Buffer = false;
    Response.ClearContent();
    Response.ClearHeaders();

    var stream = rd.ExportToStream(CrystalDecisions.Shared.ExportFormatType.PortableDocFormat);
    stream.Seek(0, SeekOrigin.Begin);
    return File(stream, "application/pdf", String.Concat(caseNo,DateTime.Now.ToShortDateString(), ".pdf"));
}

 

@(Html.Kendo().Grid<IMCC.CTS.Models.CaseMasterViewModel>()
    .Name("caseSearchGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.case_number).Width(105);
        columns.Bound(c => c.note_number).Width(105);
        columns.Bound(c => c.title).Width(300);
        columns.Bound(c => c.instituion_date).Width(115);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.id))
        .Read(read => read.Action("Search_Read", "Search").Data("GetSearchData"))
    )
)

 

01.@(Html.Kendo().ContextMenu()
02.    .Name("menu")
03.    .Target("#caseSearchGrid")
04.    .Filter("tr[role = 'row']")
05.    .Events(ev => { ev.Select("onSelect"); })
06.    .Orientation(ContextMenuOrientation.Vertical)
07.    .Animation(animation =>
08.    {
09.        animation.Open(open =>
10.        {
11.            open.SlideIn(SlideDirection.Down);
12.            open.Duration(250);
13.        });
14.    })
15.    .Items(items =>
16.    {
17.        items.Add().Text("Export").Action("ExportToPdf", "Search", new { caseId = 1, caseNo = " abc"}); //here grid's selected Model's id or row's id and selected row's case_number should be passed.
19.items.Add().Text("Export to PDF 2").Encoded(false).HtmlAttributes(new { id = "ExportToPdf2" }); // i can send this data through Ajax call, but that does not allow returning PDF from the action method.
20.    })
21.)

[Preslav]

Hello Wasim,

Based on your post I believe that you are looking for a way to get the data from the clicked row in the context menu. Please correct me if I am wrong.

If this is the case, handle the select event (I see that you are already doing that). In the event handler, based on the e.target get the dataItem of the relevant row. For example, check the JavaScript of this KB article:

• https://docs.telerik.com/kendo-ui/knowledge-base/use-context-menu-over-grid-row

Regards,
Preslav
Progress Telerik

[GPC]

Hi Preslav,

Thanks for taking time to answer my question.

I am already able to get the current row's dataItem from the OnSelect event of Context Menu. No problem there. 

My problem is that I need to pass this information as a `routevalues` of context menu's Action method (as I have mentioned in the comments of ContextMenu's code in my original question). Posting same code below for your reference.

@(Html.Kendo().ContextMenu()
    .Name("menu")
    .Target("#caseSearchGrid")
   .Filter("tr[role = 'row']")
    .Events(ev => { ev.Select("onSelect"); })
    .Items(items =>
    {
        items.Add().Text("Export").Action("ExportToPdf", "Search", new { caseId = 1, caseNo = " abc"});
        //here grid's selected Model's id or row's id and selected row's case_number should be passed.
       items.Add().Text("Export to PDF 2").Encoded(false).HtmlAttributes(new { id = "ExportToPdf2" });
       // i can send this data through Ajax call, but that does not allow returning PDF from the action method.
    })
)

[Joana]

Hi Wasim,

In order to pass the selected row's dataItem of the Grid to the controller for the specific ContextMenu item selected, I could think of two approaches:

1. Perform an ajax request on Context Menu Item selection and pass the required data to the server. I suppose that you are aware of this approach as you have mentioned in a comment that you have already tried it. But if i understand correctly, this approach interfere the export to pdf functionality of your project. 

2. Store the required fields of the dataItem in a HiddenField. This way you will be able to change its value on the client-side on open of the ContextMenu. 

Please, give a try the approach with hidden field and let me know if it fits your scenario.

Regards,
Joana
Progress Telerik

[GPC]

Hi Joana,

You understanding about my problem with Ajax is correct i.e. PDF can't be downloaded from the server if the action method is called from an .Ajax call.

Can you please guide me on how can I implement the 2nd approach? I mean, the dataItem will differ against each row of the grid. So how can I store this information in hidden field and access on the context menu click?

regards,

Wasim

[Joana]

Hello Wasim,

After further digging into the scenario, I would suggest as an easiest approach to change directly the href attribute of the menu. So, the code would look like something as follows:

@(Html.Kendo().ContextMenu()
    .Name("menu")
    .Target("#caseSearchGrid")
    .Filter("tr[role = 'row']")
    .Events(ev => { ev.Open("onOpen"); })
    .Orientation(ContextMenuOrientation.Vertical)
    .Items(items =>
    {
        items.Add().Text("Export").Action("ExportToPdf", "Search", new { caseId = 1, caseNo = " abc" });
        items.Add().Text("Export to PDF 2").Encoded(false).HtmlAttributes(new { id = "ExportToPdf2" });
    })
)

<script>
    function onOpen(e) {
        var row = $(e.target);
        var dataItem = $("#caseSearchGrid").data("kendoGrid").dataItem(row);
        var caseId= dataItem.CaseId;
        var caseNo= dataItem.CaseNo;
        e.sender.element.find(".k-menu-link:first").attr("href", "Search/ExportToPdf?caseId=" + caseId+ "&caseNo=" + caseNo);
    }
</script>

Let me know what you think of this approach as any other approach might not fit to the described use case.

Regards,
Joana
Progress Telerik

[GPC]

Hi Joana,

Appreciate your help here. This worked like a charm!

Thanks,

Wasim