Regarding kendoMVC multiSelect and Schedular

1 Answer 55 Views

MultiSelect Scheduler

vrajang asked on 31 May 2024, 03:17 PM

when i double click on an boxes on scheduler on the same page duplicate of kendo multiselects gets created right bellow the original one.

i am using the custom template for kendo template editable functionality to create an appointment .

inside CustomeditorTemplate there is another PO template is used to select multiple POS using multiselect

Code of index file :

------------------------------------------------------------------------------------------------------------------------------------------------

<div class="row" style="margin-bottom: 1%;">

<div class="col-5 ">
<div class="row " style=" float: left; padding: inherit;">
<div class="col-4 p-2" style="padding-left:0px"><a class="k-button k-button-icontext" style="background-color: #42B0C1; color: white; width: auto; " id="ViewAppt" href="/AMS/ConfrimedDeliveries">PO - Appointment List</a></div>

@if (IsInternalUser == true)
{

<div class="col-4 p-2"> <a class="k-button k-button-icontext" style="background-color: #ECB92B; color: white; " id="LoadingDocksScreen" href="/AMS_LoadingDock/Index"><span class="k-icon k-i-building-blocks"></span>Loading Docks</a></div>

<div class="col-4 p-2" style=" "> <a class="k-button k-button-icontext" style="background-color: #2B58EC; color: white; " id="dc24button" href="#">Loading Docks Screen</a></div>
}
</div>
</div>

@*<div class="col-2">
@(Html.Kendo().DropDownListFor(m=>m)
.Name("locations")
//.OptionLabel("All")
.OptionLabel("Select Plant")
.DataTextField("LocationName")
.DataValueField("LocationCode")
.Value(strLocationCode)
//.AutoBind(false)
.Events(e => e.Select("locationsChange"))
//.HtmlAttributes(new { style = "width: 150px;" })
.DataSource(ds =>
{
ds.Read("GetLocations", "AMS_LoadingDock");
})
.Deferred()
)
</div>*@
@*@(Html.Kendo().MultiSelect()
.Name("locations")
.Placeholder("Please select Plant")
.AutoClose(true)
.AutoWidth(true)
.TagMode(TagMode.Single)
//.do(true)
//.NoDataTemplateId("noDataTemplate")
.DataTextField("LocationName")
.Value(strLocationCode)
.Events(events => events.Change("locationsChange"))
.HtmlAttributes(new { style = "padding-right: 1%; width:13%;" })
.DataValueField("LocationCode")
.Filter("contains")
.DataSource(ds =>
{
ds.Read("GetLocations", "AMS_LoadingDock");
})
.Deferred())*@

<div class="col-7">

<div class="row" style=" padding: inherit;">

@(Html.Kendo().DropDownListFor(m=>m)
.Name("locations")
//.OptionLabel("All")
.OptionLabel("Select Plant")
.DataTextField("LocationName")
.DataValueField("LocationCode")
.Value(strLocationCode)
//.AutoBind(false)
.Events(e => e.Select("locationsChange"))
.HtmlAttributes(new { @class = "float-right p-2 col-3" })
.DataSource(ds =>
{
ds.Read("GetLocations", "AMS_LoadingDock");
})
.Deferred()
)
@(Html.Kendo().MultiSelectFor(m=>m)
.Name("Docks")
.Placeholder("Select Dock")
//.OptionLabel("All")
// .OptionLabel("Select Docks")
.TagMode(TagMode.Single)

.DataTextField("dockname")
.DataValueField("dockid")
.Enable(false)
//.AutoBind(false)
.Events(e => e.Change("DockChange"))

// .Events(e => e.Select("locationsChange"))
//.HtmlAttributes(new { style = "width: 150px;" })
//.DataSource(ds =>
//{
// ds.Read("GetLocations", "AMS_LoadingDock");
//})
.HtmlAttributes(new { @class = "float-right p-2 col-3" })
//.Filter("contains")
// .Events(e => e.Select("locationsChange"))

.DataSource(source =>
{

source.Read(read =>
{
read.Action("LoadingDocks_Read1", "AMS_LoadingDock")
.Data("filterDocks");
})
.ServerFiltering(false);
})
//.CascadeFrom("locations")
.Deferred())
@if (IsInternalUser == true)
{

@(Html.Kendo().MultiSelectFor(m=>m)
.Name("Suppliers")
.Placeholder("Select Supplier")
//.OptionLabel("All")
//.OptionLabel("Select Vendor")
.DataTextField("VendorNo")
.DataValueField("VendorNo")
.Enable(false)
.TagMode(TagMode.Single)
.Events(e => e.Change("SupplierChange"))
// .Events(e => e.Select("locationsChange"))
// .Events(e => e.Open("locationsChange"))

// .Value(strLocationCode)
//.AutoBind(false)
//.Events(e => e.Select("locationsChange"))
//.HtmlAttributes(new { style = "width: 150px;" })
//.DataSource(ds =>
//{
// ds.Read("GetLocations", "AMS_LoadingDock");
//})
.HtmlAttributes(new { style = "", @class = "float-right p-2 col-3" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ReadSuppliers", "AMSAppointments")
.Data("filterSuppliers");
})
.ServerFiltering(false);
})
//.CascadeFrom("locations")
.Deferred()
)
}

