DevExpress の表示高さ設定（あいまい）のサンプルです。
デフォルトは高さ「200px」です。
今回はウィンドウ高さを取得してあいまいの高さを設定します。
なぜあいまいにしているかと言いますと、
グリッドにデフォルトでマージン（margin）が設定されているためです。
「ASPxGridView」を使用します。
現状の画面デザインはこのようになっています。
設定する内容は2点です。
1点目：グリッドの「クライアントインスタンスネイム」に名前を設定
2点目：ウィンドウ高さを取得（Init時）
「ASPxGridView」オブジェクトのプロパティを変更していきます。
※プロパティ画像は「グループ表示」
＜表示高さ設定（自動あいまい）＞
1点目：グリッドの「クライアントインスタンスネイム」に名前を設定
「ClientInstanceName=”grid”」に変更します。
↓
2点目：ウィンドウ高さを取得（Init時）
「＞」アイコン上で左クリックを行いメニューを表示させます。
「Client-Side Events…」を選択します。
↓
「Init」を選択して、下記を設定します。
※あいまいな高さにするために95％の高さにしています。
「var myHeight = Math.max(0, document.documentElement.clientHeight*0.95 );」
「grid.SetHeight(myHeight);」
【生成PG】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" KeyFieldName="ID" Theme="RedWine" Width="100%" ClientInstanceName="grid"> <ClientSideEvents Init="function(s, e) { var myHeight = Math.max(0, document.documentElement.clientHeight*0.95 ); grid.SetHeight(myHeight); }" /> <Columns> <dx:GridViewCommandColumn ShowClearFilterButton="True" VisibleIndex="0" ShowDeleteButton="True" ShowEditButton="True" ShowNewButtonInHeader="True"> <CellStyle Wrap="False"> </CellStyle> </dx:GridViewCommandColumn> <dx:GridViewDataTextColumn FieldName="ID" ReadOnly="True" VisibleIndex="1" Visible="False"> <EditFormSettings Visible="False" /> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="地方名" VisibleIndex="2"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="都道府県名" VisibleIndex="3"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="都道府県めい" VisibleIndex="4"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="都道府県MEI" VisibleIndex="5"> <Settings AutoFilterCondition="Contains" HeaderFilterMode="CheckedList" /> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="県庁所在地名" VisibleIndex="6"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="県庁所在地めい" VisibleIndex="7"> </dx:GridViewDataTextColumn> </Columns> <SettingsBehavior AutoFilterRowInputDelay="15000" AllowSelectByRowClick="True" AllowSelectSingleRowOnly="True" /> <SettingsPager Position="TopAndBottom" Mode="EndlessPaging"> <AllButton Visible="True"> </AllButton> <FirstPageButton Visible="True"> </FirstPageButton> <LastPageButton Visible="True"> </LastPageButton> <Summary Position="Right" /> <PageSizeItemSettings Items="5, 10, 15, 20, 25, 30, 35, 40, 45, 50" Visible="True"> </PageSizeItemSettings> </SettingsPager> <SettingsEditing Mode="Batch"> <BatchEditSettings EditMode="Row" StartEditAction="DblClick" /> </SettingsEditing> <Settings ShowGroupedColumns="True" ShowGroupPanel="True" ShowFilterRow="True" ShowHeaderFilterButton="True" /> <Styles> <AlternatingRow Enabled="True"> </AlternatingRow> </Styles> </dx:ASPxGridView> |
【設定対象PG】
|
1 2 3 4 5 6 |
<dx:ASPxGridView ClientInstanceName="grid"> <ClientSideEvents Init="function(s, e) { var myHeight = Math.max(0, document.documentElement.clientHeight*0.95 ); grid.SetHeight(myHeight); }" /> |
↓
グリッドの表示高さがウィンドウサイズ（あいまい）になりました。
- 投稿タグ
- ASPxGridView, JavaScript
