Grouped datatable logi info with multiple API calls
Hi,
In the grouped data table, is there a way to put the summary row at the very top of every row instead of the bottom of every group? Also, the multiple levels of grouping and layout is achievable in the following manner using built-in components?
Lastly, since the second and third level data can be large JSON, how can I achieve on-demand data loading upon clicking of any parent element.
0
-
This sample should give you an idea of how to achieve this.
First off it uses two report definitions, one for your groupings and the other for your detail data.
By using two definitions, you can limit the initial load of the detail data by using a subReport mode of iFrame. You can set the More Info Row Show Mode to None if you want to initially hide the details and have the user click to interact.
For the Summaries, use Group Header rows instead. You won't get the automatic summarization, so you will have to create group aggregate columns for each value and use that respective token in the headers.Padding and margins will need to be removed for the More Info Row, Sub Report element. Then on the Sub Report itself you will need to remove any margin or padding on the HTML and Body.
The trick here is in getting all of the columns to align, since we are actually rendering nested tables. To do this you will need to set the table layout to fixed and specify a width for each column on both the main report and sub report. Since your layout is fairly straight forward, I would do this using css rather than Logi's attributes.
Main Report
<Report ID="LogiForum.Grouped_DataTable">
<Body>
<DataTable ID="dt">
<DataLayer Type="XMLFile" XMLFile="NW_Orders.xml">
<GroupFilter GroupColumn="ShipCountry" ID="gfShipCountry" KeepGroupedRows="True">
<GroupAggregateColumn AggregateColumn="OrderID" AggregateFunction="DistinctCount" ID="CountOrderID" />
<GroupFilter GroupColumn="CustomerID" ID="gfCustomerID" KeepGroupedRows="False">
<GroupAggregateColumn AggregateColumn="OrderID" AggregateFunction="DistinctCount" ID="CountOrderIDCustomer" />
</GroupFilter>
</GroupFilter>
</DataLayer>
<Remark>
<AutoColumns />
</Remark>
<GroupHeaderRow GroupFilterID="gfShipCountry">
<Column>
<Label Caption="@Data.ShipCountry~" />
</Column>
<Column>
<Label Caption="@Data.CountOrderID~" />
</Column>
<Column>
<Label Caption="@Data.CountOrderID~" />
</Column>
<Column>
<Label Caption="@Data.CountOrderID~" />
</Column>
</GroupHeaderRow>
<GroupHeaderRow GroupFilterID="gfCustomerID">
<Column>
<Spaces Size="5" />
<Label Caption="@Data.CustomerID~" />
</Column>
<Column>
<Label Caption="@Data.CountOrderIDCustomer~" />
</Column>
<Column>
<Label Caption="@Data.CountOrderIDCustomer~" />
</Column>
<Column>
<Label Caption="@Data.CountOrderIDCustomer~" />
</Column>
</GroupHeaderRow>
<DataTableColumn Header="Customer">
<Spaces Size="10" />
<Label Caption="@Data.OrderID~">
<Action Type="ShowElement" ElementID="mirDetails" ID="ase" />
</Label>
</DataTableColumn>
<DataTableColumn Header="ShipVia">
<Label Caption="1" />
</DataTableColumn>
<DataTableColumn Header="ShipVia">
<Label Caption="1" />
</DataTableColumn>
<DataTableColumn Header="ShipVia">
<Label Caption="1" />
</DataTableColumn>
<MoreInfoRow ID="mirDetails" ShowModes="None" Class="p-0 m-0">
<IncludeFrame ID="subReport" SubReportMode="IncludeFrame" Class="p-0 m-0" Width="100" WidthScale="%" FrameBorder="0">
<Target Type="IncludeFrameReport" Report="LogiForum.Grouped_DataTableSub" ID="tgt" />
<LinkParams CustomerID="@Data.CustomerID~" />
</IncludeFrame>
</MoreInfoRow>
</DataTable>
<IncludeHtml Html="<style>
 .p-0 {
 padding: 0px !important;
 }
 .m-0 {
 margin: 0px !important;
 }
 
 .rdThemeDataTable {
 layout: fixed;
 }
 .rdThemeDataTable th:first-of-type,
 .rdThemeDataTable td:first-of-type {
 width: 200px !important;
 }
 
 .rdThemeDataTable th:not(:first-of-type),
 .rdThemeDataTable td:not(:first-of-type) {
 width: 200px !important;
 }