@if (IsInternalUser == true)
{
<div class="p-2 col-2">
<a class="k-button showConfigurations " style="background-color: white; color: grey; float: inline-end; " id="showConfigurations" href="#"><i class="bi bi-gear-fill"></i></a>  
<button class="k-button k-button-icontext " id="BlockTimeForDock" data-toggle="modal" data-target="#exampleModal" style="background-color: #E99414; color: white;" disabled>Block </button>
</div>

}

</div>

</div>

@*@if (canBookAppt == true)
{
<button class="k-button k-button-icontext"
style="background-color:#42B0C1; color: white;"
id="ExpectedDeliveryQueueBtn">
<i class="bi bi-calendar3"></i>Go to Expected Delivery Queue
</button>
}*@

</div>

<div id="schedulerContainer">
@(Html.Kendo().Scheduler<Fellowship.Models.Appointmentmodel>()
.Name("scheduler")
.Date(DateTime.UtcNow)
.Toolbar(x=>x.Pdf())

//.WorkDayStart(startTM, 00, 00)
//.WorkDayEnd(endTM, 00, 00)
.MinorTickCount(1)

.Views(views =>
{
views.DayView();
views.MonthView(month =>
{
month.Selected(true);
month.EventsPerDay(8);
month.EventHeight("auto");
month.AdaptiveSlotHeight(true);
month.EventSpacing(5);
});
})
.Messages(m => m.RecurrenceEditor(e => e.RecurrenceEditorTitle("View")))
.Messages(m => m.Editor(e => e.EditorTitle("Book Appointment")))

.DateHeaderTemplate("<strong>#=kendo.toString(date, 'dd<br> dddd')# </strong>")

.Height(650)
.AllDaySlot(false)
.AutoBind(false)
.EventTemplate("#if(!IsBlocked){# #if('" + IsInternalUser + "'=='True') {#<div class='background-lighter' style='background-color :#= Ldockcolorcode#;'></div><div style='height: #= BlurPercentage#% ;background-color :#= Ldockcolorcode#;'> #= VendorNo#  #= PODisplayInfo# </div>#} else{# <div> Location: #= locationCode#</div> #}# #}else{# <div class='background-lighter' style='background-color : grey;'></div>#}#")
//.EventTemplate("#if('" + IsInternalUser + "'=='True') {#<div style='font-weight: 600'> PO- #= POHeader#</div><div> Supplier- #= VendorNo# </div><div> Pallet- #= TotalNoOfPallets#</div>#} else{# <div style='font-weight: 600'> PO- #= POHeader#</div><div> Location- #= locationCode#</div><div> Pallet- #= TotalNoOfPallets#</div> #}#")
//.EventTemplate("<div style='font-weight: 600'>PO- #= POHeader#</div><div>  Line- #= lineno#</div></p>")
.Editable(editable =>
{
editable.TemplateName("_CustomEditorTemplate").Window(w => w.Width(1100));

// if(canBookAppt == false)
// {
//editable.Create(false);
// }
})
.Views(views =>
{
views.DayView();
//views.WorkWeekView(workWeekView => workWeekView.Selected(true));
views.WeekView(weekView => weekView.Selected(true)).SelectedDateFormat("{1:Y}");
views.TimelineView();
//views.CustomView("CustomDayView", view => view.Title("Day"));
//views.CustomView("CustomWeekView", view => view.Title("Week").Selected(true));
//views.TimelineView();
})

.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.Title);
//m.Field(f => f.Duration);
m.Field(f => f.POHeader);
// m.Field(f => f.POs);
m.Field(f => f.LoadingDocks);
m.Field(f => f.appointmentType);
})
.Read("Read", "AMSAppointments")
.Create(c=>c.Action("Appointment_Create", "AMSAppointments"))
.Destroy("Appointment_Delete", "AMSAppointments")
.Update("Appointment_Update", "AMSAppointments")
.Events(e =>
{
e.RequestEnd("scheduler_RequestEnd");
e.RequestStart("scheduler_RequestStart");
})
)
.Events(e =>
{
e.DataBound("scheduler_dataBound");
e.Edit("scheduler_edit");
e.Save("scheduler_Save");
//e.Cancel("scheduler_Cancel");
////e.Navigate("scheduler_Change");
//e.DataBinding("scheduler_DataBinding");
//e.Change("scheduler_Change");
//e.Add("scheduler_add");

})
.Mobile(MobileMode.Auto)
.Deferred()

)
@(Html.Kendo().Tooltip()
.For("#scheduler")
.Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
.Position(TooltipPosition.Top)
.Width(140)
//.ContentTemplateId("template")
.LoadContentFrom("scheduler_Tooltip", "AMSAppointments")
.Events(events => events.RequestStart("tooltip_requestStart"))
.Deferred()
)

