Skip to content

Commit 51384c6

Browse files
vveesseelliinnaapepinho24
vveesseelliinnaa
authored and
pepinho24
committed
docs(multiselect): Add Client-side Binding article
1 parent bf52b76 commit 51384c6

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎controls/multiselect/data-binding/client-side.md‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,212 @@ position: 1
99
---
1010

1111

12+
# Client-Side Data Binding
13+
14+
**RadMultiSelect** can be bound to a **web service** through its inner `WebServiceSettings` tag or through a [RadClientDataSource]({%slug clientdatasource/overview%}). Since the control is a wrapper over the Kendo UI for jQuery widget, it always operates on the client and binds to data with JavaScript.
15+
16+
There are two ways to bind to data on the client:
17+
18+
- [Client-Side Data Binding](#client-side-data-binding)
19+
- [WebServiceSettings](#webservicesettings)
20+
- [JavaScript Object at Runtime](#javascript-object-at-runtime)
21+
- [See Also](#see-also)
22+
23+
## WebServiceSettings
24+
25+
Under the covers, a [Kendo UI DataSource](https://docs.telerik.com/kendo-ui/framework/datasource/overview) will be instantiated and it will perform requests to the denoted service with the settings defined in the `WebServiceSettings` tag.
26+
RadMultiSelect has an embeded RadClientDataSource control, which can be a configured through the `WebServiceClientDatasource` composite property. The widget only shows data and so only the **Select** settings and `ServiceType` are used. The rest of the settings (for Insert, Update, Delete) will not be used and are inherited from a base class.
27+
28+
>caption Example 1: Setting WebServiceClientDataSource and WebServiceSettings to bind to a web service
29+
30+
````ASP.NET
31+
<telerik:RadMultiSelect ID="RadMultiSelect2" runat="server" Filter="Contains"
32+
DataTextField="ProductName" DataValueField="ProductID"
33+
MinLength="3" Placeholder="Select Category">
34+
<WebServiceClientDataSource runat="server" AutoSync="true">
35+
<WebServiceSettings ServiceType="OData" Select-ContentType="JSON"
36+
Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products">
37+
</WebServiceSettings>
38+
</WebServiceClientDataSource>
39+
</telerik:RadMultiSelect>
40+
````
41+
42+
The Schema can also be configured via the `Schema` tag. That would allow easy parsing of the response from various web services, such as .asmx web service.
43+
44+
````ASP.NET
45+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" Filter="Contains" EnforceMinLength="false" AutoClose="false" DataValueField="Title" DataTextField="Title" Width="400px" >
46+
<WebServiceClientDataSource runat="server" AutoSync="true">
47+
<WebServiceSettings>
48+
<Select Url="BooksService.asmx/GetBooks" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
49+
</WebServiceSettings>
50+
<Schema DataName="d">
51+
</Schema>
52+
</WebServiceClientDataSource>
53+
</telerik:RadMultiSelect>
54+
````
55+
56+
````C#
57+
[WebService(Namespace = "http://tempuri.org/")]
58+
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
59+
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
60+
[System.Web.Script.Services.ScriptService]
61+
public class BooksService : System.Web.Services.WebService
62+
{
63+
[WebMethod]
64+
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
65+
public List<Book> GetBooks()
66+
{
67+
var books = new List<Book>();
68+
books.Add(new Book
69+
{
70+
Title = "Professional ASP.NET 4.5 in C# and VB",
71+
Author = "Jason N. Gaylord",
72+
Cover = "http://ecx.images-amazon.com/images/I/51MQP2rwsZL.jpg",
73+
Url = "http://www.amazon.com/Professional-ASP-NET-4-5-C-VB/dp/1118311825"
74+
});
75+
books.Add(new Book
76+
{
77+
Title = "Pro ASP.NET 4.5 in C#",
78+
Author = "Adam Freeman",
79+
Cover = "http://ecx.images-amazon.com/images/I/51h6duC3kmL.jpg",
80+
Url = "http://www.amazon.com/Pro-ASP-NET-4-5-Adam-Freeman/dp/143024254X"
81+
});
82+
books.Add(new Book
83+
{
84+
Title = "Beginning ASP.NET 4.5 in C#",
85+
Author = "Matthew MacDonald",
86+
Cover = "http://ecx.images-amazon.com/images/I/51xvkzeTRbL.jpg",
87+
Url = "http://www.amazon.com/Beginning-ASP-NET-4-5-1-Wrox-Programmer/dp/111884677X"
88+
});
89+
books.Add(new Book
90+
{
91+
Title = "Beginning ASP.NET 4.5.1: in C# and VB ",
92+
Author = "Imar Spaanjaars",
93+
Cover = "http://ecx.images-amazon.com/images/I/51xvkzeTRbL.jpg",
94+
Url = "http://www.amazon.com/Beginning-ASP-NET-4-5-1-Wrox-Programmer/dp/111884677X"
95+
});
96+
books.Add(new Book
97+
{
98+
Title = "Pro C# 5.0 and the .NET 4.5 Framework",
99+
Author = "Andrew Troelsen",
100+
Cover = "http://ecx.images-amazon.com/images/I/7165No4MIpL._SL1500_.jpg",
101+
Url = "http://www.amazon.com/Beginning-ASP-NET-Databases-Sandeep-Chanda/dp/1430243805"
102+
});
103+
books.Add(new Book
104+
{
105+
Title = "Ultra-Fast ASP.NET 4.5",
106+
Author = "Rick Kiessig",
107+
Cover = "http://ecx.images-amazon.com/images/I/51Pu1Z8pgsL.jpg",
108+
Url = "http://www.amazon.com/Ultra-Fast-ASP-NET-Experts-Voice-ASP-Net/dp/1430243384"
109+
});
110+
books.Add(new Book
111+
{
112+
Title = "ASP.NET 4.5 Unleashed",
113+
Author = "Stephen Walther",
114+
Cover = "http://ecx.images-amazon.com/images/I/41V4tb3L%2BFL.jpg",
115+
Url = "http://www.amazon.com/ASP-NET-4-5-Unleashed-Stephen-Walther/dp/067233688X"
116+
});
117+
books.Add(new Book
118+
{
119+
Title = "Pro ASP.NET MVC 4",
120+
Author = "Adam Freeman",
121+
Cover = "http://ecx.images-amazon.com/images/I/51mKVgdmZpL.jpg",
122+
Url = "http://www.amazon.com/Pro-ASP-NET-MVC-Adam-Freeman/dp/1430242361"
123+
});
124+
books.Add(new Book
125+
{
126+
Title = "Professional C# 5.0 and .NET 4.5.1",
127+
Author = "Christian Nagel",
128+
Cover = "http://ecx.images-amazon.com/images/I/516-BPVWURL.jpg",
129+
Url = "http://www.amazon.com/Professional-C-5-0-NET-4-5-1/dp/1118833031"
130+
});
131+
132+
return books;
133+
}
134+
}
135+
136+
public class Book
137+
{
138+
public string Title { get; set; }
139+
public string Author { get; set; }
140+
public string Cover { get; set; }
141+
public string Url { get; set; }
142+
}
143+
````
144+
145+
## JavaScript Object at Runtime
146+
147+
You can use the `set_dataSource()` [client-side method]({%slug multicolumncombobox/client-side-programming/overview%}) of the RadMultiSelect object to provide it with a new client-side data source. You do not have to provide a server data source or a web service for this to work, you only need to define the proper configuration (columns and fields) to match the data you will pass to the widget.
148+
149+
>caption Example 3: Binding to a JavaScript array
150+
151+
````ASP.NET
152+
<script>
153+
var multiSelectWidget;
154+
var data = [
155+
{ id: 1, name: "Apples"},
156+
{ id: 2, name: "Oranges"},
157+
];
158+
159+
function OnLoad(sender, args) {
160+
multiSelectWidget = sender.get_kendoWidget();
161+
multiSelectWidget.setDataSource(data);
162+
}
163+
164+
function bindToNewData() {
165+
data.push( [{ id: 1, name: "Bananas"}]);
166+
multiSelectWidget.setDataSource(data);
167+
}
168+
</script>
169+
170+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" Filter="Contains" Width="400px" DataTextField="name" DataValueField="id"
171+
Placeholder="Select attendees...">
172+
<ClientEvents OnLoad="OnLoad" />
173+
</telerik:RadMultiSelect>
174+
175+
<button onclick="bindToNewData();" type="button">bind to new data</button>
176+
````
177+
178+
You can also create a new Kendo Data Source object with the desired settings and pass it to the RadMultiSelect. Just make sure that it matches the fields and settings you have defined.
179+
180+
>caption Example 4: Binding to a new Kendo DataSource instance
181+
182+
````ASP.NET
183+
184+
<script>
185+
function bindToNewData() {
186+
var multiSelectWidget = $find("<%=RadMultiSelect1.ClientID%>").get_kendoWidget();
187+
//create a Kendo Data Source and set its settings
188+
//this example calls a service, but you can also use static data
189+
var ds = new kendo.data.DataSource({
190+
type: "odata",
191+
transport: {
192+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
193+
}
194+
});
195+
196+
multiSelectWidget.setDataSource(ds);
197+
}
198+
</script>
199+
200+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" Filter="Contains" Width="400px" DataTextField="ContactName" DataValueField="CustomerID"
201+
Placeholder="Select attendees...">
202+
</telerik:RadMultiSelect>
203+
204+
<button onclick="bindToNewData();" type="button">bind to new data</button>
205+
````
206+
207+
## See Also
208+
209+
* [Kendo UI Data Source](https://docs.telerik.com/kendo-ui/framework/datasource/overview)
210+
211+
* [Kendo UI Data Source API](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
212+
213+
* [Kendo UI Data Source Demos](https://demos.telerik.com/kendo-ui/datasource/index)
214+
215+
* [RadMultiSelect Client-side API]({%slug multiselect/client-side-programming/overview%})
216+
217+
218+
219+
12220

‎controls/multiselect/images/multiselect-rtl.png‎

5.99 KB
Loading

0 commit comments

Comments
 (0)