How to show message after saving grid information in controller

Question

Hello Community, I'm trying to show message after updating the grid information in controller. Here's my code

CSHTML

@(Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/MainPage/UrlDatasource").Adaptor("UrlAdaptor").UpdateUrl("/MainPage/Update"); }).ActionComplete("complete").Columns(col =>

 { col.Field("Id").HeaderText("Id").IsPrimaryKey(true).ValidationRules(new { required = true}).Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

 col.Field("UserName").HeaderText("UserName").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { 

edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Edit"}).Render())

I tried to use ActionComplete but it's not working

Controller

 public object UrlDatasource(DataManagerRequest dm)

        {
            string qs = "SELECT Id, UserName FROM dbo.sys_UsersProfile ORDER BY Id";
            if (dm.Take != 0)
            {
                qs = qs + " OFFSET " + dm.Skip + "ROWS FETCH NEXT " + dm.Take + " ROWS ONLY; ";
            }
            else
            {
                qs = qs + "; ";
            }
            DataSet data = CreateCommand(qs, cons);
            sys_UsersProfile = data.Tables[0].AsEnumerable().Select(r => new vw_UserAccount_DataInformation
            {
                Id = r.Field("Id"),
                UserName = r.Field("UserName"),
            }).ToList();  // Here we convert dataset into list
            IEnumerable DataSource = sys_UsersProfile;
            if (con.State != ConnectionState.Open)
                con.Open();
            SqlCommand comm = new SqlCommand("SELECT COUNT(*) FROM dbo.sys_UsersProfile", con);
            Int32 count = (Int32)comm.ExecuteScalar();
            con.Close();
            return Json(new { result = DataSource, count = count });
        }
        public class DataResult
        {
            public IEnumerable result { get; set; }
            public int count { get; set; }
        }
 public ActionResult Update(vw_UserAccount_DataInformation value)
        {
            SqlCommand cmd = new SqlCommand("update dbo.sys_UsersProfile set UserName=@UserName where Id=@Id", con);
            if (con.State != ConnectionState.Open)
                con.Open();
            cmd.Parameters.AddWithValue("@Id", value.Id);
            cmd.Parameters.AddWithValue("@UserName", value.UserName);
            cmd.ExecuteNonQuery();
            con.Close();
            return PartialView("_DialogEditPartialSelected_UserMaintenanceView", value);
        }

_DialogEditPartialSelected_UserMaintenanceView

I'm using a dialog template view to edit the datagrid

<h2>_DialogEditPartialSelected_UserMaintenanceView</h2>
<div>
    <div>
        <div class="form-group col-md-6">
           <div class="e-float-input e-control-wrapper">
                @Html.TextBox("Id", Model.Id.ToString(), new { disabled = true })
                <span class="e-float-line"></span>
                @Html.Label("Id", "Id", new { @class = "e-float-text e-label-top" })
            </div>
        </div>

        <div class="form-group col-md-6">
            <div class="e-float-input e-control-wrapper">
                @Html.TextBox("UserName", Model.UserName.ToString())
                <span class="e-float-line"></span>
                @Html.Label("UserName", "User Name", new { @class = "e-float-text e-label-top" })
            </div>
        </div>
    </div>
</div>
@Html.EJS().ScriptManager()

_DialogEditPartialSelected_UserMaintenanceView

@Html.TextBox("Id", Model.Id.ToString(), new { disabled = true }) @Html.Label("Id", "Id", new { @class = "e-float-text e-label-top" })

@Html.TextBox("UserName", Model.UserName.ToString()) @Html.Label("UserName", "User Name", new { @class = "e-float-text e-label-top" })

@Html.EJS().ScriptManager()

Ajith Govarthan · Answer

Hi Rica Jane,

Thanks for contacting Syncfusion support.

Based on your query, you want to show message after saving the record in the controller. So, we have shared the code example, in that we have used the actionComplete event to achieve your requirement. Using autoComplete event we have showed alert to message after saving the record in the controller side. Please refer the below code example for your reference.

Code Example:

@Html.EJS().Grid("CommandColumn").ActionComplete(“actionComplete”).DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Delete").Adaptor("UrlAdaptor"); }).Columns(col =>

{

col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

col.Field("CustomerID").HeaderText("Customer Name").Width("150").ValidationRules(new { required = true, minLength = 3 }).Add();

col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();

col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add();

}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true). Mode(Syncfusion.EJ2.Grids.EditMode.Dialog). Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

function actionComplete(args) {

if (args.requestType === 'save') {

alert('record saved');

}

</script>

Please get back to us if you need further assistance.

Regards,

Ajith G.

Rica · Answer

I have another problem about the layout of the dialog box how can I change the layout design from this unorganized dialog layout to this inline form layout

.cshtml

@(Html.EJS().Grid("Grid").DataSource(dataManager =>{ dataManager.Url("/MainPage/UrlDatasource").Adaptor("UrlAdaptor").UpdateUrl("/MainPage/Update");}).Columns(col =>
                                                                        { col.Field("Id").HeaderText("Id").IsPrimaryKey(true).ValidationRules(new { required = true }).Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("ApplicationId").IsPrimaryKey(true).HeaderText("Application Id").ValidationRules(new { required = true }).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("UserName").HeaderText("User Name").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("Password").HeaderText("Password").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("RecIdNo").HeaderText("Empl_RecIdNo").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("EmpNo").HeaderText("EmplIDNo").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("Account_Status").HeaderText("Account Status").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("Login_StatusCode").IsPrimaryKey(true).HeaderText("Login Status Code").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("LastLoginIn_Date").IsPrimaryKey(true).HeaderText("Last LoginIn Date").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("AccessLevel").HeaderText("AccessLevel").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();


                                                                        col.Field("IsAnonymous").HeaderText("Is Anonymous").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("FirstName").HeaderText("First Name").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("LastName").HeaderText("Last Name").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("MiddleName").HeaderText("Middle Name").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("State").HeaderText("State").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add()
                                                                        col.Field("Email").HeaderText("Email").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("EmailConfirmed").HeaderText("EmailConfirmed").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("SecurityStamp").HeaderText("SecurityStamp").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("PhoneNumber").HeaderText("PhoneNumber").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("PhoneNumberConfirmed").HeaderText("PhoneNumberConfirmed").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("CreatedDate").HeaderText("CreatedDate").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("Created_By").HeaderText("Created_By").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("ModifiedDate").HeaderText("ModifiedDate").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("Modified_By").HeaderText("Modified_By").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                                                                        col.Field("inWorkStation").HeaderText("inWorkStation").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();




                                                                    }).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Edit"}).Render())

Ajith Govarthan · Answer

Hi Rica, Thanks for the update. Based on your query, you want to show the dialog template inputs in inline format. By default, in our EJ2 Grid when you use the dialog template feature, the content of the dialog can be displayed as per the user needs. So, we have displayed the input elements in inline mode by rendering them under form rows. For your convenience we have attached the code example and demo of dialog template sample. Please refer them for your reference. Code Example: addTemplate.cshtml @using Syncfusion.EJ2

@Html.TextBox("OrderID") @Html.Label("OrderID", "Order ID", new { @class = "e-float-text e-label-top" })

@Html.TextBox("CustomerID") @Html.Label("CustomerID", "Customer ID", new { @class = "e-float-text e-label-top" })

@Html.EJS().NumericTextBox("Freight").Format("C2").Placeholder("Freight").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()

@Html.EJS().DatePicker("OrderDate").Placeholder("Order Date").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()

@Html.EJS().DropDownList("ShipCountry").Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).Placeholder("Ship Country").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource((IEnumerable

Rica · Answer

Hello, the problem is I can't render the partial view for the dialog box based on my sample code it only loads by using .Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); to use the dialog I can't use an ajax .Template("#dialogtemplate") to render a partial view I'm trying to use an Ajax call to load in partial views on click of a row within the grid however it seems the partial view is not rendering. What did I missed Index.cshtml@{ViewBag.Title = "DialogTemplateEdit"; } @using Syncfusion.EJ2 @Html.EJS().Grid("FlatGrid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").UpdateUrl("/Home/editpartial"); }).ActionComplete("actionComplete") .Columns(col => {col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(new { required = true, minLength = 3 }).Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("ShipCountry").HeaderText("Ship Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("ShipCity").HeaderText("Ship City").EditType("dropdownedit").Width("120").Add(); }). AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

In Index.cshtml view I used ajax to call the partial view editpartial.cshtml from the home folder however no rendering happens and it display nothing in the dialog template.This is the Partial View that is not renderingeditpartial.cshtml@model AspNetMvc5.Models.DialogTemplateModel @*//define the model for store the model values*@@using Syncfusion.EJ2 @Html.TextBox("OrderID", Model.OrderID.ToString(), new { disabled = true })@Html.Label("OrderID", "Order ID", new { @class = "e-float-text e-label-top" }) @Html.TextBox("CustomerID", Model.CustomerID.ToString())@Html.Label("CustomerID", "Customer Name", new { @class = "e-float-text e-label-top" }) @Html.EJS().NumericTextBox("Freight").Value(Model.Freight).Format("C2").Placeholder("Freight").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render() @Html.EJS().DatePicker("OrderDate").Value(Model.OrderDate).Placeholder("Order Date").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render() @Html.EJS().DropDownList("ShipCountry").Value(Model.ShipCountry).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).Placeholder("Ship Country").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource((IEnumerable)@ViewBag.datasource).Render() @Html.EJS().DropDownList("ShipCity").Value(Model.ShipCity).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCity", Value = "ShipCity" }).Placeholder("Ship City").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource((IEnumerable)@ViewBag.datasource).Render() @Html.TextArea("ShipAddress", Model.ShipAddress)@Html.Label("ShipAddress", "Ship Address", new { @class = "e-float-text e-label-top" }) @Html.EJS().ScriptManager()This is the sample output with .Template("#dialogtemplate")(It doesn't load the form inside of the partial view)

Pavithra Subramaniyam · Answer

Hi Rica, After validating the code, we found that you have missed to add the div element inside the dialog template element. So, we suggest you to add the element with “dialogTemp” id. Please refer to the below code example more information Please get back to us if you need further assistance on this. Regards, Pavithra S

Rica · Answer

Hello, I did

Pavithra Subramaniyam · Answer

Hi Rica, In the shared edit partial view, the type for “IEnumerable” is not set which is the cause of the issue. So, we suggest setting type “object” as given below. Please refer to the below code example and sample link for more information.

@Html.EJS().DropDownList("ShipCountry").Value(Model.ShipCountry).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).Placeholder("Ship Country").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource((IEnumerable

Rica · Answer

Hello, I did

@Html.EJS().DropDownList("ShipCountry").Value(Model.ShipCountry).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "ShipCountry", Value = "ShipCountry" }).Placeholder("Ship Country").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource((IEnumerable

Pavithra Subramaniyam · Answer

Hi Rica,

In your shared code we could see that you are using same URL for both updating the Grid (DataManager UpdateUrl) and fetching the edit partial view. So, we suspect that the reported issue may be not returning the proper value to the edit partial view from the controller. Please refer to the below code example for more information.

[HomeController]

namespace mvc_ej2.Controllers

{

public class HomeController : Controller

{

public static List<OrdersDetails> orddata = new List<OrdersDetails>();

public ActionResult Editpartial(DialogTemplateModel value)

{

ViewBag.datasource = orddata;

return PartialView("editpartial", value);

}

// for updating action

public ActionResult Update(CRUDModel<OrdersDetails> myObject)

{

. . .

return Json(ord.Value);

}

[index.cshtml]

@Html.EJS().Grid("FlatGrid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").UpdateUrl("/Home/Update"); }).ActionComplete("actionComplete").Columns(col =>

{

. . .

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).Template("#dialogtemplate"); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()

function actionComplete(args) {

if (args.requestType === 'beginEdit') {

var ajax = new ej.base.Ajax({

url: "/Home/editpartial",

type: "POST",

contentType: "application/json",

data: JSON.stringify({ value: args.rowData })

});

ajax.send().then(function (data) {

$("#dialogTemp").html(data); //Render the edit form with selected record

. . .

}).catch(function (xhr) {

console.log(xhr);

});

}

</script>

So, we recommend using the above controller code for partial view to overcome the issue. If you are still facing the issue kindly share the below details that will be helpful for us to provide a better solution as early as possible.

Share the Controller code for partial view
Is there any script error while editing?
Please share replication sample if possible

Regards,

Pavithra S

Rica · Answer

Hello,

I tried to use the example code however still no display form in my dialog template

Here's the sample source code: https://drive.google.com/file/d/1fE2V-uQAEh34y9nhA5rDL394Z6yfzru5/view?usp=sharing

Ajith Govarthan · Answer

Hi Rica, Thanks for the update. Based on your query, you are facing issues in displaying the form elements in the dialog template in your application. So, we checked your sample and found that you have not defined the script tag properly for dialog template to append the elements in dialog component. We also found that you have tried to update the dataSource with the editPartial method instead of using the updateURL method of the URL Adaptor. So, we have modified your attached sample and changed the above reported issues to bind the elements properly in the dialog template. For your convenience, we have attached the sample, please refer them for your reference. Code Example: Index.cshtml In your application you have not defined the script tag properly in the index page of your application. So, please update the changes as per the above code to bind the template properly in the Grid component. Editpartial.cshtml @model AspNetMvc5.Models.DialogTemplateModel @*//define the model for store the model values*@ @using Syncfusion.EJ2

// avoid using the script tag inside the edit or add partial page

@Html.TextBox("OrderID", Model.OrderID.ToString(), new { disabled = true }) @Html.Label("OrderID", "Order ID", new { @class = "e-float-text e-label-top" })

@Html.TextBox("CustomerID", Model.CustomerID) // avoid type casting for null values @Html.Label("CustomerID", "Customer Name", new { @class = "e-float-text e-label-top" })

Avoid using the script tag in the edit and add partial view pages of your Grid application and also avoid type casting the null values in the editpartial view pages HomeController.cs public ActionResult Update(DialogTemplateModel value) { SqlCommand cmd = new SqlCommand("update dbo.Orders set ShipCountry=@ShipCountry,ShipCity=@ShipCity where OrderID=@OrderID", con); if (con.State != ConnectionState.Open) con.Open(); cmd.Parameters.AddWithValue("@OrderID", value.OrderID); cmd.Parameters.AddWithValue("@ShipCountry", value.ShipCountry); cmd.Parameters.AddWithValue("@ShipCity", value.ShipCity); cmd.ExecuteNonQuery(); con.Close(); return Json(value); } public ActionResult Editpartial(DialogTemplateModel value) { return PartialView("editpartial", value); } Index.cshtml @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").UpdateUrl("/Home/Update"); }).ActionComplete("actionComplete").Columns(col => In your sample we found that you have tried to update the dataSource values in the edit partial method of the application. By default, in our EJ2 Grid you need to use the URL adaptor’s updateUrl method ( here you have used update method for updateUrl) to update the dataSource values in the Grid application. So, we suggest you update the dataSource in the update method of the controller and return the editPartial data alone in the editPartial method of the application. Please refer the blow attached sample for your reference. Sample-link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-748662520.zip Demo-Link: https://ej2.syncfusion.com/aspnetmvc/Grid/DialogTemplateEdit#/bootstrap5 Please get back to us if you need further assistance. Regards, Ajith G.