Loading selected GridView Item in Popup using CallBacks with ASP.Net MVC

Question

I still relatively new to ASP.Net and the concepts of communicating between client and server. I am using DevExpress tools but I believe this issue is more of a misunderstanding of the concept.

I have a GridView within a partial view that is loaded via an Action @Html.Action('MessageGridView'). This works no problem and data is loaded fine with the index and a returned model.

@Html.DevExpress().GridView(settings =>
{
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.Name = "preparedMessagesGrid";
    settings.CallbackRouteValues = new { Controller = "Messages", Action = "MessagesGridView" };
    settings.KeyFieldName = "Id";
    settings.SettingsBehavior.AllowSelectByRowClick = true;
    settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
    settings.ClientSideEvents.Init = "GridViewInit";
    settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
    settings.ClientSideEvents.BeginCallback = "OnBeginCallback";
    settings.SettingsBehavior.AllowEllipsisInText = true;
    settings.PreRender = settings.Init = (sender, e) =>
    {
        MVCxGridView gridView = sender as MVCxGridView;
        gridView.Selection.SelectAll();
    };
    settings.Columns.Add("Name");
    settings.Columns.Add("Description");
}).Bind(Model.preparedMessages).GetHtml()

What I am trying to achieve is when the user selects the row I wish the data to be loaded into the popup control when clicked. Is there a way I can set the parameters dynamically for the popup control callback?

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "pcModalMode";
    settings.Width = 100;
    settings.AllowDragging = true;
    settings.CloseAction = CloseAction.CloseButton;
    settings.CloseOnEscape = true;
    settings.PopupAnimationType = AnimationType.None;
    settings.HeaderText = "Login";
    settings.Modal = true;
    settings.PopupHorizontalAlign = PopupHorizontalAlign.WindowCenter;
    settings.PopupVerticalAlign = PopupVerticalAlign.WindowCenter;
    settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load", new { id = THIS NEEDS TO BE SELECTED ID VALUE} };
    settings.LoadContentViaCallback = LoadContentViaCallback.OnFirstShow;

}).GetHtml()

It works if I set the value static so I'm one step away from getting this working. What I have researched is that I can get the values from the GridView in javascript using the selection changed event.

function OnSelectionChanged(s, e) {   
    s.GetSelectedFieldValues("Id", GetSelectedFieldValueCallback);
}

I can then retrieve this value but can I set this to my popup control or am I misunderstanding being relatively new and possibly I could do this server side for when the ViewGrid callback is performed, then set it server side with a session of some sort?

Answer 1

You're just one step away to get currently selected grid value with this function:

function OnSelectionChanged(s, e) { 
    s.GetSelectedFieldValues('Id', GetSelectedFieldValueCallback);
}

What you need to do is declaring GetSelectedFieldValueCallback method as this (I got from a test that selectedValue contains array with single value for single grid row selection, use zero index to assign the value):

var id; // a global variable set to hold selected row key value from grid

function GetSelectedFieldValueCallback(selectedValue) {
    if (selectedValue.length == 0) 
        return;

    id = parseInt(selectedValue[0]);

    pcModalMode.PerformCallback();
}

Then setting BeginCallback on PopupControl helper as given below, note that for DevExpress HTML helpers you can use customArgs in client-side to pass action method parameters instead of using CallbackRouteValues with id parameter:

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "pcModalMode";

    // other stuff

    settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load" };
    settings.ClientSideEvents.BeginCallback = "OnPopUpBeginCallback";
    settings.ClientSideEvents.EndCallback = "OnPopUpEndCallback";

    // other stuff
}).GetHtml()

// JS function for popup callback
function OnPopUpBeginCallback(s, e) {
    e.customArgs["id"] = id; // this sends 'id' as action method parameter to `Load` action
}

// Optional end callback
function OnPopUpEndCallback(s, e) {
    if (!pcModalMode.IsVisible())
        pcModalMode.Show();
}

Finally, let's putting them all together in view & controller code:

View

<!-- View page -->
<script type="text/javascript">
    var id;

    function OnSelectionChanged(s, e) { 
        s.GetSelectedFieldValues('Id', GetSelectedFieldValueCallback);
    }

    function GetSelectedFieldValueCallback(selectedValue) {
        if (selectedValue.length == 0) 
           return;

        id = parseInt(selectedValue[0]);

        pcModalMode.PerformCallback();
    }

    function OnPopUpBeginCallback(s, e) {
        e.customArgs["id"] = id;
    }

    function OnPopUpEndCallback(s, e) {
        if (!pcModalMode.IsVisible())
            pcModalMode.Show();
    }
</script>

GridView (partial view)

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "preparedMessagesGrid";

    // other stuff

    settings.ClientSideEvents.SelectionChanged = "OnSelectionChanged";
}).Bind(Model.preparedMessages).GetHtml()

Popup (partial view)

@Html.DevExpress().PopupControl(settings =>
{
    settings.Name = "pcModalMode";

    // other stuff

    settings.CallbackRouteValues = new { Controller = "Messages", Action = "Load" };
    settings.ClientSideEvents.BeginCallback = "OnPopUpBeginCallback";
    settings.ClientSideEvents.EndCallback = "OnPopUpEndCallback";

    // other stuff
}).GetHtml()

Controller

public class Messages : Controller 
{
     public ActionResult MessagesGridView()
     {
         // grid view populating data code lines here
         return PartialView("_GridView", data);
     }

     public ActionResult Load(int id)
     {
         // code lines to find ID here
         return PartialView("_ModalPopup", model);
     }
}

References:

(1) Display GridView Row Details in PopupControl Window

(2) How to display detail data within a popup window (MVC)

(3) ASPxClientGridView.GetSelectedFieldValues (DevExpress Documentation)

(4) MVCxClientBeginCallbackEventArgs.customArgs (DevExpress Documentation)