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

7 posts, 1 answers
  1. GPC
    GPC avatar
    7 posts
    Member since:
    Jul 2018

    Posted 16 Sep 2018 Link to this post

    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.)
  2. Preslav
    Admin
    Preslav avatar
    511 posts

    Posted 18 Sep 2018 Link to this post

    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.
  3. GPC
    GPC avatar
    7 posts
    Member since:
    Jul 2018

    Posted 18 Sep 2018 in reply to Preslav Link to this post

    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

  4. Joana
    Admin
    Joana avatar
    205 posts

    Posted 18 Sep 2018 Link to this post

    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.
  5. GPC
    GPC avatar
    7 posts
    Member since:
    Jul 2018

    Posted 18 Sep 2018 in reply to Joana Link to this post

    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

  6. Answer
    Joana
    Admin
    Joana avatar
    205 posts

    Posted 20 Sep 2018 Link to this post

    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.
  7. GPC
    GPC avatar
    7 posts
    Member since:
    Jul 2018

    Posted 20 Sep 2018 in reply to Joana Link to this post

    Hi Joana,

    Appreciate your help here. This worked like a charm!

    Thanks,

    Wasim

Back to Top