<div class="page-header">
	<h1>UI Grid</h1>
	<p>Angular Data Grid written in <a href="http://angularjs.org">AngularJS</a> and jQuery by the <a href="http://jquery.com">AngularUI Team</a> Team</p>
	<ul class="benefits text-left">
        <li>Native AngularJS implementation, no jQuery</li>
        <li>Performs well with large data sets; even <strong>10,000+</strong> rows</li>
        <li>Plugin architecture allows you to use only the features you need</li>
    </ul>
</div>
<style type="text/css">
	.grid{
		margin-bottom: 20px;
	}
</style>
<div class="page-content page-content-example container-fluid">
  <div class="panel">
    <div class="panel-body">
      <div class="row">

         <!-- Basic -->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Basic Example</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridBasicDemoController">
                  <p>UI-Grid 3.0 (formerly ng-grid), is a 100% angular grid written with no dependencies other than AngularJS. It is designed around a core grid module and features are layered on as angular modules and directives. This keeps the core small and focused while executing very complex features only when you need them.</p>
                  <p>In the core module, you get:</p>
                  <ul>
                    <li>Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered</li>
                    <li>Bind cells to complex properties and functions</li>
                    <li>Column sorting with three states: Asc, Desc, None</li>
                    <li>Column filtering</li>
                    <li>Ability to change header and cell contents with custom templates</li>
                    <li>i18nService allows label translations</li>
                  </ul>
                  <div ui-grid="{data:data}" class="grid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Basic -->

        <!-- Paging -->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Paging</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridPagingDemoController">
                  <p>When <code>ui-grid-paging</code> is enabled, the data is displayed in pages that can be browsed using using the built in paging selector.</p>
                  <div ui-grid="gridOptions" ui-grid-paging class="grid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Paging -->
      </div>

      <div class="row">
        <!-- Control Data-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Control Data</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridDataDemoController">
                  <p>You can swap out data in the grid by simply providing a different reference.</p>
					        <div ui-grid="gridOptions" ui-grid-paging class="grid"></div>
					        <button type="button" id="swapData" class="btn btn-default" ng-click="swapData()">Swap Data</button>
  					      <button type="button" id="addData" class="btn btn-default" ng-click="addData()">Add Data</button>
				          <button type="button" id="removeFirstRow" class="btn btn-default" ng-click="removeFirstRow()">Remove First Row</button>
				          <button type="button" id="reset" class="btn btn-default" ng-click="reset()">Reset</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Control Data-->

        <!-- Single Select-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Control Data</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridSingleSelectDemoController">
                  <p>This grid example uses the ui-grid-selection directive to row selection. To enable, you must include the 'ui.grid.selection' module and you must include the <code>ui-grid-selection</code> directive on your grid element.</p>
					        <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Single Select-->
      </div>

      <div class="row">
        <!-- Edit-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Edit</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridEditDemoController">
                  <p>The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the <code>ui-grid-edit</code> directive on your grid element.</p>
					        <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Edit-->

        <!-- Grid With Footer-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Grid With Footer</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridFooterDemoController">
                  <p>The grid supports a footer row, which can be displayed if showFooterRow option is set to true. You can set an aggregation function for each column or use a custom footer template to display what ever aggregation you wish. Aggregation functions supported are: sum, avg, row count, min, max. You need to inject the uiGridConstants in order to use aggregationTypes enum. You can also pass in a function in order to create your own aggregation logic. If you set the <code>aggregationHideLabel</code> option on the columnDef to true, then the column will show the aggregation but without a label.  Refer the third column in the example below.</p>
					        <div ui-grid="gridOptions" class="grid"></div>
					        <button type="button" class="btn btn-sm btn-default" ng-click="gridOptions.showFooter = !gridOptions.showFooter">Toggle Footer</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Grid With Footer-->
      </div>

      <div class="row">
        <!-- Pagination-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Pagination</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridPaginationDemoController">
                  <p>When <code>ui-grid-pagination</code> is enabled, the data is displayed in pages that can be browsed using a page selector.</p>
					        <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
					        Pagination : 
					        <button type="button" class="btn btn-sm btn-default" ng-click="gridApi.pagination.previousPage()">Previous Page</button>
					        <button type="button" class="btn btn-sm btn-default" ng-click="gridApi.pagination.nextPage()">Next Page</button>
					         Page: {{ gridApi.pagination.getPage() }} Total pages: {{ gridApi.pagination.getTotalPages() }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Pagination-->

        <!-- Control Columns-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Control Columns</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridColumnsDemoController">
                  <p>You can dynamically add and remove columns, the grid watches the column defs and updates appropriately. The columns are by default shown in the order of the <code>columnDefs</code>, although if/when the column move feature arrives the end user will be able to alter that default. You can dynamically change the display name on a column (along with some other column def properties), and call the <code>notifyDataChange</code> api to force an update.</p>
					        <div ui-grid="gridOptions" ui-grid-paging class="grid"></div>
					        <button type="button" class="btn btn-sm btn-default margin-bottom-5" ng-click="addCol()" ng-disabled="disableAdd">Add Company Columns</button>
					        <button type="button" class="btn btn-sm btn-default margin-bottom-5" ng-click="removeLastCol()" ng-disabled="disableRemove">Remove Last Columns</button>
				        	<button type="button" class="btn btn-sm btn-default margin-bottom-5" ng-click="toggleFirstColVisible()">Toggle First Columns Visible</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Control Columns-->
      </div>

      <div class="row">
        <!-- Multi Select-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Multi Select</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridMultiSelectDemoController">
                  <p>This grid example uses the ui-grid-selection directive to row selection. To enable, you must include the 'ui.grid.selection' module and you must include the <code>ui-grid-selection</code> directive on your grid element. By default the module will provide a row header with checkboxes that allow selection of individual rows.</p>
					        <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
					        <button type="button" class="btn btn-default" ng-click="toggleMultiSelect()">Toggle multiSelect</button>  
      				    <button type="button" class="btn btn-default" ng-click="toggleRow1()">Toggle Row 0</button>
				          <button type="button" class="btn btn-default" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button>
				          <button type="button" class="btn btn-default" ng-click="clearAll()">Clear All</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Multi Select-->

        <!-- Styling Grid-->
        <div class="col-md-6">
          <div class="example-wrap">
            <h4 class="example-title">Styling Grid</h4>
            <div class="example">
              <div class="row">
                <div class="col-lg-12" ng-controller="GridStylingDemoController">
                  <style type="text/css">
                    .red-col{
                      background: #f96868 !important;
                      color:white;
                    }
                    .rotated{
                      transform: rotate(180deg);
                      -webkit-transform: rotate(180deg);
                      -ms-transform: rotate(180deg);
                      -moz-transform: rotate(180deg);
                      -o-transform: rotate(180deg);
                    }
                  </style>
                  <p>You can assign a class name to each columnDef, add a grid menu and customize the head of your grid. You will learn more from <a href="http://ui-grid.info/docs/#/tutorial/">UI-Grid Tutorial</a>.</p>
					        <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Styling Grid-->
      </div>

    </div>
  </div>
</div>
