How do I get my selected GridView rows into a Javascript variable?

Question

I use ASP.NET C# MVC3 with razor templates and I want to know the following:

I have a DevExpress GridView in which I can select rows.
When selected, I want to pass them into a Javascript variable. How do I do this?
And what if I have selected multiple rows at the same time, can I get them in an array or something?

Edit: Thank you for the comment, I now have the following 'JQuery' function:

$(function () { // Verwijder functie
    $('#select').click(function () {
        var Delete = confirm("Weet u zeker dat u de geselecteerde records wilt verwijderen?");
        if (Delete) {
            //Verwijder Funtie
            var test = ;
            alert(test);
        } else {
            //Niks
        }
    });
});

I need to get the Id of the selected rows into the variable 'test', I tried it with GetSelectedFieldValuesCallback and GetSelectedFieldValues. But this is not working as I'm expecting. If someone can provide some example I would really appreciate that.

score 7 · Accepted Answer · answered May 03 '12 at 10:48

There is a surprising lack of examples for one of the most basic operations of a grid. Especially if you want to send rows back to the server for further processing.

The problem with grid.GetSelectedFieldValues() is that it generates a postback. Meaning you would need a second postback to actually send data back to the server.

The most elegant solution I was able to achieve is to use grid.GetSelectedKeysOnPage(). This will return selected key fields defined through settings.KeyFieldName = "Id";

the view which will display your grid.

<script type="text/javascript">
    $(function () {
        $('#btn1').click(function () {
            simpleGrid.PerformCallback();
        });
    });
    function OnBeginCallback(s, e) {
        var selectedValues = s.GetSelectedKeysOnPage();
        e.customArgs["Id"] = "";
        for (var i = 0; i < selectedValues.length; i++) {
            e.customArgs["Id"] += selectedValues[i] + ',';
        }
    }
</script>
@Html.Partial("ProductsPartial", Model.Data)
<div id="btn1">
    btn
</div>

It is important that you create your grid in a separate partial view (don't know why, but that is what it says on the devexpress page.

The "ProductsPartial" partial view:

@Html.DevExpress().GridView(
        settings =>
        {
            settings.Name = "simpleGrid";
            settings.KeyFieldName = "Id";
            settings.CallbackRouteValues = new { Controller = "yourController", Action = "Postback" };
            settings.SettingsText.Title = "simpleGridWithPostback";
            settings.Settings.ShowTitlePanel = true;
            settings.Settings.ShowStatusBar = GridViewStatusBarMode.Visible;
            settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords;
            settings.SettingsPager.AllButton.Text = "All";
            settings.SettingsPager.NextPageButton.Text = "Next &gt;";
            settings.SettingsPager.PrevPageButton.Text = "&lt; Prev";
            settings.Width = new System.Web.UI.WebControls.Unit(200);
            settings.Columns.Add("Id");
            settings.Columns.Add("Name");
            settings.CommandColumn.Visible = true;
            settings.CommandColumn.ShowSelectCheckbox = true;
            settings.ClientSideEvents.BeginCallback = "OnBeginCallback";
        }).Bind(Model).GetHtml()

And finally the controller in which you can process the data

public ActionResult Postback()
{
    String data = Request["Id"];
}

This way you can process all the data you want server side

I do not agree with your solution fully.Because as per [GetSelectedFieldsOnPage](https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedKeysOnPagetopic) _and my own testing with this function_, it only selects rows which are selected on that page. For example, if your grid show records in 15 pages marked by pageSize, then you will only get selected rows of first page. What if you need to get selected rows on all pages, then you will need that function **GetSelectedFieldValues**. — Vikram Singh Saini, Mar 01 '14 at 05:01

score 3 · Answer 2 · edited Aug 07 '14 at 17:05

I have found the solution. The following function provides the data I want:

$(function () {
    $('#select').click(function () {
        Index.GetSelectedFieldValues("Id", OnGetSelectedFieldValues);
    });
});

function OnGetSelectedFieldValues(result) {
    for (var i = 0; i < result.length; i++){
            alert(result[i]);
        }
}

For people who had/have the same problem.

Change "Index" in

Index.GetSelectedFieldValues("Id", OnGetSelectedFieldValues);

to whatever you named your gridview, and change "Id" to the column you want to get.

You can also get multiple data from a single row, to do this you need to add another for-loop in the function OnGetSelectedFieldValues(result) as following:

function OnGetSelectedFieldValues(result) {
    for (var i = 0; i < result.length; i++)
        for (var j = 0; j < result[i].length; j++) 
            alert(result[i][j]);
        }
}

You wil also need to change the getter as following

Index.GetSelectedFieldValues("Id;YOUROTHERCOLUMN", OnGetSelectedFieldValues);

I hope this will help in the future for other users.

How do I get my selected GridView rows into a Javascript variable?

2 Answers2

Linked