You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/partials/api/design-rendering-cycle.html
+18-2
Original file line number
Diff line number
Diff line change
@@ -45,6 +45,21 @@ <h3 id="current">Current</h4>
45
45
<ul><li>may call buildStyles again if it decides headerHeight has changed</li></ul></li></ul></li>
46
46
</ul>
47
47
48
+
<p>The style builders include:</p>
49
+
50
+
<ul>
51
+
<li><code>GridRenderContainer</code>, which appears to currently apply no styles</li>
52
+
<li><code>uiGrid.updateColumnWidths</code>, which calculates column widths based on the defined settings, including resolving * and ** etc. No rendering
53
+
is involved - all based on the availableWidth. This may be the source of some of the iteration - because availableWidth must in some way be
54
+
based on columnWidth - the canvas doesn't really have an available width. I also have question on why we calculate widths on the grid
55
+
and not on the renderContainer, that may be another source of iteration. Having said that, things like % and * probably apply to the
56
+
full grid width, not to just a container, and we wouldn't expect a column to change width when it changed container (e.g. when we pinned it)</li>
57
+
<li><code>uiGridRenderContainer.update()</code>, which is called for each renderContainer. It determines the
58
+
width of each column in the render container, and the width of the overall render container.</li>
59
+
<li><code>Grid.prototype.getFooterStyles()</code>, sets the columnFooterHeight and the gridFooterHeight based on fixed values declared in the options</li>
60
+
<li>when there are multiple renderContainers (e.g. a left container), the non-body render containers appear to execute first</li>
61
+
</ul>
62
+
48
63
<h3id="vision">Vision</h4>
49
64
50
65
<p>The vision is to make the style calculations more deterministic, and remove any iteration or other dependencies. A single pass through
@@ -55,9 +70,10 @@ <h3 id="vision">Vision</h4>
55
70
<ul>
56
71
<li>calculate all sizing in code, without reference to the sizing of rendered grid elements. We already do most of this for rows
57
72
and columns, the main gap seems to be grid header</li>
58
-
<li>we could reference rendered size to determine the grid's available size (if we want to), which could allow the grid to be more responsive</li>
59
-
<li>layout all the columns first - what render container they're in etc, before we start any sizing</li>
73
+
<li>we could reference rendered size to determine the grid's available size (if we want to), which could allow the grid to be more
74
+
responsive. Probably we already do this.</li>
60
75
<li>calculate the column widths and element heights</li>
76
+
<li>layout all the columns - what render container they're in etc, then size the render containers</li>
61
77
<li>calculate the overall grid sizing based on all the elements (headerHeight, footerHeight, container widths etc)</li>
<p>Occasionally, you may want to provide two or more filters for a single column. This can be accomplished by setting a <code>filters</code> array instead of a <code>filter</code> object.
44
44
The elements of this array are the same as the contents of the <code>filter</code> object in all the previous examples. In fact, <code>filter: { term: 'xxx' }</code> is just an alias
45
-
for <code>filters: [{ term: 'xxx' }]</code>. See the "age" column below for an example.</p><h2id="Example">Example</h2>
45
+
for <code>filters: [{ term: 'xxx' }]</code>. See the "age" column below for an example.</p>
46
+
47
+
<h3id="datefilters">Date filters</h4>
48
+
49
+
<p>The example also includes date filters. These work, however there isn't a date chooser in the filter widget - so you may need to implement a custom field
50
+
if you want to filter dates in this way. </p><h2id="Example">Example</h2>
<strong>Note:</strong> The third column has the filter input disabled, but actually has a filter set in code that requires every company to have an 'a' in their name.
<p>You can suppress the ability to show and hide columns by setting the gridOption <code>gridMenuShowHideColumns: false</code>,
34
34
you can suppress the ability to hide individual columns by setting <code>enableHiding</code> on that columnDef to false.</p><h2id="Example">Example</h2>
0 commit comments