Scroll Layout Fixed Ares like Excel Freeze Pan Option

Support
#1

Hi,

I have a GridLayout inside a Scroll Layout. The grid will be having so many columns and rows which sometimes requires scrollbars to view the data.

I need top few rows to be frozen for the vertical scroll, similarly the first column should be frozen for the horizontal scroll.

You can refer the below picture to see how my grid looks and what is my requirement on scrolling is concerned.

image

This grid is initially created with only one column as static items. All other columns are created programatically.

Below is my XML descriptor for creating this grid.

<tab id="incomeStatement" caption="msg://incomeStatement" margin="true" spacing="true"
	 expand="incomeScroll">
	<scrollBox id="incomeScroll" scrollBars="both" spacing="true" width="100%"
			   margin="true" responsive="true">
		<grid id="incomeGrid" responsive="true" stylename="myGrid" align="MIDDLE_CENTER">
			<columns>
				<column flex=""/>
			</columns>
			<rows>
				<row>
					<label align="MIDDLE_LEFT" stylename="scoring" value="msg://incomeStatementData"
						   rowspan="1" colspan="1" width="100%"/>
				</row>
				<row id="header" flex="2.0">
					<label align="MIDDLE_RIGHT" stylename="bold"
						   value="msg://financialDescription"/>
				</row>
				<row>
					<label height="10px"/>
				</row>
				<row id="financialYearRow">
					<label align="MIDDLE_RIGHT" stylename="bold"
						   value="msg://financialYear:"/>
				</row>
				<row id="financialDateRow">
					<label align="MIDDLE_RIGHT" stylename="bold"
						   value="msg://financialDate:"/>
				</row>
				<row>
					<label height="10px"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://operatingRevenues"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://otherRevenues"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjustmentToTotalRevenues"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://totalRevenue"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://costOfGoodSold"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://sellingGeneralAdminExpenses"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjustmentToSgaExpenses"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://totalSgaExpenses"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://researchDevelopmentExpenses"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://depreciationAmortizationTotal"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://otherOperatingExpenses"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjustmentToEBIT"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://operatingIncome"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://depreciationAmortizationTotalFromCashFlowStatement"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://operatingLeasesDepreciationExpenseAdj"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://ebitda"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://netRentalExpenseAdj"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://stockBasedCompensationAdj"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjustmentToEBITDA"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjEBITDA"/>
				</row>
				<row>
					<label height="10px"/>
				</row>
				<row>
					<label height="10px"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://interestExpense"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://capitalizedInterestAdj"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjustmentToInterestExpense"/>
				</row>
				<row>
					<label align="MIDDLE_LEFT" value="msg://adjInterestExpense"/>
				</row>
			</rows>
		</grid>
	</scrollBox>
</tab>

How can I do this functionality in CUBA?

Thanks,
Hari

#2

Hi,

Take a look at DataGrid UI Component. You will need to enable frozenColumnCount feature as it shown in the demo: https://demo.cuba-platform.com/sampler/#main/0/sample?id=datagrid-frozen-columns

#3

Hi Yuriy,

Thanks for your response.

I use GridLayout for Cross Tab editing for the below requirement.

I don’t see frozen column option in GridLayout. How can I incorporate same functionality in GridLayout too?

Thanks,
Hari

#4

FrozenColumnCount is supported only for DataGrid.

#5

I have 2 questions.

  1. Is there any way I can create frozen rows & frozen columns in GridLayout?
  2. Is there any way I can create cross tab editor in DataGrid?
#6

Hi Yuriy/@gorelov,

Do you have any idea how this can be done?

Thanks,
Hari

#7

Hi,

  1. imposible
  2. DataGrid has inline editor, see this demo

Gleb

#8

Can I do cross tab with data grid?

Hari

#9

There is no build in functionality for cross tab editing. But you can try to implement it yourself.

Gleb

#10

Okay, I will try it.

Thanks,
Hari