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.

Answer 1

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 >";
            settings.SettingsPager.PrevPageButton.Text = "< 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

Answer 2

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.