We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((System.Data.DataTable)ViewBag.dataSource)
.AllowSorting()
.AllowGrouping()
.SortSettings(sort => sort.SortedColumns(col => col.Field("OrderID").Direction(SortOrder.Descending).Add()))
.GroupSettings(group => { group.GroupedColumns(col => { col.Add("Name"); }); })
.AllowPaging()
.ShowColumnChooser()
.ClientSideEvents(events => events.Load("load"))
.Columns(ViewBag.cols)
)
|
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((System.Data.DataTable)ViewBag.dataSource)
.AllowSorting()
. . .
.ClientSideEvents(events => events.Load("load"))
.Columns(ViewBag.cols)
)
<script>
function load(args) {
for (var i = 0; i <= args.model.columns.length; i++) {
if (args.model.columns[i].type == "date") {
for (var i = 0; i < this.model.dataSource.length; i++) {
this.model.dataSource[i].OrderDate = new Date(this.model.dataSource[i].OrderDate);
}
}
}
}
</script>
|
Thanks for your reply.
1.When I want add some properties to grid, it
gives below error:"Cannot use a lambda expression as an argument to a
dynamically dispatched operation without first casting it to a delegate or
expression tree type."
It is working fine.
2:-Properties
are not reflecting for column: It's not able to format datetype
If I use code provided it is casting date as NaN. When
I am not using the code it displays date correctly as string date.
I was able to fix this. It was java script error for casting date.
-- I am trying to cast the Column value whose type is given as Number to integer using parseint. Though it doesn't give error and correct values are shown. When I click on sort it is not sorting properly.
It takes only first char and sort according to it.
3:-Can
we specify in Field values with spaces like that :Field = "Datum &
Rate"
The column names are dynamic. So I am providing
data through Datatable but I don't see it binding data to columns.
Eg . 4er Bob & Standard
4er Bob & Undefined
4er Bob & Standard
Gästefahrten & Standard
4. Can we specify Summary row and column:
One summary row for each column and One Vertical Summary Column for each
row. (Horizontally and Vertically both which sums to same value at edge point.)
(All Columns names are dynamic. Present in ViewBag)
Similarly page wise summary too when pagination is enabled.
5.In general or in dynamic grid:
A. Can we give different colors for alternate Rows?
-- I was able overwrite css for it.
B. Can we give alternate colors for grouped rows
when grid is grouped over one column ?
--Couldn't find proper solution for it.
| Date | Col1 | Col2 | Col3 | Total |
| 11-Feb-19 | 1 | 2 | 3 | 6 |
| 11-Feb-19 | 4 | 5 | 6 | 15 |
| 11-Feb-19 | 7 | 8 | 9 | 24 |
| 11-Feb-19 | 12 | 15 | 18 | 45 |
| 12-Feb-19 | 1 | 4 | 7 | 12 |
| 12-Feb-19 | 2 | 5 | 8 | 15 |
| 12-Feb-19 | 3 | 6 | 9 | 18 |
| 12-Feb-19 | 6 | 15 | 24 | 45 |
| (No date value) | 18 | 30 | 42 | 90 |
|
DataColumn cl = new DataColumn("No",typeof(int));
dt.Columns.Add(cl);
cl = new DataColumn("Name",typeof(string));
dt.Columns.Add(cl);
cl = new DataColumn("OrderID",typeof(int));
dt.Columns.Add(cl);
cl = new DataColumn("ShipCity",typeof(string));
dt.Columns.Add(cl);
cl = new DataColumn("OrderDate");
dt.Columns.Add(cl);
(OR) in the columns definition as given below.
List<Column> cols = new List<Column>();// Column is a class of Syncfusion Javascript models
cols.Add(new Column() { Field = "No", HeaderText = "No", Type="number" });//Add some column
cols.Add(new Column() { Field = "Name", HeaderText = "Name" });
cols.Add(new Column() { Field = "OrderID", HeaderText = "Order ID", Type="number" });
cols.Add(new Column() { Field = "OrderDate", HeaderText = "Order date", Format = "{0:MM/dd/yyyy}", Type="date"}); |
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((System.Data.DataTable)ViewBag.dataSource)
.AllowSorting()
.AllowGrouping()
.ShowSummary(true)
.AllowMultiSorting()
.GroupSettings(group => { group.GroupedColumns(col => { col.Add("OrderID"); }); })
.AllowPaging()
.ShowColumnChooser()
.ClientSideEvents(events => events.Load("load”).QueryCellInfo("querycellinfo"))
.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.ExcelExport);
items.AddTool(ToolBarItems.WordExport);
items.AddTool(ToolBarItems.PdfExport);
}))
.Columns(ViewBag.cols)
)
<script>
function load(args) {
args.model.columns.push({ headerText: "Total", width: 60 });
var summarycolumns = [];
for (var i = 0; i < args.model.columns.length; i++) {
if (args.model.columns[i].field == "OrderID") {
summarycolumns.push({ summaryType: ej.Grid.SummaryType.Sum, dataMember: args.model.columns[i].field, displayColumn: args.model.columns[i].field });
}
}
args.model.summaryRows = [{ title: "Sum", summaryColumns: summarycolumns }];
for (var i = 0; i <= args.model.columns.length; i++) {
if (args.model.columns[i].type == "date") {
for (var i = 0; i < this.model.dataSource.length; i++) {
if (this.model.dataSource[i].OrderDate != null)
this.model.dataSource[i].OrderDate = new Date(this.model.dataSource[i].OrderDate);
}
}
}
}
var numberdata = [], sum = 0;
function querycellinfo(args) {
if (args.column.type == "number") {
numberdata.push(args.rowData[args.column.field]);
}
if (args.column.headerText == "Total") {
for (var i = 0; i < numberdata.length; i++) {
sum = sum + numberdata[i];
}
args.cell.innerHTML = sum;
numberdata = []; sum = 0;
}
}
</script> |
|
var color = [];
for (var i = 0; i < 12; i++) {
color.push(getRandomColor());
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
……………………………………………………………………
var numberdata = [], sum = 0;
function querycellinfo(args) {
if (args.model.groupSettings.groupedColumns.length) {
var data = args.model.currentViewData;
var jsondata = this._currentJsonData;
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].items.length; j++) {
var index = jsondata.indexOf(data[i].items[j]);
this.getRowByIndex(index).css("background-color", color[i]);
}
}
}
if (args.column.type == "number") {
numberdata.push(args.rowData[args.column.field]);
}
if (args.column.headerText == "Total") {
for (var i = 0; i < numberdata.length; i++) {
sum = sum + numberdata[i];
}
args.cell.innerHTML = sum;
numberdata = []; sum = 0;
}
} |
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((System.Data.DataTable)ViewBag.dataSource)
.AllowSorting()
.AllowGrouping()
.ShowSummary(true)
.AllowMultiSorting()
.GroupSettings(group => { group.GroupedColumns(col => { col.Add("OrderID"); }); })
.AllowPaging()
.ShowColumnChooser()
.ClientSideEvents(events => events.Load("load”).QueryCellInfo("querycellinfo"))
.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.ExcelExport);
items.AddTool(ToolBarItems.WordExport);
items.AddTool(ToolBarItems.PdfExport);
}))
.Columns(ViewBag.cols)
)
<script>
…………………………………….
var numberdata = [], sum = 0;
function querycellinfo(args) {
if (args.column.type == "number") {
numberdata.push(args.rowData[args.column.field]);
}
if (args.column.headerText == "Total") {
for (var i = 0; i < numberdata.length; i++) {
sum = sum + numberdata[i];
}
args.cell.innerHTML = sum;
numberdata = []; sum = 0;
}
}
</script>
|
Hi Vaibhav,
Sorry for the inconvenience.
Query : I find that it doesn't work when grid is grouped over 2 or more than 2 columns.When the columns are grouped this current view data is updated dynamically based on the grouped columns fields in a hierarchy manner. So it is not feasible to apply the solution to the columns which are grouped dynamically by dragging and dropping.
Query 2 : The grid shows correct data in the grid as [per grouping, but it is exported to excel the summary rows pertaining to grouped columns (from No.2 .... n) doesn't appear.Please share the following details before we proceed with your query.
- Share the screenshot of the exported excel sheet and grid.
- Share the code example of the Grid in both client side and server side.
- Share the Essential studio versions details.
Regards,Vignesh Natarajan.
|
var gridobj = $("Grid").ejGrid("instance"); // use your grid id here.
gridobj.element.ejWaitingPopup("show"); // show the waiting popup
gridobj.element.ejWaitingPopup("hide"); // hide the waiting popup
|
|
var gridobj = $("#Grid").ejGrid("instance"); // use your grid id here. gridobj.element.ejWaitingPopup("show"); // show the waiting popup
gridobj.element.ejWaitingPopup("hide"); // hide the waiting popup
|