@*<a href="\#" class="editeventt" data-uid= #=uid# data-taskid= #=model.Title#> Supplier: #= model.VendorNo#</a>*@

@*<script id="template" type="text/x-kendo-template">
#var element = target.is(".k-task") ? target : target.parent();#
#var uid = element.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#

#if(model) {#
PO- #=model.POHeader#
<br> #=kendo.format('{0:t}',model.start)# to #=kendo.format('{0:t}',model.end)#

#} else {#
<strong>No event data is available</strong>
#}#
</script>*@
</div>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

CustomEditorTemplate :

<div id="appointmentDiv" class="container">

<div class="form-group row" style="display: none;">
<label class="control-label col-md-4"> Standing Appointment</label>
<div class="col-md-8">
@(Html.CheckBoxFor(model => model.isStandingApmnt))
</div>
</div>

<div class="form-group row">
<div class="col-md-4">
@*@(Html.LabelFor(model => model.Title))*@
<label>Title</label>
</div>
<div class="col-md-8" data-container-for="Title">
@(Html.TextBoxFor(model => model.Title, new { @class = "appointmentTitle k-textbox", data_bind = "value:title", @style="width:100%;" , required = "required" }))

</div>
</div>

<div class="form-group row d-none " id="titlecombobox">
<label class="control-label col-md-4">Vendor</label>
<div class="col-md-8" data-container-for="VendorNo">
@(Html.TextBoxFor(model => model.VendorNo, new { @class = "", @style = "width:100%;" , @readonly = "readonly" }))
</div>
</div>

<div class="form-group row " id="vendornamebox">
<label class="control-label col-md-4">Vendor</label>
<div class="col-md-8" data-container-for="VendorName">
@(Html.TextBoxFor(model => model.VendorName, new { @class = "k-textbox", data_bind = "value:VendorName", @style = "width:100%;", @readonly = "readonly" }))
</div>
</div>

