Binding to a Custom DataSource
The Custom DataSource type of data binding is the default type of binding and provides full control over the client-side API options of the Kendo UI for jQuery DataSource.
Using a custom DataSource gives you complete control when it comes to:
- Determining the request and response formats for the established remote services.
- Defining Schema settings for consuming the established remote service.
- Stating separately the server operations, such as
server-filtering,server-sorting,server-paging,server-grouping, andserver-aggregates.
The Custom DataSource supports the following custom types:
-
aspnetmvc-ajax—uses the traditionalAjax Binding. -
odata—supports theODatav.2 protocol -
odata-v4—partially supportsOData v4. -
signalR—simplifies adding real-time web functionality to apps by using theSignalRopen-source library.
The following example demonstrates how to declare the Telerik UI for ASP.NET Core Scheduler with a Custom DataSource.
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.MeetingViewModel>()
.Name("scheduler")
.Date(new DateTime(2022, 6, 13))
.StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
.Height(600)
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.Timezone("Etc/UTC")
.Resources(resource =>
{
resource.Add(m => m.RoomID)
.Title("Room")
.DataTextField("Text")
.DataValueField("Value")
.DataColorField("Color")
.BindTo(new[] {
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
});
resource.Add(m => m.Attendees)
.Title("Attendees")
.Multiple(true)
.DataTextField("Text")
.DataValueField("Value")
.DataColorField("Color")
.BindTo(new[] {
new { Text = "Alex", Value = 1, Color = "#f8a398" },
new { Text = "Bob", Value = 2, Color = "#51a0ed" },
new { Text = "Charlie", Value = 3, Color = "#56ca85" }
});
})
.DataSource(d => d
.Custom() // Declare a Custom DataSource.
.Batch(true)
.Schema(schema => schema // Compose the Model's schema.
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
m.Field("start", typeof(DateTime)).From("Start");
m.Field("end", typeof(DateTime)).From("End");
m.Field("description", typeof(string)).From ("Description");
m.Field("recurrenceID", typeof(int)).From ("RecurrenceID");
m.Field("recurrenceRule", typeof(string)).From ("RecurrenceRule");
m.Field("recurrenceException", typeof(string)).From ("RecurrenceException");
m.Field("isAllDay", typeof(bool)).From("IsAllDay");
m.Field("startTimezone", typeof(string)).From ("StartTimezone");
m.Field("endTimezone", typeof(string)).From ("EndTimezone");
}))
.Transport(transport => transport // Set up the transport operations.
.Read(read => read.Url("https://demos.telerik.com/kendo-ui/ service/meetings")
.DataType("jsonp"))
.Create(create => create.Url("https://demos.telerik.com/ kendo-ui/service/meetings/create")
.DataType("jsonp"))
.Destroy(destroy => destroy.Url("https://demos.telerik.com/ kendo-ui/service/meetings/destroy")
.DataType("jsonp"))
.Update(update => update.Url("https://demos.telerik.com/ kendo-ui/service/meetings/update")
.DataType("jsonp"))
.ParameterMap("parameterMap")) // Wire to a handler that will alter the request format.
)
)
<script>
function parameterMap(options, operation) { // Handler that alters the request format.
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
</script>
@addTagHelper *, Kendo.Mvc
@{
var roomsData = new[]
{
new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
};
var attendeesData = new[]
{
new { Text = "Alex", Value = 1, Color = "#f8a398" },
new { Text = "Bob", Value = 2, Color = "#51a0ed" },
new { Text = "Charlie", Value = 3, Color = "#56ca85" }
};
string defaultTitle = "No Title";
}
<kendo-scheduler name="scheduler"
date="new DateTime(2022, 6, 13)"
start-time="new DateTime(2022, 6, 13, 7, 00, 00)"
height="600"
timezone="Etc/UTC">
<views>
<view type="day"></view>
<view type="week" selected="true"></view>
<view type="month"></view>
<view type="agenda"></view>
</views>
<resources>
<resource field="RoomID" title="Room" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@roomsData">
</resource>
<resource field="Attendees" title="Attendees" multiple="true" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@attendeesData">
</resource>
</resources>
<scheduler-datasource type="@DataSourceTagHelperType.Custom" batch="true"> // Declare a Custom DataSource.
<schema>
<scheduler-model id="MeetingID"> // Compose the Model's schema.
<fields>
<field name="MeetingID" type="number"></field>
<field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
<field name="start" from="Start" type="date"></field>
<field name="end" from="End" type="date"></field>
<field name="description" from="Description" type="string"></field>
<field name="recurrenceId" from="RecurrenceID" type="number" default-value=null></field>
<field name="recurrenceRule" from="RecurrenceRule" type="string" ></field>
<field name="recurrenceException" from="RecurrenceException" type="string"></field>
<field name="startTimezone" from="StartTimezone" type="string"></field>
<field name="endTimezone" from="EndTimezone" type="string"></field>
<field name="isAllDay" from="IsAllDay" type="boolean"></ field>
</fields>
</scheduler-model>
</schema>
<transport parameter-map="parameterMap"> // Wire to a handler that will alter the request format.
// Set up the transport operations.
<read url="https://demos.telerik.com/kendo-ui/service/meetings" dataType="jsonp"/>
<create url="https://demos.telerik.com/kendo-ui/service/ meetings/create" dataType="jsonp"/>
<destroy url="https://demos.telerik.com/kendo-ui/service/ meetings/destroy" dataType="jsonp" />
<update url="https://demos.telerik.com/kendo-ui/service/ meetings/update" dataType="jsonp"/>
</transport>
</scheduler-datasource>
</kendo-scheduler>
<script>
function parameterMap(options, operation) { // Handler that alters the request format.
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
</script>
For a complete example on the Custom DataSource Binding, refer to the demo on custom datasource binding of the Scheduler.