jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
36 lines (34 loc) • 1.64 kB
HTML
<jqxGrid [theme]="'material'" #myGrid
(onGroupexpand)="myGridOnGroupExpand($event)" (onGroupcollapse)="myGridOnGroupCollapse($event)"
[width]="getWidth()" [height]="280" [source]="dataAdapter" [columns]="columns"
[groupable]="true" [pageable]="true" [groups]="['City']">
</jqxGrid>
<div style="margin-top: 30px">
<div style="float: left; margin-left: 20px">
<jqxButton [theme]="'material'" (onClick)="ExpandBtnOnClick()" [width]="125" [height]="25">Expand Group</jqxButton>
<br />
<jqxButton [theme]="'material'" (onClick)="CollapseBtnOnClick()" [width]="125" [height]="25">Collapse Group</jqxButton>
<br />
<span style="margin-top: 10px">Group:</span>
<jqxInput [theme]="'material'" #myInput style="margin-left: 10px; margin-top: 10px" [width]="20" [value]="1"></jqxInput>
</div>
<div style="float: left; margin-left: 20px">
<jqxButton [theme]="'material'" (onClick)="ExpandAllBtnOnClick()" [width]="125" [height]="25">Expand All</jqxButton>
<br />
<jqxButton [theme]="'material'" (onClick)="CollapseAllBtnOnClick()" [width]="125" [height]="25">Collapse All</jqxButton>
<br />
</div>
<div style="float: left; margin-left: 20px">
<div style="font-weight: bold">
<span>Event Log:</span>
</div>
<div style="margin-top: 10px">
<span>Expanded Group:</span>
<span #expandedGroupLog></span>
</div>
<div style="margin-top: 10px">
<span>Collapsed Group:</span>
<span #collapsedGroupLog></span>
</div>
</div>
</div>