We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to show dialog box after returning from controller's action method.

Hello,

I recently started using syncfusion grid and not able to figure out how to show a dialog box after any insert ,delete or update event. I am using InertURL ,UpdateURL and RemoveURL function to save data to my database. i am looking for something like Ajax onSuccess() method which gets triggered after a ajax call. how do i achieve this  using syncfusion InsertUrl() and other methods.
this is how my grid looks like.

 @(Html.EJ().Grid<Designation>("FlatGrid")
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).InsertURL(Url.Action("DialogInsert", "DesignationMaster", null, Request.Url.Scheme)).UpdateURL(Url.Action("UpdateQuestion", "DesignationChange", null, Request.Url.Scheme)).RemoveURL("DeleteQuestion").Adaptor(AdaptorType.RemoteSaveAdaptor))
        .EnableAltRow()
        .AllowFiltering()
        .AllowSorting()
        .GridLines(GridLines.Horizontal)
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().ShowConfirmDialog(true).EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })
        .ContextMenuSettings(contextMenu =>
        {
            contextMenu.EnableContextMenu();

        })
         .PageSettings(page =>
         {
             page.PageSize(15);
         })
         .AllowTextWrap()
         .AllowResizeToFit()
         .EnableHeaderHover()
         .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
         .AllowPaging()
         .ClientSideEvents(eve =>
         {
      
             eve.ActionComplete("complete");
             eve.RecordClick("recordClick");
             eve.RecordDoubleClick("recordDoubleClick");       
             eve.ActionBegin("beginAction");

         })
         .ToolbarSettings(toolbar =>
         {
             toolbar.ShowToolbar().ToolbarItems(items =>
             {
                 items.AddTool(ToolBarItems.Add);
                 items.AddTool(ToolBarItems.Edit);
                 items.AddTool(ToolBarItems.Delete);
                 items.AddTool(ToolBarItems.Update);
                 items.AddTool(ToolBarItems.Cancel);
                 items.AddTool(ToolBarItems.Search);
             });
         })
         .Columns(col =>
         {

             col.Field(p => p.designationCode).HeaderText("Designation Code").IsPrimaryKey(true).TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Width(70).Add();
             col.Field(p => p.description).HeaderText("Description").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();
             col.Field(p => p.salaryDesc).HeaderText("Salary Type").EditType(EditingType.Dropdown).Width(65).Add();
             col.Field(p => p.salaryCode).HeaderText("Salary Type").EditType(EditingType.Dropdown).Width(65).Visible(false).Add();

             col.Field(p => p.normalWokringHrs).HeaderText("Salary Type").Width(65).Visible(false).Add();
             col.Field(p => p.ramadanWorkingHrs).HeaderText("Salary Type").Width(65).Visible(false).Add();
             col.Field(p => p.dailyRate).HeaderText("Salary Type").Width(65).Visible(false).Add();
             col.Field(p => p.hourlyRate).HeaderText("Salary Type").Width(65).Visible(false).Add();

             col.Field(p => p.otAllowed).HeaderText("O.T.").Width(40).EditType(EditingType.Boolean).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();
             col.Field(p => p.jobCategoryCode).HeaderText("JCC").EditType(EditingType.Dropdown).Width(55).Add();

             col.Field(p => p.jobCategoryDesc).HeaderText("JCD").Width(85).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();
         })


        )

and this is my dialog box

 <div class="control">

            @(Html.EJ().Dialog("ErrorList").ShowOnInit(false)
        .ContentTemplate(
            @<div class="cnt">
                Do you really leave the session?
            </div>
            )
        .Title("Error List")
        .Animation(animate => animate.Show(show => show.Duration(500).Effect("slide")).Hide(hide => hide.Duration(500).Effect("fade")))
        .ShowFooter().FooterTemplateId("sample")
            )

        </div>


my controller returns a Serialized list of errors if some error occurs while performing server side operation. please tell me where should i write $("#ErrorList").ejDialog("open") function in script to show these errors.

Thanks.



1 Reply

MS Mani Sankar Durai Syncfusion Team November 11, 2016 08:34 AM UTC

Hi Fit, 
 
 
Thanks for contacting Syncfusion support. 
 
 
We have analyzed your query and we can achieve it by using actionComplete and actionFailure event in grid.  
 
It is possible to intercept the response to Update, Remove and Insert operations in actionComplete event of grid which is similar to success action of grid.  
 
ActionComplete event will be triggered after the CRUD operation is successful whereas the ActionFailure event will be triggered after the failure/exception in CRUD operation. 
 
So, if you would like to perform any action based on success/failure, you can mention them in ActionComplete and ActionFailure separately. From there you can able to open the dialog. 
 
Please refer the below code example. 
 
[OrdersTable/Index.cshtml] 
 
@(Html.EJ().Grid<object>("Grid") 
           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/OrderTables/Update") 
                               .InsertURL("/OrderTables/Insert").RemoveURL("/OrderTables/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                            .ClientSideEvents(eve => { eve.ActionFailure("Failure").ActionComplete("complete"); }) 
        .AllowPaging() 
 
})) 
 
<script type="text/javascript"> 
    function complete(args) { 
        if(args.requestType == "save") 
        $("#ErrorList").ejDialog("open") 
    } 
    function Failure(args) { 
        if (args.requestType == "save") 
        $("#ErrorList").ejDialog("open") 
        var str = ""; 
        str = args.error.statusText; 
        alert(str); 
    } 
</script> 
 
 
 
 
From the above code example we have applied the model state validation for the columns in grid. 
 
So that when it gets failed and returns error we can tends to trigger actionFailure event. 
 
For your convenience we have prepared a sample that can be downloaded from the below link. 
 
 
Also please refer the documentation link about actionComplete and actionFailure event. 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Manisankar Durai. 
 
 
 


Loader.
Up arrow icon