Data Binding

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.

  • c#
  • // 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();    
     }
  • cshtml
  • <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>
  • css
  • <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.

    1. In the View page, add Toolbar helper to configure Toolbar.
  • cshtml
  • @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