<div class="tab-content">
<div id="inComing" class=" form-group row tab-pane active">
<div class="k-edit-field pofield">
<div id="POsdropdowns"></div>
</div>
</div>

</div>

<div class="form-group row">
@*@(Html.LabelFor(model => model.Start, "Start Date and Time", htmlAttributes: new { @class = "control-label col-md-4" }))*@
<label class="control-label col-md-4">Start Date and Time</label>
<div class="col-md-8" data-container-for="start">
@(Html.Kendo().DateTimePickerFor(model => model.Start)
.Name("startDateTime")
.HtmlAttributes(new { data_bind = "value:start,invisible:isAllDay", @class = "appointmentDate", required = "required", onkeydown = "return false;" })
//.HtmlAttributes(new { data_bind = "value:start,invisible:isAllDay", @style = "z-index: inherit; width: 100%;", required = "required", onkeydown="return false;" })
//.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay"))

.Events(e =>
{
e.Change("StartChange");
}).Deferred()
)
@*@(Html.Kendo().DatePickerFor(model => model.Start)
.Name("startDate")
//.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay"))
.Deferred())*@

<span data-bind="text: startTimezone"></span>
@*<span data-for="start" class="k-invalid-msg"></span>*@
</div>
</div>
@*</div>*@

<div class="form-group row" style="display:none">
@(Html.LabelFor(model => model.Duration, "Duration (Minutes)", htmlAttributes: new { @class = "control-label col-md-4" }))

<div class="col-md-8" data-container-for="recurrenceRule">
@(Html.Kendo().DropDownListFor(model => model.Duration)
.DataTextField("Text")
.DataValueField("Value")
.OptionLabel("Select...")
//.HtmlAttributes(new { @style = "width:100%;"})
.HtmlAttributes(new { style = "width:100%", required = "required" })
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "5",
Value = "5"
},
new SelectListItem() {
Text = "10",
Value = "10"
},
new SelectListItem() {
Text = "15",
Value = "15"
},
new SelectListItem() {
Text = "20",
Value = "20"
},
new SelectListItem() {
Text = "25",
Value = "25"
},
new SelectListItem() {
Text = "30",
Value = "30"
},
// new SelectListItem() {
// Text = "35",
// Value = "35"
//},
new SelectListItem() {
Text = "40",
Value = "40"
},
new SelectListItem() {
Text = "45",
Value = "45"
},
new SelectListItem() {
Text = "50",
Value = "50"
},
new SelectListItem() {
Text = "55",
Value = "55"
},
new SelectListItem() {
Text = "60",
Value = "60"
},
//new SelectListItem() {
// Text = "90",
// Value = "90"
//},
//new SelectListItem() {
// Text = "120",
// Value = "120"
//}
})
.Value(Convert.ToString(Model.Duration))
.Deferred()
)

</div>
</div>

<div class="form-group row">
@(Html.LabelFor(model => model.LoadingDocks,"Dock Number", htmlAttributes: new { @class = "control-label col-md-4" }))

<div class="col-md-8" data-container-for="LoadingDocks">
@(Html.Kendo().DropDownListFor(model => model.LoadingDocks)
.DataTextField("dockname")
.DataValueField("dockid")
.OptionLabel("Select...")
//.BindTo((System.Collections.IEnumerable)ViewData["LoadingDocks"])
.DataSource(source =>
{
source.Read(read =>
{
read.Action("RemoteDataSource_GetLoadingDocks", "AMSAppointments");
});
})
.Events(e => { e.Open("OnLDOpen"); })
.Template("<span style=\"background-color:\\#: data.dockcolorcode2 \\#;width:10px;height:10px;display:inline-block;border:1px solid \\#: data.dockcolorcode \\#; \"></span><span class=\"\\#: data.dockclass \\#\" > \\#: data.dockname \\#</span>")
//.HtmlAttributes(new { @style = "width:100%;" })
.HtmlAttributes(new { @style = "width:100%;", })
.Deferred()
)
</div>
</div>

