Hello,
in a ASP.Net Webform i use a ej:Grid with a asp:SqlDataSource bound to the DataSourceID of the grid. I also have an intial grouping via
<GroupSettings ShowGroupedColumn="True" GroupedColumns="Band,TagText,MaterialDescription" ShowToggleButton="True"></GroupSettings>
I summarize the data of the grouped columns via
<SummaryRows>
<ej:SummaryRow Title="Quadratmeter" ShowCaptionSummary="True" ShowTotalSummary="False">
<SummaryColumn>
<ej:SummaryColumn SummaryType="Sum" Format="{0:N0}" DisplayColumn="Quantity"
DataMember="Quantity" />
</SummaryColumn>
</ej:SummaryRow>
</SummaryRows>
I also collapse the groups via
<ClientSideEvents ToolbarClick="onToolBarClick" DataBound="dataBound" ActionComplete="complete" CellSelected="OnCellSelected" />
and
function dataBound(args) {
this.collapseAll();
}
Works all perfect.
But
Hi Patric Gehl,
Query: How can i expand the groups to the 3.th level ( MaterialDescription) in the initial JS-function?
Before we start proceeding with your query, we request you to share with us the details below to provide you with the solution as early as possible.
Query: How can i get the summary value(s) of some selected 'Group-row'?
We are unclear about this query. We need some more additional details. Please share the below details.
Regards,
Pon selva
Hi Pon Selva,
to your questions:
Part 1:
<GroupSettings ShowGroupedColumn="True" GroupedColumns="Band,TagText,MaterialDescription" ShowToggleButton="True"></GroupSettings>
So in future, more than 3 groups are possble.
Since this is an initial grouping, the grid opens with the grouped columns expanded. I need the grid only open to level 2 so that i see the first, the second level 'expanded' but the 3th level collapsed. (See the screenshot in the attached pdf).
Hi Patric Gehl,
Query: Since this is an initial grouping, the grid opens with the grouped columns expanded. I need the grid only open to level 2 so that i see the first, the second level 'expanded' but the 3th level collapsed.
We achieved your requirement by using the expandCollapse method and dataBound event of the grid. Using this method, you can expand or collapse the row based on the row state in grid.
Please refer to the below code example,
<ej:Grid ID="Grid1" AllowSorting="true" AllowPaging="True" AllowGrouping="true" AllowSelection="true" Selectiontype="Multiple" ShowSummary="True" runat="server">
…..
<ClientSideEvents DataBound="dataBound"/>
…
function dataBound(args) { var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0]; var obj = $("#Grid1").ejGrid('instance'); obj.collapseAll();
//for expand first level var level1 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").length; for (var i = 0; i < level1; i++) { obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").first()); } //for expand second level var level2 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").length; for (var i = 0; i < level2; i++) { obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").first()); }
}
|
In the above code snippet, in the databound event, first collapse all rows using the collapseAll method. and collect the length of the first and second group level. Based on the value, we expand the row using the expandCollapse method.
Please refer to the below screenshot,
Please refer to the below API documentation,
https://help.syncfusion.com/aspnet/grid/toolbar#custom-toolbar-items
https://help.syncfusion.com/api/js/ejgrid#methods:expandcollapse
Query: How can i get the summary value(s) of some selected 'Group-row'?
We achieved your requirement by using the custom toolbar feature and cellSelected event and clearCellSelection method of the grid.
Please refer to the below code snippet,
<input type="button" onclick="clicked" value="click" /> <ej:Grid ID="Grid1" AllowSorting="true" AllowPaging="True" AllowGrouping="true" AllowSelection="true" Selectiontype="Multiple" ShowSummary="True" runat="server">
<ClientSideEvents DataBound="dataBound" CellSelected="selecting" ToolbarClick="onToolBarClick"/> <SelectionSettings SelectionMode="cell" /> <ToolbarSettings ShowToolbar="true"> <CustomToolbarItem> <ej:CustomToolbarItem TemplateID="#SelectedRecord" /> <ej:CustomToolbarItem TemplateID="#Clear" /> <ej:CustomToolbarItem TemplateID="#Result" />
</CustomToolbarItem> </ToolbarSettings>
<script id="Result" type="text/x-jsrender"> <div> Result: <input type="text" id="total" value="0"/>
</div> </script>
<script id="SelectedRecord" type="text/x-jsrender"> <div> SelectedRecord Count </div> </script>
<script id="Clear" type="text/x-jsrender"> <div> Clear Selection </div> </script>
function selecting(args) {
if (args.cellIndex == 3) {
selected_val += args.selectedData.Freight;//calculate the selected cell value } } function onToolBarClick(args) { var obj = $("#Grid1").ejGrid('instance'); var total_obj = document.getElementById('total'); if (args.itemName == "SelectedRecord") {
total_obj.value = selected_val;//set the selected value
} else if (args.itemName == "Clear") obj.clearCellSelection(); //clear the selection total_obj.value = 0; // set the initial value
} |
In the above code snippet, we calculate the value in the cellSelected event while selecting the summary cell value. We set the value in the toolbar click event based on the text value of the toolbar. And then use the clearCellSelection method to clear the selection.
Please refer to the below screenshot,
Please refer to the below sample,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/webform_-sample-699144457
Please refer to the below API documentation,
https://help.syncfusion.com/api/js/ejgrid#methods:clearcellselection
https://help.syncfusion.com/api/js/ejgrid#events%3Atoolbarclick
https://help.syncfusion.com/api/js/ejgrid#events:cellselected
Please refer to the below help documentation,
https://help.syncfusion.com/aspnet/grid/toolbar#custom-toolbar-items
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Hi Pon Selva,
thanks for your quick reply and the code. But in my solution are some problems:
DataSourceID="SQL_DS_ZPPR" that is a ASP.Net SqlDataSource!
<asp:SqlDataSource ID="SQL_DS_ZPPR" runat="server" ConnectionString="<%$ ConnectionStrings:NSG_PRODAT_Con %>" SelectCommand="Proc_Sel_ZPPR" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="hf_Von" DefaultValue="01.08.2022 00:00:00" Name="Von" PropertyName="Value" Type="DateTime" />
<asp:ControlParameter ControlID="hf_Bis" DefaultValue="01.08.2022 23:59:59" Name="Bis" PropertyName="Value" Type="DateTime" />
<asp:ControlParameter ControlID="hf_L1" DefaultValue="3" Name="Band" PropertyName="Value" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
But your code for collapse to 2. level workes perfect!! So i use a button and call a function on click!
function MyExpand() {
var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0];
var obj = $("#grd_ZPPR").ejGrid('instance');
obj.collapseAll();
//for expand first level
var level1 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").length;
for (var i = 0; i < level1; i++) {
obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[0] + "']").first());
}
//for expand second level
var level2 = $(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").length;
for (var i = 0; i < level2; i++) {
obj.expandCollapse($(".e-recordpluscollapse[data-ej-mappingname = '" + obj.model.groupSettings.groupedColumns[1] + "']").first());
}
}
But i have one question:
The item var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0];
val is never used in the codeblock; so why is it needed?
var total_obj = document.getElementById('total'); //get the input field
var summe = parseInt(total_obj.value); //change the text to int
if (args.cellIndex == 9) { //this is the cell of my summary
summe += parseInt(args.selectedData.Quantity); //calculate the selected cell value as int
total_obj.value = summe; // calculated value/int to the input field
}
}
This works for the selection of cell-values in the grid. But the 'cell-click event' is not fired for summary values in collapsed group-rows!! And i need the values in this cells!
Hi Patric Gehl,
Query: The dataBound-event is never fired! Maybe this is a problem with the datasource
We checked your query by preparing sample(using sql datasource) based on your code snippet, but we were unable to reproduce the problem.
Please refer to the below sample,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/webform_-sample-932964669
Please refer to the below video demo,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/VIDEOD~2-524882308
If you still facing issue, please provide the following information
The requested information will be helpful to proceed further.
Query: But i have one question: The item var val = document.getElementsByClassName('e-groupcaptionrow')[1].cells[0]; val is never used in the codeblock; so why is it needed?
There is no need to use the val property. You can remove this code.
Query: But the 'cell-click event' is not fired for summary values in collapsed group-rows!! And i need the values in this cells!
Query: How can i select the values of several of these cells??
Currently, we don’t have support for selecting the summary cells or rows. You can select the "grouped rows /cells" value in the grid.
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Hi Pon Selva,
i have no idea why some events (like dataBound) are not fired! But i found a working solution for me: I use the document.ready event! Here i collaps the grid to my wished level and bind a click-event on the grid and the cell!
I identify the group summary cell by the css " e-scroller e-groupcaptionsummary", catch the value and change the backround (so i see what was clicked) .
$(document).ready(function () {
MyExpand();
$("#grd_ZPPR_Delta").click(function (args) {
if (args.target.className == "e-scroller e-groupcaptionsummary") {
var clickedCell = $(args.target).closest("td");
clickedCell.css("background", "red");
var total_obj = document.getElementById('total'); //get the input field
var summe = parseInt(total_obj.value); //change the text to int
summe += parseInt(clickedCell.text().replace(',', '').replace('.', '')); //calculate
total_obj.value = summe; // calculated value/int to the input field
}
});
});
I then use a button outside the grid that trigger the 'Reset-function'
<button onclick="MyClear()">Löschen</button>
function MyClear() {
var total_obj = document.getElementById('total');
total_obj.value = 0; // set the initial value
$("#grd_ZPPR_Delta").find("tr").each(function () { //get all rows in table
var ratingTd = $(this).find('td');//Refers to TD element
if (ratingTd.css("background") == "red") { // is this a 'red-one'?
ratingTd.css("background", "#c8c8c8"); // so change it back!
}
});
}
This works for me; but your first reply pushed me in the right direction.
So thanks for your time and support!
Do you see some problems or possible optimizations on my code?
Thanks
Patric
Hi Patric Gehl,
Query: Do you see some problems or possible optimizations on my code?
We have checked your query by using your shared code snippet. You can use your code snippet to calculate the group summary.
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly