How to apply different Background color to the groupcaption?
We can update the different colors for each group caption using the captionFormat of the Grid groupSettings and helper functions of the jsRender.
HTML
Render the Grid with the groupedColumns and captionFormat.
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowGrouping: true,
pageSettings: { pageSize: 8 },
groupSettings: { groupedColumns: ["CustomerID"], captionFormat: "#caption" },
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "EmployeeID", headerText: "Employee ID" },
{ field: "Freight", format: "{0:C}" }
]
});
});
</script>
CSHTML
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.PageSettings(page => page.PageSize(8))
.AllowGrouping()
.GroupSettings(grp => {
grp.GroupedColumns(grpCols => {
grpCols.Add("CustomerID");
});
grp.CaptionFormat("#caption");
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("Freight").HeaderText("Freight").Format("{0:C}").Add();
})
)
public class HomeController : Controller
{
public ActionResult Index(){
ViewBag.datasource = OrderRepository.GetAllRecords();
return View();
}
}
ASPX
<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true"> <PageSettings PageSize="8" /> <GroupSettings CaptionFormat="#caption" GroupedColumns="CustomerID" /> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID"></ej:Column> <ej:Column Field="CustomerID" HeaderText="Customer ID"></ej:Column> <ej:Column Field="EmployeeID" HeaderText="Employee ID"></ej:Column> <ej:Column Field="Frieght" HeaderText="Freight" Format="{0:C}"></ej:Column> </Columns> </ej:Grid> |
namespace sqlbinding
{
public partial class _Default : Page
{
public static List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = order;
}
}
}
Define captionFormat template and styles that needed for the Grid.
<style>
.e-grid .e-groupcaption {
/* give the padding for
element to fill
color entirely
*/
padding: 0px;
}
</style>
<script type="text/x-jsrender" id="caption">
<div style="{{:~replaceText()}}">
<!--update the colour in the element style-->
{{:field}} - {{:key}}: {{:count}} {{if count == 1 }} count {{else}} counts {{/if}}
</div>
</script>
Define the helper functions that need to generate the color and update them to the styles of the caption format template.
<script type="text/javascript">
$(function () {
var helpers = {
replaceText: function (field) {
return "background-color:" + randColor();
}
};
});
$.views.helpers(helpers);
function randColor() {
var r = ('0' + (Math.random() * 256 | 0).toString(16)).slice(-2),
g = ('0' + (Math.random() * 256 | 0).toString(16)).slice(-2),
b = ('0' + (Math.random() * 256 | 0).toString(16)).slice(-2);
return '#' + r + g + b;
}
</script>
Figure: Grid with customized background color in caption format.
