Aggregate columns
Hello,
I am working on a project as a college project using the web forms app in Visual Basic. I was wondering if it is possible to get the aggregate column to display totals for each column as demonstrated in the screenshot below.
Thanks!
SIGN IN To post a reply.
11 Replies
Hi Joshua,
Thanks for contacting Syncfusion Forums.
QUERY: Aggregate columns
We suggest you to use the Summary feature of grid for showing the aggregate for the columns. We have already discussed the same in the below help documentation,
For displaying the total of all the columns in a single summary row, we can use the "SummaryColumn" property of the Summary feature as show below,
<ej:Grid ID="OrdersGrid" runat="server" ShowSummary="true">
<SummaryRows>
<ej:SummaryRow Title="Sum">
<SummaryColumn>
<ej:SummaryColumn SummaryType="Sum"
DisplayColumn="EmployeeID" DataMember="EmployeeID" />
<ej:SummaryColumn SummaryType="Sum" Format="{0:C}"
DisplayColumn="Freight" DataMember="Freight" />
</SummaryColumn>
</ej:SummaryRow>
</SummaryRows>
<Columns>
<ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="True" ></ej:Column>
<ej:Column Field="EmployeeID" HeaderText="EmployeeID"></ej:Column>
<ej:Column Field="Freight" HeaderText="Freight"></ej:Column>
</Columns>
</ej:Grid> |
In the above example, we have defined summary for both the EmployeeID column and Freight column.
Please check the below screenshot,
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
That worked perfectly. But now two more issues,,,
1. How do I get the values of a selected row display in the form as demonstrated in the cs below? What I want is, when I click on the row within the grid, the values should be displayed on that input field. However, I don't want to use the code behind for this as I have had issues with the refreshing behavior...
2. How can I reduce the height of the summary row and also get the columns aligned to the corresponding datamember column AND the header font size? I have tried to use a custom css, not working...
Thank you
Hi Joshua,
Thanks for your update.
QUERY1: when i click on row of grid, the values should be displayed on that input field
We have achieved your requirement by using the RowSelected event of the grid. In the RowSelected event, we have accessed the selected row's data from the arguments (args.data) and appended it to the corresponding input field as shown below,
|
<div>
<asp:Label ID="labelId" runat="server">OrderID</asp:Label>
<asp:TextBox ID="input1" runat="server" ToolTip="Enter OrderID" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="label1" runat="server">EmployeeID</asp:Label>
<asp:TextBox ID="input2" runat="server" ToolTip="EnterEmployeeID" ClientIDMode="Static"></asp:TextBox>
</div>
<div>
<span>Grid</span>
</div>
<ej:Grid ID="OrdersGrid" runat="server" ShowSummary="true" AllowScrolling="true" Height="100">
<ClientSideEvents RowSelected="rowSelected"/>
<SummaryRows>
---------
</SummaryRows>
<Columns>
<ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="True" TextAlign="Left" ></ej:Column>
<ej:Column Field="EmployeeID" HeaderText="EmployeeID" TextAlign="Right"></ej:Column>
</Columns>
</ej:Grid>
<script>
function rowSelected(args) {
var data1 = args.data.OrderID; // getting OrderID column value from the selected column
var data2 = args.data.EmployeeID; // getting EmployeeID column value from the selected column
$('#input1').val(data1); //setting OrderID value to the input field
$('#input2').val(data2); //setting EmployeeID value to the input field
}
</script>
<style>
.e-gridSummaryRows td.e-summaryrow {
line-height: 14px; /* setting height of summary row */
font-size:14px; /* setting font-size similar to the header font*/
}
.e-grid .e-summaryscroll {
padding-right: 7px; /* aligning data member to it's corresponding column */
}
</style>
|
QUERY2: Reduce height of summary row, get columns aligned to the corresponding data member column and header font size
We have achieved your requirement using CSS customization as shown in the above code.
Please check the below output screenshot,
Please check the below help documentation,
Still facing issue, please get back to us with the below details,
- Complete Grid rendering code
- Share us your Essential Studio Version details
- Screenshot of error with stack race (if any) and Video demonstrating the issue
Regards,
Padmavathy Kamalanathan
One last query,
I am using vb as my code, how do I loop through and get the selected (checked) rows through to my code...
Hi Joji,
Thanks for your update.
QUERY: Get selected rows
We have achieved your requirement by collecting the selected records from the "getSelectedRecords" method of grid in the client end "RowSelected" event of grid. Then we have assigned that value to the hidden element and accessed that value at server end using "OnServerRowSelected" server end event. You can also do the same in the button's server end event.
Please check the below code,
|
<asp:HiddenField ID="SelectRecords" ClientIDMode="Static" runat="server" />
<ej:Grid ID="OrdersGrid" runat="server"
OnServerRowSelected="OrdersGrid_ServerRowSelected">
<ClientSideEvents RowSelected="rowSelected" />
-----
</ej:Grid>
<script>
function rowSelected(args) {
var record = this.getSelectedRecords(); //collecting the selected records
$("#SelectRecords").val(JSON.stringify(record)); //assigning to hidden element
}
</script>
Protected Sub OrdersGrid_ServerRowSelected(ByVal sender As Object,
ByVal e As Syncfusion.JavaScript.Web.GridEventArgs)
Dim ser As JavaScriptSerializer = New JavaScriptSerializer()
Dim sel As List(Of Orders) = ser.Deserialize(Of List(Of Orders))(Me.SelectRecords.Value)
End Sub
|
Please check the below screenshots,
Please check the below help documentations,
Kindly get back to us for further assistance.
Regards,
Padmavathy Kamalanathan
May you please attached your code on this example...
SIGN IN To post a reply.
