This is a migrated thread and some comments may be shown as answers.

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

6 Answers 1371 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GPC
Top achievements
Rank 1
GPC asked on 16 Sep 2018, 04:32 PM

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.)

6 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 18 Sep 2018, 10:46 AM
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:

Regards,
Preslav
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
GPC
Top achievements
Rank 1
answered on 18 Sep 2018, 11:45 AM

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.
    })
)

regards,

Wasim

0
Joana
Telerik team
answered on 18 Sep 2018, 03:26 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
GPC
Top achievements
Rank 1
answered on 19 Sep 2018, 03:31 AM

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

0
Accepted
Joana
Telerik team
answered on 20 Sep 2018, 06:02 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
GPC
Top achievements
Rank 1
answered on 20 Sep 2018, 09:39 AM

Hi Joana,

Appreciate your help here. This worked like a charm!

Thanks,

Wasim

Tags
Grid
Asked by
GPC
Top achievements
Rank 1
Answers by
Preslav
Telerik team
GPC
Top achievements
Rank 1
Joana
Telerik team
Share this question
or