| layout | post |
|---|---|
| title | DataSource Support |
| description | datasource |
| platform | js |
| control | GroupButton |
| documentation | ug |
| api | /api/js/ejgroupbutton |
GroupButton can populate the button items based on data source and by specifying the associated fields.
Refer the below table to know about the available fields
|
text |
Text to be displayed in button |
|
prefixIcon |
Icon class name – prefixIcon will be displayed from the left margin of the button. |
|
suffixIcon |
Icon class name – suffixIcon will be displayed from the left margin of the button. |
|
contentType |
Specifies content type of button item |
|
imagePosition |
Specifies position of the image in a button item |
|
Selected |
Specifies the selection state of button item |
|
URL |
Used to include the URL tag to the button item |
|
htmlAttribute |
It defines the HTML attributes such as class and styles for an button item. |
|
linkAttribute |
It defines the image attributes such as height, width, styles, etc. |
To set the local JSON data, define a JSON array and initialize the GroupButton with dataSource property. Specify the column names in the fields’ property.
N> the columns are bounded automatically when the fields are specified with the default names like id, text, etc...
Below is the sample to code to render the GroupButton JSON dataSource,
{% highlight html %}
<div id="groupButton">
</div>
{% endhighlight %}
{% highlight js %}
<script>
$("#groupButton").ejGroupButton({
groupButtonMode: "radiobutton",
dataSource: [
{ text: "Day", contentType: "textonly" },
{ text: "Week", contentType: "textonly" },
{ text: "Work Week", contentType: "textonly" },
{ text: "Month", contentType: "textonly", selected: "selected" },
{ text: "Agenda", contentType: "textonly" }],
showRoundedCorner: true
});
</script>
{% endhighlight %}
To bind remote data to the GroupButton, you can assign a service data as an instance of ejDataManager to the dataSource property along with the fields mapping.
{% highlight js %}
<script>
var dataManger = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
});
// Query creation
var query = ej.Query().from("Orders").take(6);
$(function () {
// declaration
$("#groupButton").ejGroupButton({
dataSource: dataManger,
fields: { text: "CustomerID" },
query: query,
});
});
</script>
{% endhighlight %}