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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127365 Nov 10,2016 04:37 AM Nov 11,2016 03:34 AM ASP.NET MVC 1
loading
Tags: Grid
FIT
Asked On November 10, 2016 04:37 AM

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.



Mani Sankar Durai [Syncfusion]
Replied On November 11, 2016 03:34 AM

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. 
 
 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;