|
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<ClientSideEvents ToolbarClick="onToolBarClick" />
…………………..
<ToolbarSettings ShowToolbar="True">
<CustomToolbarItem>
<ej:CustomToolbarItem Text="left" />
<ej:CustomToolbarItem Text="center" />
<ej:CustomToolbarItem Text="right" />
</CustomToolbarItem>
</ToolbarSettings>
<Columns>
……………………………
</ej:Grid>
<script type="text/javascript">
function onToolBarClick(sender) {
var gridObj = $("#<%= OrdersGrid.ClientID %>").data("ejGrid");
var rowIndex = gridObj.model.selectedRowIndex;
var tr = gridObj.getRows()[rowIndex];
if (sender.itemName == "left")
$(tr).find('td').css('cssText', 'text-align: left !important');
else if (sender.itemName == "center")
$(tr).find('td').css('cssText', 'text-align: center !important');
else
$(tr).find('td').css('cssText', 'text-align: right !important');
}
</script>
<style type="text/css" class="cssStyles">
.left {
background-image: url("../Content/left.png");
background-size: 20px 20px;
}
.center {
background-image: url("../Content/center.png");
background-size: 20px 20px;
}
.right {
background-image: url("../Content/right.png");
background-size: 20px 20px;
}
</style>
</asp:Content> | 
