Open DevExpress MVC Grid in Edit Mode with Custom Edit Button

723 views Asked by At

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?

0

There are 0 answers