Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
715
Get primary keys of multiple selected rows on button click
posted

I want to enable mutiple selection on my grid and I want to get the primary keys of the multiple selected rows which I want to pass down to my controller's ActionMethod.

-------------------------------------------------------------------------------------------------------------------

In single selection i used this method to get the primary key of my selected row:

 

//
    function rowSelectionChangedHandler(evt, ui) {
        var input = document.getElementById("hdnSelectedRow");
        //input.value = ui.row.index;    //    Will pass the row index.
        input.value = ui.row.element.attr("data-id");    //    Will pass the row's primary key..
    }
// ]]>

------------------------------------------------------------------------------------------------------

Now how do i get all the primary keys of the selected rows and get them as parameters in my mvc controller's action method.

And is there a way to pass all the primary keys of selected rows by storing them in a single hidden field like i did for single selection ? Because i dont wan to use ajaxPost to send these value to my actionmethod because it would get messy afterwards. iPlease share a small code snippet, thanks in advance



  • 20255
    Verified Answer
    Offline posted

    Hello,

     Thank you for contacting us!

     About your questions, how to get all primary keys of the selected rows, and pass them to action method, my suggestion is to use BeginForm and HiddenField. On Postback this BeginForm with call your action method and will pass like a parameter all primary keys of the selected rows. I have created a sample for you in order to show you this approach, on the page you can see Grid with products and a button which will invoke postback and will call your action method. In order to get the selected rows I use grid selection option "selectedRows".

    Code snippet (View):

    1. @using (Html.BeginForm("GetIDs", "Home"))
    2. {
    3.  
    4.     @(Html.Infragistics()
    5.     .Grid(Model).ID("grid1")
    6.     .Width("800px")
    7.     .PrimaryKey("ProductId")
    8.     .AutoGenerateColumns(false)
    9.     .Columns(col =>
    10.         {
    11.             col.For(c => c.ProductId).HeaderText("ID").Width("200px");
    12.             col.For(c => c.Name).HeaderText("Name").Width("200px");
    13.             col.For(c => c.Cost).HeaderText("Cost").Width("200px");
    14.             col.For(c => c.Distributor).HeaderText("Distributor").Width("200px");
    15.         }
    16.     )
    17.     .Features(feautures =>
    18.     {
    19.         feautures.Selection()
    20.             .Mode(SelectionMode.Row)
    21.             .MultipleSelection(true);
    22.     })
    23.     .DataBind()
    24. .Render())
    25.  
    26.  
    27.     <input id="getThemAllBtn" type="submit" value="Get them all!!!" />
    28.  
    29. @* --- Hidden field --- *@
    30.  
    31.     @(Html.Hidden("selectedRowsPKs"))
    32.  
    33. }
    34.  
    35. <script>
    36.     $(function () {
    37.         $("#getThemAllBtn").click(function () {
    38.             var rows = $('#grid1').igGridSelection('selectedRows');
    39.             var ids = [rows.length];
    40.  
    41.             for (var i = 0; i < rows.length; i++) {
    42.                 ids[i] = rows[i].id;
    43.             }
    44.  
    45.             $("#selectedRowsPKs").val(ids);
    46.         });
    47.     });
    48. script>

    Code snippet (Controller):

    1. [HttpPost]
    2.         public ActionResult GetIDs(FormCollection collection)
    3.         {
    4.             Infragistics.Web.Mvc.GridModel m = new Infragistics.Web.Mvc.GridModel();
    5.             //Set breakpoint here 
    6.             string[] selectedPKs = collection.Get("selectedRowsPKs").Split(',');
    7.  
    8.             // Custom code adding the new or editted elements to the database
    9.             return View("Index");
    10.         }

    Useful references:

    https://www.igniteui.com/help/14.1/iggrid

    https://www.igniteui.com/help/api/2014.1/ui.iggrid#options

    If I can be of further assistance, contact me.

    GridMultipleSelection.zip