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
close icon

Help with adding fields to the edit appointment window

Hello, I'm using Asp.Net core 1.1, I would like an example to implement an extra field in the edit appointment window. This field needs to be a select that gets its data from a viewbag from a model. Sorry for the bad grammar, english is my second lenguage.

3 Replies

NR Nevitha Ravi Syncfusion Team August 8, 2017 03:59 PM UTC

Hi Erick, 

Thank you for contacting Syncfusion Support. 

We have prepared the CRUD sample to customize the default  appointment window, which can be downloaded from the below link. 


<Code> 
var customDesign = "<tr class='customfields'><tr class='dropdownfield'><td class='e-textlabel'>Location</td><td><input type='text' id='Loc' name='Location' class='apploc' /></td></tr>"; 
            $("." + this._id + "parrow").after(customDesign); 
            var dataManager = ej.DataManager({ 
                url: "/Home/GetData", 
                crossDomain: true 
            }); 
            $("#Loc").ejDropDownList({ 
                dataSource: dataManager, 
                fields: { text: "Text", id: "Id", value: "Text" } 
            }); 
        } 
 
        if (!ej.isNullOrUndefined(args.appointment)) { 
            // if double clicked on the appointments, retrieve the custom field values from the appointment object and fills it in the appropriate fields. 
            this._appointmentAddWindow.find(".apploc").ejDropDownList("option", { value: args.appointment.Location }); 
        } 
        else { 
            // if double clicked on the cells, clears the field values. 
            this._appointmentAddWindow.find(".apploc").ejDropDownList("option", { value: "" }); 
        } 
</Code> 

Also, Kindly refer the below UG link for customizing default appointment window. 


Regards, 
Nevitha. 



ED Erick Del Castillo August 10, 2017 07:32 PM UTC

I'm sorry if my question seems dumb, but I can't see the extra field that is added via the java scritp function "onAppointmentWindowOpen", all I see is whats shown on the next image:


Is that correct? Shouldn't there be an extra drop down field called location with three options, "India", "USA", "London"?



KK Karthigeyan Krishnamurthi Syncfusion Team August 14, 2017 06:44 AM UTC

Hi Erick, 
 
Thanks for your update. 
 
We suspect that latest version source file is not used which could be the cause for the issue. We have checked the sample and drop down field is added in appointment window as shown below. 
 
 
 
<Code> 
var data=@Html.Raw(Json.Serialize(ViewBag.locData)); 
// This function executes before the appointment window gets opened. 
function onAppointmentOpen(args) {        
    if ($(".customfields").length == 0) { 
        var customDesign = "<tr class='customfields'><tr class='dropdownfield'><td class='e-textlabel'>Location</td><td><input type='text' id='Desc' name='Decsription' class='appDesc' /></td></tr>"; 
        $("." + this._id + "parrow").before(customDesign); 
        $("#Desc").ejDropDownList({ 
            dataSource: data, 
            fields: { text: "text", id: "id", value: "text" } 
        }); 
    } 
    else { 
        if (!ej.isNullOrUndefined(args.appointment)) { 
            // if double clicked on the appointments, retrieve the custom field values from the appointment object and fills it in the appropriate fields. 
            this._appointmentAddWindow.find(".appDesc").ejDropDownList("option", { value: args.appointment.Decsription }); 
 
        } 
        else { 
            // if double clicked on the cells, clears the field values. 
            this._appointmentAddWindow.find(".appDesc").ejDropDownList("option", { value: "" }); 
        } 
    } 
} 
function OnBeforeAppointmentCreate(args) { 
    this._appointmentAddWindow.find(".appDesc").ejDropDownList("option", { value: args.appointment.Decsription }); 
} 
</Code> 
 
Regards, 
Karthigeyan 



Loader.
Live Chat Icon For mobile
Up arrow icon