</style>" />
</Body>
<ideTestParams />
</Report>Sub Report
<Report ID="LogiForum.Grouped_DataTableSub">
<Body>
<DataTable ID="dt2">
<DataLayer Type="XMLFile" XMLFile="NW_Orders.xml">
<CompareFilter CompareType="=" DataColumn="CustomerID" ID="CustomerID" CompareValue="@Request.CustomerID~" />
</DataLayer>
<DataTableColumn Header="None">
<Spaces Size="10" />
<Label Caption="@Data.OrderID~" />
</DataTableColumn>
<DataTableColumn Header="None">
<Label Caption="1" />
</DataTableColumn>
<DataTableColumn Header="None">
<Label Caption="1" />
</DataTableColumn>
<DataTableColumn Header="None">
<Label Caption="1" />
</DataTableColumn>
</DataTable>
<IncludeHtml Html="<style>
 html, body {
 padding: 0px !important;
 margin: 0px !important;
 }
 .p-0 {
 padding: 0px !important;
 }
 .m-0 {
 margin: 0px !important;
 }
 .rdThemeDataTable {
 layout: fixed;
 }
 .rdThemeDataTable th:first-of-type,
 .rdThemeDataTable td:first-of-type {
 width: 200px !important;
 }
 
 .rdThemeDataTable th:not(:first-of-type),
 .rdThemeDataTable td:not(:first-of-type) {
 width: 200px !important;
 }
 
