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