2

I'm using the Devexpress MVC Grid and I've added two custom buttons (Edit & Copy) and I'm performing the operations. With copy button, I'm creating a new record with existing data and opening the grid in Add New Row Mode.

Following is the code:

@Html.DevExpress().GridView(grid =>
{
    grid.Name = "gvInformation";
    grid.SettingsDetail.AllowOnlyOneMasterRowExpanded = true;
   grid.SettingsEditing.Mode = GridViewEditingMode.EditForm;

    //Callback Events
    grid.CallbackRouteValues = new { Controller = "Case", Action = "InformationGridContent"};
    grid.SettingsEditing.AddNewRowRouteValues = new { Controller = "Case", Action = "AddInformationRecord" };
    grid.SettingsEditing.UpdateRowRouteValues = new { Controller = "Case", Action = "UpdateInformationRecord" };
    grid.SettingsEditing.DeleteRowRouteValues = new { Controller = "Case", Action = "DeleteInformationRecord" };
    grid.ClientSideEvents.BeginCallback = "BeginGridCallback";
    grid.BeforeGetCallbackResult = (sender, e) =>
    {
        MVCxGridView gridView = sender as MVCxGridView;
        if (isCopyRequired)
            gridView.AddNewRow();

        if (gridView.IsNewRowEditing)
        {
            gridView.SettingsText.CommandUpdate = Html.Raw("<span id='btnGridAdd'>Add</span>").ToHtmlString();
            gridView.SettingsText.CommandCancel = Html.Raw("<span id='btnGridCancel'>Cancel</span>").ToHtmlString();
        }

        if (!gridView.IsNewRowEditing)
        {
            gridView.SettingsText.CommandUpdate = Html.Raw("<span id='btnGridUpdate'>Update</span>").ToHtmlString();
            gridView.SettingsText.CommandCancel = Html.Raw("<span id='btnCancel'>Cancel</span>").ToHtmlString();
        }
    };

        //Custom Copy Record Button
    var btnCopy = new GridViewCommandColumnCustomButton { ID = "btnCopy" };
    btnCopy.Text = "<i class=\"fa fa-copy fa-lg\" title='Copy'></i>";
    grid.CommandColumn.CustomButtons.Add(btnCopy);

    //Custom Edit Button
    var btnEdit = new GridViewCommandColumnCustomButton { ID = "btnEdit" };
    btnEdit.Text = "<i class=\"fa fa-pencil fa-lg\" title='Edit'></i>";
    grid.CommandColumn.CustomButtons.Add(btnEdit);

    //Custom Button Events
    grid.ClientSideEvents.CustomButtonClick = "OnCustomButtonClick";
    grid.CustomActionRouteValues = new { Controller = "Case", Action = "CustomInformationRecord" };
    }

Client Side Events:

var buttonCommand;
function OnCustomButtonClick(s, e) {
    buttonCommand = e.buttonID;
    s.PerformCallback();
}

function BeginGridCallback(s, e) {
    //Grid Edit Button Click Event
    if (buttonCommand === "btnEdit") {
        e.customArgs["buttonCommand"] = "btnEdit";
    }

    //Grid Copy Button Click Event
    if (buttonCommand === "btnCopy") {
        e.customArgs["buttonCommand"] = "btnCopy";
    }
}

It is working fine for Copy button and opening the Grid in Edit Form Mode but when Edit Button is clicked it is not opening the Grid in Edit Mode. Is there something I'm missing?

Sahil Sharma
  • 1,813
  • 1
  • 16
  • 37
  • Are you got any errors in browser console? I think you should add `s.StartEditRow(e.visibleIndex)` to start editing rows - but I still not understand why `Copy` button opens the grid in edit mode without the command previously mentioned. – Tetsuya Yamamoto Nov 19 '18 at 09:53
  • No I'm not getting any errors. But when I added s.StartEditRow(e.visibleIndex) inside the if condition of BeginGridCallback(s, e), it throws an error that .toString() is not defined. – Sahil Sharma Nov 19 '18 at 10:33
  • Sounds like the problem is you're using `ASPxClientBeginCallbackEventArgs` handler instead of `ASPxClientGridViewCustomButtonEventArgs` which exists inside `OnCustomButtonClick`. if you want to open edit form after custom `Edit` button click, you should add `s.StartEditRow(e.visibleIndex)` inside `OnCustomButtonClick` function without calling entire grid callback. – Tetsuya Yamamoto Nov 21 '18 at 09:20

0 Answers0