</style>" />
</Body>
<ideTestParams CustomerID="" />
</Report>Data for reports
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Row>
<OrderID>10248</OrderID>
<CustomerID>VINET</CustomerID>
<EmployeeID>5</EmployeeID>
<OrderDate>2010-07-04 00:00:00.000</OrderDate>
<RequiredDate>2010-08-01 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-16 00:00:00.000</ShippedDate>
<ShipVia>3</ShipVia>
<Freight>32.38</Freight>
<ShipName>Vins et alcools Chevalier</ShipName>
<ShipAddress>59 rue de l'Abbaye</ShipAddress>
<ShipCity>Reims</ShipCity>
<ShipPostalCode>51100</ShipPostalCode>
<ShipCountry>France</ShipCountry>
</Row>
<Row>
<OrderID>10249</OrderID>
<CustomerID>TOMSP</CustomerID>
<EmployeeID>6</EmployeeID>
<OrderDate>2010-07-05 00:00:00.000</OrderDate>
<RequiredDate>2010-08-16 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-10 00:00:00.000</ShippedDate>
<ShipVia>1</ShipVia>
<Freight>11.61</Freight>
<ShipName>Toms Spezialitäten</ShipName>
<ShipAddress>Luisenstr. 48</ShipAddress>
<ShipCity>Münster</ShipCity>
<ShipPostalCode>44087</ShipPostalCode>
<ShipCountry>Germany</ShipCountry>
</Row>
<Row>
<OrderID>10250</OrderID>
<CustomerID>HANAR</CustomerID>
<EmployeeID>4</EmployeeID>
<OrderDate>2010-07-08 00:00:00.000</OrderDate>
<RequiredDate>2010-08-05 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-12 00:00:00.000</ShippedDate>
<ShipVia>2</ShipVia>
<Freight>65.83</Freight>
<ShipName>Hanari Carnes</ShipName>
<ShipAddress>Rua do Paço #67</ShipAddress>
<ShipCity>Rio de Janeiro</ShipCity>
<ShipRegion>RJ</ShipRegion>
<ShipPostalCode>05454-876</ShipPostalCode>
<ShipCountry>Brazil</ShipCountry>
</Row>
<Row>
<OrderID>10251</OrderID>
<CustomerID>VICTE</CustomerID>
<EmployeeID>3</EmployeeID>
<OrderDate>2010-07-08 00:00:00.000</OrderDate>
<RequiredDate>2010-08-05 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-15 00:00:00.000</ShippedDate>
<ShipVia>1</ShipVia>
<Freight>41.34</Freight>
<ShipName>Victuailles en stock</ShipName>
<ShipAddress>2 rue du Commerce</ShipAddress>
<ShipCity>Lyon</ShipCity>
<ShipPostalCode>69004</ShipPostalCode>
<ShipCountry>France</ShipCountry>
</Row>
<Row>
<OrderID>10252</OrderID>
<CustomerID>SUPRD</CustomerID>
<EmployeeID>4</EmployeeID>
<OrderDate>2010-07-09 00:00:00.000</OrderDate>
<RequiredDate>2010-08-06 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-11 00:00:00.000</ShippedDate>
<ShipVia>2</ShipVia>
<Freight>51.3</Freight>
<ShipName>Suprêmes délices</ShipName>
<ShipAddress>Boulevard Tirou #255</ShipAddress>
<ShipCity>Charleroi</ShipCity>
<ShipPostalCode>B-6000</ShipPostalCode>
<ShipCountry>Belgium</ShipCountry>
</Row>
<Row>
<OrderID>10253</OrderID>
<CustomerID>HANAR</CustomerID>
<EmployeeID>3</EmployeeID>
<OrderDate>2010-07-10 00:00:00.000</OrderDate>
<RequiredDate>2010-07-24 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-16 00:00:00.000</ShippedDate>
<ShipVia>2</ShipVia>
<Freight>58.17</Freight>
<ShipName>Hanari Carnes</ShipName>
<ShipAddress>Rua do Paço #67</ShipAddress>
<ShipCity> Rio de Janeiro</ShipCity>
<ShipRegion>RJ</ShipRegion>
<ShipPostalCode>05454-876</ShipPostalCode>
<ShipCountry>Brazil</ShipCountry>
</Row>
<Row>
<OrderID>10254</OrderID>
<CustomerID>CHOPS</CustomerID>
<EmployeeID>5</EmployeeID>
<OrderDate>2010-07-11 00:00:00.000</OrderDate>
<RequiredDate>2010-08-08 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-23 00:00:00.000</ShippedDate>
<ShipVia>2</ShipVia>
<Freight>22.98</Freight>
<ShipName>Chop-suey Chinese</ShipName>
<ShipAddress>Hauptstr #31</ShipAddress>
<ShipCity>Bern</ShipCity>
<ShipPostalCode>3012</ShipPostalCode>
<ShipCountry>Switzerland</ShipCountry>
</Row>
<Row>
<OrderID>10255</OrderID>
<CustomerID>RICSU</CustomerID>
<EmployeeID>9</EmployeeID>
<OrderDate>2010-07-12 00:00:00.000</OrderDate>
<RequiredDate>2010-08-09 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-15 00:00:00.000</ShippedDate>
<ShipVia>3</ShipVia>
<Freight>148.33</Freight>
<ShipName>Richter Supermarkt</ShipName>
<ShipAddress>Starenweg 5</ShipAddress>
<ShipCity>Genève</ShipCity>
<ShipPostalCode>1204</ShipPostalCode>
<ShipCountry>Switzerland</ShipCountry>
</Row>
<Row>
<OrderID>10256</OrderID>
<CustomerID>WELLI</CustomerID>
<EmployeeID>3</EmployeeID>
<OrderDate>2010-07-15 00:00:00.000</OrderDate>
<RequiredDate>2010-08-12 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-17 00:00:00.000</ShippedDate>
<ShipVia>2</ShipVia>
<Freight>13.97</Freight>
<ShipName>Wellington Importadora</ShipName>
<ShipAddress>Rua do Mercado #12</ShipAddress>
<ShipCity>Resende</ShipCity>
<ShipRegion>SP</ShipRegion>
<ShipPostalCode>08737-363</ShipPostalCode>
<ShipCountry>Brazil</ShipCountry>
</Row>
<Row>
<OrderID>10257</OrderID>
<CustomerID>HILAA</CustomerID>
<EmployeeID>4</EmployeeID>
<OrderDate>2010-07-16 00:00:00.000</OrderDate>
<RequiredDate>2010-08-13 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-22 00:00:00.000</ShippedDate>
<ShipVia>3</ShipVia>
<Freight>81.91</Freight>
<ShipName>HILARION-Abastos</ShipName>
<ShipAddress>Carrera 22 con Ave. Carlos Soublette #8-35</ShipAddress>
<ShipCity>San Cristóbal</ShipCity>
<ShipRegion>Táchira</ShipRegion>
<ShipPostalCode>5022</ShipPostalCode>
<ShipCountry>Venezuela</ShipCountry>
</Row>
<Row>
<OrderID>10258</OrderID>
<CustomerID>ERNSH</CustomerID>
<EmployeeID>1</EmployeeID>
<OrderDate>2010-07-17 00:00:00.000</OrderDate>
<RequiredDate>2010-08-14 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-23 00:00:00.000</ShippedDate>
<ShipVia>1</ShipVia>
<Freight>140.51</Freight>
<ShipName>Ernst Handel</ShipName>
<ShipAddress>Kirchgasse 6</ShipAddress>
<ShipCity>Graz</ShipCity>
<ShipPostalCode>8010</ShipPostalCode>
<ShipCountry>Austria</ShipCountry>
</Row>
<Row>
<OrderID>10259</OrderID>
<CustomerID>CENTC</CustomerID>
<EmployeeID>4</EmployeeID>
<OrderDate>2010-07-18 00:00:00.000</OrderDate>
<RequiredDate>2010-08-15 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-25 00:00:00.000</ShippedDate>
<ShipVia>3</ShipVia>
<Freight>3.25</Freight>
<ShipName>Centro comercial Moctezuma</ShipName>
<ShipAddress>Sierras de Granada 9993</ShipAddress>
<ShipCity>México D.F.</ShipCity>
<ShipPostalCode>5022</ShipPostalCode>
<ShipCountry>Mexico</ShipCountry>
</Row>
<Row>
<OrderID>10260</OrderID>
<CustomerID>OTTIK</CustomerID>
<EmployeeID>4</EmployeeID>
<OrderDate>2010-07-19 00:00:00.000</OrderDate>
<RequiredDate>2010-08-16 00:00:00.000</RequiredDate>
<ShippedDate>2010-07-29 00:00:00.000</ShippedDate>
<ShipVia>1</ShipVia>
<Freight>55.09</Freight>
<ShipName>Ottilies Käseladen</ShipName>
<ShipAddress>Mehrheimerstr. 369</ShipAddress>
<ShipCity>Köln</ShipCity>
<ShipPostalCode>50739</ShipPostalCode>
<ShipCountry>Germany</ShipCountry>
</Row>
</Root>VISUI can help provide custom solutions to you Logi Analytics Applicaitons.
0
Please sign in to leave a comment.
Comments
1 comment