1. Home
  2. Forum
  3. ASP.NET MVC
  4. Customizing Search result grid and Notify user after Saving Appointment

Customizing Search result grid and Notify user after Saving Appointment

Hello there, I got 2 questions related to Schedule.

1. I have a Schedule search result grid as described in Syncfusion's Online Documentation as follows. (https://help.syncfusion.com/aspnetmvc/schedule/working-with-appointments#search-or-filter-appointments)



Please note that I've added custom fields "RegistrationID" and "Email".
I want to customize the search result grid so that it does not display columns like Category, Location, Recurrence, AppTask, ParentID and GUID.
How can I do this?

2. I want to show an action result as a message(e.g. "Save success", "Delete Failed") to the user after an appointment gets successfully created, updated or deleted.
I've thought about a couple ways to do this and one way was to store the "message" onto a ViewBag and display it on the front end view after CRUD action.
However, this wasn't successful.

.AppointmentSettings(fields => fields.Datasource(datasource => datasource.URL("/ELLCalendar/GetAppointmentsAsync").BatchURL("/ELLCalendar/Crud").InsertURL("/ELLCalendar/Add").UpdateURL("/ELLCalendar/Update").RemoveURL("/ELLCalendar/Remove").Adaptor(AdaptorType.UrlAdaptor))

After executing UpdateURL("/ELLCalendar/Update") or BatchURL("/ELLCalendar/Crud"), it doesn't refresh/reloads the page (neither put/post).
So I am unable to pass a string through ViewBag to the front end view.

OR

I was thinking if there is a way to use a Javascript alert to notify the result of the action to the users, but I couldn't figure out how to make this work either.


 

3 Replies
NR Nevitha Ravi Syncfusion Team October 23, 2017 12:42 PM UTC

Hi Andrew, 
  
Thank you for contacting Syncfusion Support. 
  
 Q1: Customizing Search result grid : 

We can customize the search result of grid with specific columns alone by making use of the columns property. Kindly refer the below sample and UG links for your reference.

http://jsplayground.syncfusion.com/iwac3wrs

UG Link: https://help.syncfusion.com/api/js/ejgrid#members:columns

<Code>

function showResult(list, searchString) { 
        if (!ej.isNullOrUndefined(list) && list.length != 0 && searchString != "") { 
            $("#Schedule1").find(".e-datecommondiv").hide() && $("#Schedule1").find(".e-scheduleheader").next().hide() && $("#Schedule1").find(".e-scheduleheader").next().next().hide() && $("#Schedule1").find(".e-viewsdiv").css("visibility", "hidden"); 
            $("#grid1").show(); 
            $("#grid1").data("ejGrid") && $("#grid1").ejGrid("destroy"); 
            $("#grid1").ejGrid({ 
                dataSource: list, 
                allowPaging: true, 
                columns: [ 
                 { field: "Id", headerText: "ID", isPrimaryKey: true }, 
                 { field: "Subject", headerText: "Subject" }, 
                 { field: "StartTime", headerText: "StartTime" }, 
                 { field: "EndTime", headerText: "EndTime" }], 
                pageSettings: { pageSize: 10 }, 
                recordDoubleClick: "detailsClick" 
            }); 
            $("#grid1").find("div.e-prev").removeClass("e-prev"); 
        } 
        else 
            $("#Schedule1").find(".e-datecommondiv").show() && $("#Schedule1").find(".e-scheduleheader").next().show() && $("#Schedule1").find(".e-scheduleheader").next().next().show() && $("#grid1").hide() && $("#Schedule1").find(".e-viewsdiv").css("visibility", ""); 

    }

</Code>

Q2: Notify Users on CRUD Actions

We have prepared a workaround sample to achieve your requirement “to show action result on appointment save, edit and delete” which can be downloaded from the below location.

http://www.syncfusion.com/downloads/support/forum/133281/ze/sample-1937507072

Kindly refer the below code to show the action results.

    $(function () { 
        var dataManager = ej.DataManager({ 
            url: "/Home/GetData", 
            adaptor: new ej.UrlAdaptor() 
        }); 
 
        $("#Schedule1").ejSchedule({ 
            currentView: "month", 
            currentDate: new Date(2016, 10, 29), 
            appointmentSettings: { 
                dataSource: dataManager, 
                id: "Id", 
                subject: "Subject", 
                startTime: "StartTime", 
                endTime: "EndTime", 
                startTimeZone: "StartTimeZone", 
                endTimeZone: "EndTimeZone", 
                allDay: "AllDay", 
                recurrence: "Recurrence", 
                recurrenceRule: "RecurrenceRule" 
            }, 
            beforeAppointmentCreate: "onCRUDActions", 
            beforeAppointmentChange: "onCRUDActions", 
            beforeAppointmentRemove: "onCRUDActions" 
 
        }) 
    }); 
 
    function onCRUDActions(args) { 
        args.cancel = true; var UserData; 
        if (args.currentAction == "add" || args.type == "beforeAppointmentCreate") { 
            var appoint = []; 
            appoint[0] = !(ej.isNullOrUndefined(args.appointment[0])) ? args.appointment[0] : args.appointment; 
            UserData = { "added": appoint, "changed": null, "removed": null }; 
        } 
        else if (args.currentAction == "edit" || args.currentAction == "editSeries") { 
            var appoint = []; 
            if (args.currentAction == "editSeries") { 
                var app = new ej.DataManager(this._currentAppointmentData).executeLocal(new ej.Query().where("ParentId", ej.FilterOperators.equal, args.appointment.changed[0].ParentId)); 
                for (var i = 0 ; i < app.length ; i++) { 
                    if (app[i][this._appointmentSettings["recurrenceRule"]].indexOf("RECUREDITID") != -1) { 
                        appoint.push(app[i]); 
                    } 
                } 
            } 
            UserData = { "added": null, "changed": args.appointment.changed, "removed": (appoint.length > 0) ? appoint : null }; 
        } 
        else if (args.currentAction == "delete" || args.currentAction == "deleteSeries") { 
            var appoint = new ej.DataManager(this._currentAppointmentData).executeLocal(new ej.Query().where("ParentId", ej.FilterOperators.equal, args.appointment.ParentId)); 
            UserData = { "added": null, "changed": null, "removed": appoint }; 
        } 
        else if (args.currentAction == "editOccurrence") { 
            var appoint = new ej.DataManager(this._currentAppointmentData).executeLocal(new ej.Query().where("ParentId", ej.FilterOperators.equal, args.appointment.changed[0].ParentId)); 
            args.appointment.changed[0]["Recurrence"] = true; 
            UserData = { "added": args.appointment.changed, "changed": appoint, "removed": null }; 
        } 
        else if (args.currentAction == "deleteOccurrence") { 
            var appoint = new ej.DataManager(this._currentAppointmentData).executeLocal(new ej.Query().where("ParentId", ej.FilterOperators.equal, args.appointment.ParentId)); 
            UserData = { "added": null, "changed": appoint, "removed": null }; 
        } 
 
        $.ajax({ 
            url: '/Home/CRUD/', 
            data: JSON.stringify(UserData), 
            type: 'POST', 
            traditional: true, 
            contentType: 'application/json', 
            success: function (data) { 
                if (data.status && data.status != "") { 
                    var obj = $("#Schedule1").data("ejSchedule"); 
                    obj.refreshAppointments(); 
                    alert(data.status); 
                } 
            }, 
            failure: function (data) { 
                alert("Failure occurred") 
            }, 
            error: function (data) { 
                alert("Error Occurred") 
            } 
        }); 

    }

Controller:

  [HttpPost] 
       public JsonResult CRUD(BatchData userdata) 
        { 
            var status = ""; 
            if (userdata.added.Count > 0) 
            { 
                var value1 = userdata.added[0]; 
                int intMax = db.ScheduleDatas.ToList().Count > 0 ? db.ScheduleDatas.ToList().Max(p => p.Id) : 1; 
                DateTime startTime = Convert.ToDateTime(value1.StartTime); 
                DateTime endTime = Convert.ToDateTime(value1.EndTime); 
                var currentTimeZone = TimeZone.CurrentTimeZone; 
                ScheduleData appoint = new ScheduleData() 
                { 
                    Id = intMax + 1, 
                    StartTime = startTime, 
                    EndTime = endTime, 
                    StartTimeZone = value1.StartTimeZone, 
                    EndTimeZone = value1.EndTimeZone, 
                    Subject = value1.Subject, 
                    Recurrence = value1.Recurrence, 
                    AllDay = value1.AllDay, 
                    RecurrenceRule = value1.RecurrenceRule 
                }; 
                db.ScheduleDatas.InsertOnSubmit(appoint); 
                db.SubmitChanges(); 
                status = "Appointment inserted successfully"; 
            } 
            if (userdata.removed.Count > 0) 
            { 
                foreach (var apps in userdata.removed) 
                { 
                    ScheduleData app = db.ScheduleDatas.Where(c => c.Id == apps.Id).FirstOrDefault(); 
                    if (apps != null) db.ScheduleDatas.DeleteOnSubmit(app); 
                } 
                db.SubmitChanges(); 
                status = "Appointment Removed successfully"; 
            } 
            if (userdata.changed.Count > 0) 
            { 
                var value = userdata.changed[0]; 
                var filterData = db.ScheduleDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
 
                if (filterData.Count() > 0) 
                { 
                    DateTime startTime = Convert.ToDateTime(value.StartTime); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime); 
                    ScheduleData appoint = db.ScheduleDatas.Single(A => A.Id == Convert.ToInt32(value.Id)); 
                    appoint.StartTime = startTime; 
                    appoint.EndTime = endTime; 
                    appoint.Subject = value.Subject; 
                    appoint.StartTimeZone = value.StartTimeZone; 
                    appoint.EndTimeZone = value.EndTimeZone; 
                    appoint.Recurrence = value.Recurrence; 
                    appoint.AllDay = value.AllDay; 
                    appoint.RecurrenceRule = value.RecurrenceRule; 
                } 
                db.SubmitChanges(); 
                status = "Appointment Updated successfully"; 
            } 
            return Json(new { status = status }); 
        } 
        public class BatchData 
        { 
            public List<ScheduleData> added { get; set; } 
            public List<ScheduleData> changed { get; set; } 
            public List<ScheduleData> removed { get; set; } 

        }

Note: When deleting a single occurrence recurrence appointment , it will be consider as appointment update instead of delete action.

 

Regards,

 Nevitha 


AJ Andrew Jang October 23, 2017 09:53 PM UTC

Thank you, both solutions work!


KK Karthigeyan Krishnamurthi Syncfusion Team October 24, 2017 04:30 AM UTC

Hi Andrew, 
 
We are happy that our solution had fulfilled your requirement. 
 
Regards, 
Karthigeyan 



Loader.
Up arrow icon