</ iframe > </noscript> <!-- End Google Tag Manager (noscript) --> <div id="BeforeHeaderContent"> </div> <div id="HeaderContent"> <div id="ProjectTitle">ComponentOne True DBGrid Pro 8</div> <div id="PageTitle"><div id="PageTitleText">Visual editing</div></div> </div> <div id="AfterHeaderContent"> <!-- Spacing --> <span id="ToggleAllSectionsLink" class="FunctionLink"> <label id="CollapseAllLabel">Collapse All</label> <label id="ExpandAllLabel" style="display: none;">Expand All</label> </span> </div> <div class="BreadcrumbsContainer"><table><tr><td> <a href="thebasics.html">The Basics</a> > <a href="configuringcolumnsatdesigntime.html">Configuring Columns at Design Time</a> > Visual editing</td></tr></table></div> <div id="BodyContent"> <p>At design time, you can use True DBGrid's visual editing mode to perform the following tasks:</p> <ul> <li> <p>Add and remove columns.</p> </li> <li> <p>Copy columns to and from the Clipboard.</p> </li> <li> <p>Move and resize columns.</p> </li> <li> <p>Adjust the grid's row height.</p> </li> <li> <p>Retrieve field layouts from a bound data source.</p> </li> <li> <p>Split the grid into separate vertical scrolling regions.</p> </li> <li> <p>Save the current grid layout to a file.</p> </li> <li> <p>Load an existing grid layout from a file.</p> </li> <li> <p>Access the grid's property pages.</p> </li> </ul> <p>To enter visual editing mode, click anywhere on the grid with the right mouse button to display the grid's context menu, then choose the <strong>Edit</strong> command.</p><img src="ImagesExt/image18_0.png" width="320" height="318"> <p>The grid control is now activated in-place, which means that you can work with its columns directly on the form. For example, if you point to a dividing line between two columns, the mouse pointer changes to the following symbol.</p><img src="ImagesExt/image18_1.png"> <p>This indicates that the column you are pointing to is ready to be resized. If you drag the dividing line to a different position, the column will change its width accordingly, and the grid will reposition any adjacent columns.</p> <p>Similarly, if you point to a column header, the mouse pointer changes again.</p><img src="ImagesExt/image18_2.jpg"> <p>This symbol indicates that the column is ready to be selected. If you click its header, the entire column is highlighted. You can also drag the mouse pointer within the column header area to extend the selection to other adjacent columns. To cancel the selection and return the columns to their normal, unhighlighted state, click any cell within the grid's data area.</p> <p>Column selection serves two purposes in visual editing mode:</p> <ol> <li> <p>Selected columns can be moved to a different position within the grid by dragging within the column header (provided that <a href="http://helpcentral.componentone.com/nethelp/truedbgrid8/#!allowcolmoveproperty.htm" target="_self">AllowColMove</a> is <em><strong>True</strong></em> for the current split).</p> </li> <li> <p>Selected columns act as arguments for some visual editing menu commands.</p> </li> </ol> <p>If the grid is already in visual editing mode, right-clicking it again displays a different context menu. This is the visual editing menu, which provides commands for manipulating columns, splits, and layouts.</p><img src="ImagesExt/image18_3.png" width="320" height="324"> <p>For more information on visual editing, as well as an explanation of the visual editing menu commands, see<a href="http://helpcentral.componentone.com/nethelp/truedbgrid8/#!designtimeinteraction.htm" target="_self">Design Time Interaction</a>.</p> <a name="seealsobookmark"></a> </div> <div id="FooterContent"> <p> </p><p> </p><hr style="height: 1px"><p>Copyright (c) <script type="text/javascript"> var theDate=new Date() document.write(theDate.getFullYear()) </script> GrapeCity, inc. All rights reserved. <script> $(document).ready(function() { if (!(window.self !== window.top)) { // Not running in a frameset // Get the page name var pageName = location.href.substring(location.href.lastIndexOf("/") + 1); if (pageName.indexOf("#") != -1) { pageName = pageName.substring(0, pageName.indexOf("#")); } // Append to webframe.html var framePage = "webframe.html#" + pageName; location.href = framePage; } }); </script></p> <a target="_blank" href="http://our.componentone.com/groups/">Product Support Forum</a> | <a target="_blank" href="http://feedback.componentone.com/forums/255792-activex-documentation">Documentation Feedback</a> </div> </body> </html>