Data Binding
14 Aug 20175 minutes to read
Toolbar provides you a flexible approach for binding data from various data sources. There are various properties in Toolbar for Data Binding.
Data fields and configuration
The following sub-properties provides a way to bind either the local/remote data to the Toolbar control.
Property Table of MVC Toolbar control
| Property | Value type | Description |
|---|---|---|
| Datasource | object | It specifies the data source of the Toolbar. The data source contains the list of data for generating the Toolbar items. |
| Fields | object | It specifies the mapping fields for the data items of the Toolbar. |
| Id | string | It specifies the id of the element |
| Text | string | It specifies the text content of the element. |
| ImageUrl | string | This property defines the imageURL for the image location. While setting images, the folder name in which the images are stored should be set to imageUrl property. |
| ImageAttributes | string | This property defines style for the image. While setting an image, styles can be applied such as height, width by using this property. |
| SpriteCssClass | string | This property sets the Sprite CSS for the image element in Toolbar. |
| HtmlAttributes | object | This property sets the HTML attribute for the Toolbar item. It can be any HTML attribute such as id, class, style. |
| TooltipText | string | This property sets the text value for Toolbar item while mouse over in Toolbar. |
| Query | object | It specifies the query to retrieve the data from online server. |
| Group | string | It groups the given Toolbar items. |
Local data
To bind the Local Data to the Toolbar control, map the user-defined JSON data names with its appropriate data source field. You can bind data to Toolbar by mapping fields such as Id, SpriteCssClass, ImageUrl, group and TooltipText.
The following steps explain how you can bind local data to Toolbar Control.
In the View page, add Toolbar helper to configure Toolbar.
// Add the following data list to be bind in the controller page and define the corresponding data.
// Define local data source elements with fields
public class ToolbarLocalBinding
{
public string IconId { get; set; }
public string SpriteCss { get; set; }
public string Tooltip { get; set; }
}
//Refer the Model in the controller
using <Applicationname>.Models;
public ActionResult Index()
{
List<ToolbarLocalBinding> tools = new List<ToolbarLocalBinding>();
tools.Add(new ToolbarLocalBinding { IconId = "1", SpriteCss = "LeftAlign_tool", Tooltip = "left" });
tools.Add(new ToolbarLocalBinding { IconId = "2", SpriteCss = "CenterAlign_tool", Tooltip = "center" });
tools.Add(new ToolbarLocalBinding { IconId = "3", SpriteCss = "RightAlign_tool", Tooltip = "right" });
tools.Add(new ToolbarLocalBinding { IconId = "4", SpriteCss = "Justify_tool", Tooltip = "justify" });
tools.Add(new ToolbarLocalBinding { IconId = "5", SpriteCss = "Bold_tool", Tooltip = "bold" });
tools.Add(new ToolbarLocalBinding { IconId = "6", SpriteCss = "Italic_tool", Tooltip = "italic" });
tools.Add(new ToolbarLocalBinding { IconId = "7", SpriteCss = "StrikeThrough_tool", Tooltip = "strike" });
tools.Add(new ToolbarLocalBinding { IconId = "8", SpriteCss = "Underline_tool", Tooltip = "underline" });
ViewBag.datasource = tools;
return View();
}<div class="cols-sample-area">
@Html.EJ().Toolbar("toolbar").Width("250").Datasource((IEnumerable<MVCSamples.Models.ToolbarLocalBinding>)
ViewBag.datasource).ToolbarFields(f => f.ID("IconId").SpriteCssClass("SpriteCss").TooltipText("Tooltip"))
.Orientation(Orientation.Horizontal)
</div><style type="text/css" class="cssStyles">
.darktheme .cols-sample-area .e-tooltxt .ToolbarItems
{
background-image: url('../images/toolbar/ui-icons-metro.png');
}
.cols-sample-area .e-tooltxt .ToolbarItems
{
display: block;
background-image: url('../images/toolbar/ui-icons-dark.png');
height: 22px;
width: 22px;
}
.e-tooltxt:hover .ToolbarItems, .darktheme .cols-sample-area .e-tooltxt:hover .ToolbarItems
{
background-image: url('../images/toolbar/ui-icons-light.png');
}
.ToolbarItems.LeftAlign_tool
{
background-position: -26px -39px;
}
.ToolbarItems.CenterAlign_tool
{
background-position: -55px -39px;
}
.ToolbarItems.RightAlign_tool
{
background-position: -89px -39px;
}
.ToolbarItems.Justify_tool
{
background-position: -123px -39px;
}
.ToolbarItems.Bold_tool
{
background-position: -159px -39px;
}
.ToolbarItems.Italic_tool
{
background-position: -196px -39px;
}
.ToolbarItems.StrikeThrough_tool
{
background-position: -55px -70px;
}
.ToolbarItems.Underline_tool
{
background-position: -23px -68px;
}
.html
{
background-color: yellowgreen;
}
</style>
ToolBar control bounded to Local Data
Remote data
You can bind Toolbar to Remote Data using DataManager and the query in fields is used to retrieve the data. DataManager supports the following types of data-binding: JSON, Web Services and OData. It uses two different classes; ej.DataManager for processing, and ej.Query for serving data. ej.DataManager communicates with data source and ej.Query generates data queries that are read by the DataManager. In the following link, how to create DataManager is explained in full detail.
http://help.syncfusion.com/aspnetmvc/toolbar/data-binding
The following steps explain how you can bind remote data to Toolbar control.
- In the View page, add Toolbar helper to configure Toolbar.
@Html.EJ().Toolbar("toolbar").Datasource(dataSource => dataSource.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/")).Query("ej.Query().from('Orders').take(6)").ToolbarFields(f => f.Text("CustomerID")).Orientation(Orientation.Horizontal).Width("340")
ToolBar control bounded to Remote Data