<div class="form-group row hideFgfCarrrer">
<div class="col-md-4">
@*@(Html.LabelFor(model => model.Title))*@
<label>FGF Career</label>
</div>
<div class="col-md-8" data-container-for="Title">
@(Html.TextBoxFor(model => model.Fgfcareer, new { @class = "k-textbox", data_bind = "value:title", @style="width:100%;" , required = "required" }))

</div>
</div>
<div class="form-group row totalpallets firstElement">
@(Html.LabelFor(model => model.TotalNoOfPallets, "Total Pallets", htmlAttributes: new { @class = "control-label col-md-4" }))
<div class="col-md-8" data-container-for="recurrenceRule">
@(Html.Kendo().TextBoxFor(model => model.TotalNoOfPallets)
.HtmlAttributes(new { data_bind = "value:TotalNoOfPallets", @class = "", @style = "width:100%;", id = "TotalNoOfPallets", @readonly = "readonly" })
.Deferred())
@*<input type="text" id="TotalNoOfPallets1" class="" style="width:100%;" data-bind="value: TotalNoOfPallets" />*@

</div>
</div>

<div class="form-group row reccontainer d-none">
@*@(Html.LabelFor(model => model.RecurrenceRule, htmlAttributes: new { @class = "control-label col-md-4" }))*@
<label class="control-label col-md-4">Frequency</label>
<div class="col-md-8" data-container-for="recurrenceRule">
@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
.HtmlAttributes(new { data_bind = "value:recurrenceRule", @style = "width:100%;" })
.Frequency(frequency => frequency
.Add(RecurrenceEditorFrequency.Never)
.Add(RecurrenceEditorFrequency.Daily)
.Add(RecurrenceEditorFrequency.Weekly)
)
.Deferred()
)
</div>
</div>
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

PO Template:

<div class="form-group row" id="POcombobox">

<label class="control-label col-md-4">PO Number</label>

<div class="col-md-8" data-container-for="PO">
@(Html.Kendo().MultiSelectFor(m=>m)
.Name("selectPoDisplayInfo")
.DataTextField("poDisplayInfo")
.DataValueField("poDisplayInfo")
.Placeholder("Select PO...")
.AutoBind(false)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(80)
.Type("aspnetmvc-ajax").ServerFiltering(true)
.Transport(transport =>
{
transport.Read(r => r.Action("PoDisplayInfo_Read", "AMSAppointments").Data("getTaskId"));
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
})
.Filter(FilterType.Contains)

.Virtual(v => v.ItemHeight(34).ValueMapper("selectPoDisplayInfo_ValueMapper"))
.Events(e =>
e.Change("addSelectPoDisplayInfoFilter")

)
.HtmlAttributes(new { @class = "mb-2"})
.Deferred()
)

