Devexpress MVC5 Grid GetRowKey(e.visibleIndex) returns always null

Question

Hi everyone I am trying to get the primary key of the selected row to send it to the server later here is the code: This the mainpage

     <script type="text/javascript">
        function OnRowClick(s, e) {
        var grid = MVCxClientGridView.Cast(s);
        var key = grid.GetRowKey(e.visibleIndex);
        console.log(key);

        $.ajax({
          url: '@Url.Action("FundDetails", "Fund")',
          type: "POST",
          dataType: "text",
          traditional: true,
          data: { rowKey: key },
          success: function (data) {
          console.log(data);
          },
          error: function (xhr, textStatus, errorThrown) {
          alert('Request Status: ' + xhr.status + '; Status Text: ' + textStatus + 
          '; Error: ' + errorThrown);
          }
          });
           }
    </script>

<div>
@Html.Partial("_FundsList", Model)
</div>

And this is the partial view that contains the Grid

  @Html.DevExpress().GridView(settings =>
  {

  settings.Name = "FundGrid";
  settings.CallbackRouteValues = new { Controller = "Fund", Action = 
  "FundsList" };
  settings.Width = 450;
  settings.Columns.Add("codeIsin");
  settings.Columns.Add("fundLabel");
  settings.Columns.Add("variation");
  settings.Columns.Add("ClassNiv1");
  settings.SettingsBehavior.AllowSelectByRowClick = true;
  settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
  settings.ClientSideEvents.RowClick = "OnRowClick";
  }).Bind(Model).GetHtml()

the problem is that the key value is always null:

var key = grid.GetRowKey(e.visibleIndex); ==> always Null

PS : e.visibleIndex is not null.

Answer 1

The GetRowKey method explains how null value returned:

If the index passed via the visibleIndex parameter is wrong, or the ASPxGridBase.KeyFieldName property is not set, null is returned.

It is possible that you need to set KeyFieldName which refers to primary key and/or identity field (with unique value) in the GridView, like this example:

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "FundGrid";
    settings.CallbackRouteValues = new { Controller = "Fund", Action = "FundsList" };
    settings.Width = 450;
    settings.Columns.Add("codeIsin");
    settings.Columns.Add("fundLabel");
    settings.Columns.Add("variation");
    settings.Columns.Add("ClassNiv1");

    // set primary/identity key field to determine selected row index
    settings.KeyFieldName = "codeIsIn";

    settings.SettingsBehavior.AllowSelectByRowClick = true;
    settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
    settings.ClientSideEvents.RowClick = "OnRowClick";
}).Bind(Model).GetHtml()

Also you can put null value checking with if condition before executing AJAX call to ensure key field value passed properly:

var key = grid.GetRowKey(e.visibleIndex);

if (key != null)
{
    $.ajax({
        url: '@Url.Action("FundDetails", "Fund")',
        type: "POST",
        data: { rowKey: key },
        // other AJAX settings
        success: function (data) {
            // do something
        },
        error: function (xhr, textStatus, errorThrown) {
            // error handling
        }
    });
}