</div>
</div>
<div id="gridArea" data-container-for="PO">
@(Html.Kendo().Grid<Fellowship.Models.PODetailsMainModel>
()
.Name("POGrid")
.Events(e => e.DataBound("POList_dataBound"))
.Events(e =>
{
e.Change("onPOChange")
.DataBound("onPODatabound");
//e.Filter("onFilter");
})
.AutoBind(true)
.HtmlAttributes(new { @class = "invPOGrid" })
.Columns(columns =>
{
columns.Bound(c => c.aprelid).Hidden(true).HtmlAttributes(new { @class = "aprelidVal" });
columns.Bound(c => c.Line_UID).Hidden(true).HtmlAttributes(new { @class = "lineUIDVal" });
columns.Bound(c => c.Buy_from_Vendor_No_).Hidden(true).HtmlAttributes(new { @class = "vendorNameval" });
columns.Bound(c => c.PO_Number).Hidden(true).HtmlAttributes(new { @class = "POval" });
columns.Bound(e => e.poDisplayInfo).Title("PO Number").MinResizableWidth(310).Width(310).Filterable(ftb => ftb.Multi(true).Search(true)).HtmlAttributes(new { @class = "podisplayinfo" });
columns.Bound(c => c.line_no_).Title("Line").Filterable(false).Width(65).HtmlAttributes(new { @class = "line_no_" });
columns.Bound(c => c.Item).Hidden(true).HtmlAttributes(new { @class = "Item" });
//columns.Bound(c => c.noofpallets).Title("Pallets").Width(90).Filterable(false).HtmlAttributes(new { @class = "pallets" })
// //.ClientTemplate("<input class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#' />");
// .ClientTemplate("<input id='txtPallets' class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#'/>");
columns.Bound(c => c.noofpallets).Title("Pallets").Width(90).Filterable(false).HtmlAttributes(new { @class = "pallets" })
.ClientTemplate("#=palletsTemplate(data)#");
// .ClientTemplate("<input id='txtPallets' class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#'/>");

//columns.Bound(c => c.deliverydate).Title("Date").Width(90).Filterable(false).HtmlAttributes(new { @class = "PODate" })
// .ClientTemplate("#= deliverydate == null ? '' : kendo.toString(kendo.parseDate(deliverydate), 'MM/dd/yyyy') #");
columns.Bound(c => c.deliverydate).Title("Date").Width(90).Filterable(false).HtmlAttributes(new { @class = "PODate" })
.ClientTemplate("#=deliverDateTemplate(data)#");
//.ClientTemplate("#= deliverydate == null ? '' : kendo.toString(kendo.parseDate(deliverydate), 'MM/dd/yyyy') #");

//columns.Bound(c => c.proposedTime).Title("Time").Width(80).Filterable(false).HtmlAttributes(new { @class = "POTime" })
// .ClientTemplate("#if (data.proposedTime) {# #:kendo.toString(proposedTime.Hours, '00')#:#:kendo.toString(proposedTime.Minutes, '00')# #}#");
columns.Bound(c => c.proposedTime).Title("Time").Width(80).Filterable(false).HtmlAttributes(new { @class = "POTime" })
.ClientTemplate("#=proposedTimeTemplate(data)#");
//.ClientTemplate("#if (data.proposedTime) {# #:kendo.toString(proposedTime.Hours, '00')#:#:kendo.toString(proposedTime.Minutes, '00')# #}#");
//.ClientTemplate("#= kendo.toString(new Date(0, 0, 00,proposedTime.substring(0,2),proposedTime.substring(2,4)), 'hh:mm tt' ) #");
//columns.Bound(c => c.apporush).Title("IsRush").Filterable(false)
// .HeaderTemplate("<label for='isRushHeader'>Rush</label><input name='isRushHeader' class='isRushHeader' type='checkbox' style='margin-left:0.5em;'>")
// .ClientTemplate("<input " +
// " name='isRush' " +
// " id='isRush' class='isRushs' " +
// " type='checkbox' " +
// " #=apporush ? checked='checked' :'' # />"
//).Width(80).Hidden();
})
.Resizable(resize => resize.Columns(true))
.Scrollable(scroll => scroll.Endless(true))
.HtmlAttributes(new { style = "height: 30%" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Model(model =>
{
model.Id(p => p.Line_UID);
//model.Field(p => p.poid);
model.Field(f => f.line_no_).Editable(false);
model.Field(f => f.Buy_from_Vendor_Name).Editable(false);
model.Field(f => f.noofpallets).Editable(false);
model.Field(f => f.deliverydate).Editable(false);
})
.Events(e => e.RequestEnd("SetTotalPallets").Change("onChanged"))
.Read(read => read.Action("Virtualization_ReadPO", "AMSAppointments").Data("getUpdateFlag"))
)
.NoRecords("No Records found.")
.AutoBind(false)
.Deferred()
)
</div>

------------------------------------------------------------------------------------------------------------------------

Before doubleClick

After doubleclicking the block duplicate kendomultislect is created

1 Answer, 1 is accepted

answered on 05 Jun 2024, 07:45 AM

Hello Vrajang,

Thank you for the code snippets, the images, and the details provided.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

If you could send me a runnable REPL or dojo example I will invest time and try my best to resolve the described issue.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.