OSS で利用できる機能
スプリッター - ネスト スプリッター
このサンプルでは、ネスト スプリッターのレイアウトを管理する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
パネルは大陸、国、および都市を含むツリーを表示します。ノードをクリックすると、2 つ目のスプリッターにあるマップはノードの座標によって中央揃えます。国が選択した場合、その国の都市を含むグリッドはマップの下に表示されます。パネルはデフォルトでサイズ変更できません。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<style>
#map {
overflow: hidden;
}
</style>
</head>
<body>
<div id="splitter">
<div>
<ul id="tree"></ul>
</div>
<div id="detailSplitter">
<div>
<div id="map"></div>
</div>
<div>
<table id="grid"></table>
</div>
</div>
</div>
<script src="/data-files/continents-with-countries-and-cities.js" type="text/javascript"></script>
<script>
$(function () {
$("#splitter").igSplitter({
height: 700,
expanded: function (evt, ui) {
$("#grid_headers").css("width", "100%");
$("#grid").css("width", "100%");
},
panels: [
{ size: 200, min: 100, max: 250 },
{ collapsible: true }
]
});
$("#detailSplitter").igSplitter({
orientation: "horizontal",
panels: [
{ size: 500, collapsible: true },
{ size: 200, collapsible: true }
]
});
$("#tree").igTree({
dataSource: continentsWithCountriesAndCitiesCoordinates,
dataSourceType: "json",
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Countries"
},
rendered: onTreeRendered,
selectionChanged: onTreeSelectionChanged
});
function onTreeRendered(evt, ui) {
var unitedStatesNodeElement = ui.owner.nodeByPath("0_0");
var unitedStatesNode = ui.owner.nodeFromElement(unitedStatesNodeElement);
initMap();
initCitiesGrid(unitedStatesNode.data.Cities);
ui.owner.expandToNode(unitedStatesNodeElement);
ui.owner.select(unitedStatesNodeElement);
}
function onTreeSelectionChanged (sender, eventArgs) {
var node = eventArgs.selectedNodes[0];
zoomMapTo(node.data.Latitude, node.data.Longitude, 23);
$("#grid").igGrid("dataSourceObject", node.data.Cities);
$("#grid").igGrid("dataBind");
$("#detailSplitter").igSplitter("expandAt", 1);
}
function initMap() {
var map = $("#map").igMap({
width: "100%",
height: "100%",
crosshairVisibility: "visible",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "/images/samples/splitter/world.png",
panModifier: "control",
backgroundContent: {
type: "openStreet"
},
windowResponse: "immediate",
windowRect: {
left: 0.27,
top: 0.20,
height: 0.45,
width: 0.45
}
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
return map;
}
function initCitiesGrid(dataSource) {
var grid = $("#grid").igGrid({
width: "100%",
height: "99%",
dataSource: dataSource,
defaultColumnWidth: "25%",
features: [{
name: "Selection",
mode: "row",
rowSelectionChanged: function (ui, args) {
var selectedCity = $("#grid").data("igGrid").dataSource.dataView()[args.row.index];
zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
}
}]
});
return grid;
}
function zoomMapTo(latitude, longitude, radius) {
var geographic = geographichFromCentered({
latitude: latitude,
longitude: longitude,
radius: radius
});
var zoom = $("#map").igMap("zoomToGeographic", geographic);
}
// Calculates the geographich coordinates of a square around a central point and radius
function geographichFromCentered(centered) {
var geographic = {
left: centered.longitude - centered.radius,
top: centered.latitude - centered.radius,
width: centered.radius * 2,
height: centered.radius * 2
};
return geographic;
}
});
</script>
</body>
</html>
var continentsWithCountries = [{
Text: "北アメリカ",
Description: "北アメリカは、アメリカ (米州) の北半の、北アメリカ大陸を中心とした地域である。六大州の1つ。アジアとの境界はベーリング海峡である。ヨーロッパとの境界は、グリーンランドとアイスランドの間のデンマーク海峡である。",
Countries: [{
Text: "米国",
Description: "アメリカ合衆国は、北アメリカ大陸および北太平洋に位置する連邦共和国である。国土は、北アメリカ大陸中央部の大西洋と太平洋に挟まれた本土（48 州と連邦政府直轄地である首都ワシントンD.C.）、大陸北西部のアラスカとアリューシャン列島（アラスカ州）、太平洋のハワイ諸島（ハワイ州）。"
}, {
Text: "カナダ",
Description: "カナダは、北アメリカ大陸北部に位置し、10 の州と 3 の準州を持つ、連邦立憲君主制国家。首都はオタワ。アメリカ合衆国と国境を接する。イギリス連邦加盟国であり、英連邦王国の一国である。世界で2番目に大きい面積の国土をもつ。"
}, {
Text: "メキシコ",
Description: "メキシコ合衆国、通称メキシコは、北アメリカ南部に位置する連邦共和制国家である。北にアメリカ合衆国と、南東にグアテマラ、ベリーズと国境を接し、西は太平洋、東はメキシコ湾とカリブ海に面する。首都はメキシコシティ。公用語はスペイン語。総人口は約1億人。スペイン語圏においては最も人口の多い国である。"
}]
}, {
Text: "南アメリカ",
Description: "南アメリカは、南米ともいい、南アメリカ大陸とその周辺の島嶼・海域を含む地域の総称で、六大州の一つ。ラテンアメリカに含まれる。",
Countries: [{
Text: "ブラジル",
Description: "ブラジル連邦共和国、通称ブラジルは、南アメリカに位置する連邦共和制国家である。南米大陸で最大の面積を誇り、ウルグアイ、アルゼンチン、パラグアイ、ボリビア、ペルー、コロンビア、ベネズエラ、ガイアナ、スリナム、フランス領ギアナ (つまりチリとエクアドル以外のすべての南米諸国) と国境を接している。また、大西洋上のフェルナンド・デ・ノローニャ諸島、トリンダージ島・マルティン・ヴァス島、セントピーター・セントポール群島もブラジル領に属する。"
}, {
Text: "ウルグアイ",
Description: "ウルグアイ東方共和国、通称ウルグアイは、南アメリカ南東部に位置する共和制国家である。北と東にブラジルと、西にアルゼンチンと国境を接しており、南は大西洋に面している。"
}, ]
}, {
Text: "ヨーロッパ",
Description: "ヨーロッパは、慣習的には地球上の 7 つの大州の一つ。地理的には、ユーラシア大陸北西の半島部を包括し、ウラル山脈およびコーカサス山脈の分水嶺とウラル川・カスピ海・黒海、そして黒海とエーゲ海を繋ぐボスポラス海峡が、アジアと区分される東の境界となる。面積から見るとヨーロッパ大陸は世界で 2 番目に小さな大州であり、1018 万km2 は地球表面積の 2 %、陸地に限れば 6.8 %を占める。アジアに跨る領土を持つロシアは、ヨーロッパ 50 カ国の中で面積および人口第一位の国家である。対照的に最も小さな国家はバチカン市国である。総人口はアジア・アフリカに次ぐ 7 億 3300 万。これは地球総人口の 11 ％である。",
Countries: [{
Text: "イギリス",
Description: "グレートブリテン及び北アイルランド連合王国通称イギリスは、イングランド、スコットランド、ウェールズ、北アイルランドの4つの国 (イギリスのカントリー) から構成される立憲君主制国家であり、英連邦王国の一国である。また、国際関係について責任を負う地域として王室属領及び海外領土があるが、これらは厳密には「グレートブリテン及び北アイルランド連合王国」には含まれておらずこれらを含む正式な名称は存在しない。ユーラシア大陸西部の北西にある島国であるが、アイルランド島でアイルランド共和国と国境を接している。"
}, {
Text: "ドイツ",
Description: "ドイツ連邦共和国、通称ドイツは、ヨーロッパ中部に位置する連邦共和制国家である。領域は1990年のドイツ再統一によって、ドイツ民主共和国 (旧東ドイツ) を構成していた15県および東ベルリンが6州としてドイツ連邦共和国 (西ドイツ) に編入されて、現在の16州となった。"
}, {
Text: "ブルガリア",
Description: "ブルガリア共和国、通称ブルガリアは、東ヨーロッパの共和制国家である。 バルカン半島に位置し、北にルーマニア、西にセルビア、マケドニア共和国、南にギリシャ、トルコと隣接し、東は黒海に面している。首都はソフィア。"
}]
}, {
Text: "アジア",
Description: "アジアはユーラシアの東部と中部であり、この地域にはおよそ50カ国が存在する。この地域の面積は大陸のほかに島嶼部も含めるとおよそ49,694,700km2である。アジアはスエズ地峡 (エジプト) でアフリカと接し、ウラル山脈付近を境界にヨーロッパと接する。現在ではユーラシア大陸のヨーロッパ以外の地域、つまり、アジア大陸 (島嶼・海域を含む) であり、六大州の一つ。ユーラシア大陸の面積の約 80 %をアジアが占め、人口は世界最多で世界人口の約 60 % がアジアに住んでいる。",
Countries: [{
Text: "日本",
Description: "日本の領土はすべて島から成っている。6,852 の島 (本土 5 島+離島 6,847 島) から成る島国である。アジア・東アジアの中でも特に東方にあり、ユーラシアの東端にあたるため、欧米から極東・東洋などとも呼ばれる。全体的に弓形状であり、領土面積は約37.8万km²(日本政府が領有権を主張する領域) で世界第 60 位である。国土の約70%が山岳地帯であり、約 67 %の森林率である。"
}, {
Text: "中国",
Description: "正式名称は中華人民共和国。世界最大の人口を持つ国で、アジア大陸の東部、太平洋の西海岸に位置し、国土はチベットとウイグル (東トルキスタン) も中国と見なした場合はロシアとカナダに次ぐ面積であり、世界第 3 の大きさであるとされることが多い。単一政権の共産党で、政府の所在地は首都である北京である。また、中華民国によって統治されている台湾の領有を主張している。今日では省轄市と縣が直轄市と並んで地方行政を担っているが、直轄市との間には地方交付税の配分や人事権限の格差が残されたままである。"
}]
} ];
var continentsWithCountriesAndCitiesCoordinates = [{
Text: "北アメリカ",
Latitude: 46.0730555556,
Longitude: -100.546666667,
Countries: [{
Text: "米国",
Latitude: 38,
Longitude: -97,
Cities: [{
Name: "ロサンゼルス",
Country: "米国",
Latitude: 34.0522,
Longitude: -118.2434
}, {
Name: "ニューヨーク",
Country: "米国",
Latitude: 40.7561,
Longitude: -73.9870
}, {
Name: "シカゴ",
Country: "米国",
Latitude: 41.840,
Longitude: -87.680
}, {
Name: "ヒューストン",
Country: "米国",
Latitude: 29.770,
Longitude: -95.390
}]
}, {
Text: "カナダ",
Latitude: 60,
Longitude: -95,
Cities: [{
Name: "トロント",
Country: "カナダ",
Latitude: 43.650,
Longitude: -79.380
}, {
Name: "モントリオール",
Country: "カナダ",
Latitude: 45.520,
Longitude: -73.570
}, {
Name: "バンクーバー",
Country: "カナダ",
Latitude: 49.280,
Longitude: -123.130
}, {
Name: "カルガリー",
Country: "カナダ",
Latitude: 51.050,
Longitude: -114.060
}]
}, {
Text: "メキシコ",
Latitude: 23,
Longitude: -102,
Cities: [{
Name: "メキシコ シティ",
Country: "メキシコ",
Latitude: 19.4270,
Longitude: -99.1276
}, {
Name: "エカテペック デ モレロス",
Country: "メキシコ",
Latitude: 19.600,
Longitude: -99.050
}, {
Name: "グアダラハラ",
Country: "メキシコ",
Latitude: 20.670,
Longitude: -103.350
}, {
Name: "プエブラ",
Country: "メキシコ",
Latitude: 19.050,
Longitude: -98.220
}]
}]
}, {
Text: "南アメリカ",
Latitude: -14.6047222222,
Longitude: -57.6561111111,
Countries: [{
Text: "ブラジル",
Latitude: -10,
Longitude: -55,
Cities: [{
Name: "サンパウロ",
Country: "ブラジル",
Latitude: -23.5489,
Longitude: -46.6388
}, {
Name: "リオデジャネイロ",
Country: "ブラジル",
Latitude: -22.910,
Longitude: -43.200
}, {
Name: "サルバドル",
Country: "ブラジル",
Latitude: -12.970,
Longitude: -38.500
}]
}, {
Text: "ウルグアイ",
Latitude: -33,
Longitude: -56,
Cities: [{
Name: "モンテビデオ",
Country: "ウルグアイ",
Latitude: -34.870,
Longitude: -56.170
}, {
Name: "サルト",
Country: "ウルグアイ",
Latitude: -31.400,
Longitude: -57.960
}, {
Name: "シウダッド デ ラ コスタ",
Country: "ウルグアイ",
Latitude: -34.820,
Longitude: -55.950
}]
}]
}, {
Text: "ヨーロッパ",
Latitude: 48.6908333333,
Longitude: 9.14055555556,
Countries: [{
Text: "イギリス",
Latitude: 54,
Longitude: -2,
Cities: [{
Name: "ロンドン",
Country: "イギリス",
Latitude: 51.50,
Longitude: 0.12
}, {
Name: "グラスゴー",
Country: "イギリス",
Latitude: 55.870,
Longitude: -4.270
}, {
Name: "バーミンガム",
Country: "イギリス",
Latitude: 52.480,
Longitude: -1.910
}]
}, {
Text: "ドイツ",
Latitude: 51,
Longitude: 9,
Cities: [{
Name: "ベルリン",
Country: "ドイツ",
Latitude: 52.50,
Longitude: 13.33
}, {
Name: "ハンブルグ",
Country: "ドイツ",
Latitude: 53.550,
Longitude: 10.000
}, {
Name: "ミュンヘン",
Country: "ドイツ",
Latitude: 48.140,
Longitude: 11.580
}]
}, {
Text: "ブルガリア",
Latitude: 43,
Longitude: 25,
Cities: [{
Name: "ソフィア",
Country: "ブルガリア",
Latitude: 42.697845,
Longitude: 23.321925
}, {
Name: "プロブディブ",
Country: "ブルガリア",
Latitude: 42.150,
Longitude: 24.750
}, {
Name: "ブルガス",
Country: "ブルガリア",
Latitude: 42.510,
Longitude: 27.470
}]
}]
}, {
Text: "アジア",
Latitude: 29.8405555556,
Longitude: 89.2966666667,
Countries: [{
Text: "日本",
Latitude: 36,
Longitude: 138,
Cities: [{
Name: "東京",
Country: "日本",
Latitude: 35.685,
Longitude: 139.7513889
}, {
Name: "横浜",
Country: "日本",
Latitude: 35.45,
Longitude: 139.65
}, {
Name: "大阪",
Country: "日本",
Latitude: 34.6666667,
Longitude: 135.5
}]
}, {
Text: "中国",
Latitude: 35,
Longitude: 105,
Cities: [{
Name: "北京",
Country: "中国",
Latitude: 39.92889,
Longitude: 116.38833
}, {
Name: "上海",
Country: "中国",
Latitude: 31.005,
Longitude: 121.4086111
}]
}]
}];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'nested-splitters.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgMapComponent, IgSplitterComponent, IgGridComponent, IgTreeComponent } from 'igniteui-angular-wrappers';
import { Countries } from "./../data/countries-and-cities";
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
declare var northwindProducts: any[];
@Component({
selector: 'my-app',
template: `
<ig-splitter widgetId="splitter" [(options)]="splitterOptions" (expanded)="expanded($event)">
<div>
<ig-tree widgetId="tree" [(options)]="treeOptions"
(rendered)="treeRendered($event)"
(selectionChanged)="treeSelectionChanged($event)">
</ig-tree>
</div>
<ig-splitter widgetId="detailSplitter" [(options)]="detailSplitterOptions">
<div>
<ig-map widgetId="map" [(options)]="mapOptions"></ig-map>
</div>
<div>
<ig-grid widgetId="grid" [(options)]="gridOptions"></ig-grid>
</div>
</ig-splitter>
</ig-splitter>
`
})
export class AppComponent {
private treeRendered: any;
private treeSelectionChanged: any;
private rowSelectionChanged: any;
private expanded: any;
private continentsWithCountriesAndCitiesCoordinates: any;
private splitterOptions: IgSplitter;
private mapOptions: IgMap;
private gridOptions: IgGrid;
private treeOptions: IgTree;
private detailSplitterOptions: IgSplitter;
@ViewChild("grid") grid: IgGridComponent;
@ViewChild("map") map: IgMapComponent;
@ViewChild("tree") tree: IgTreeComponent;
@ViewChild("splitter") splitter: IgSplitterComponent;
@ViewChild("detailSplitter") detailSplitter: IgSplitterComponent;
private northwindProductsEN: any[] = [
{ "ProductID": 1, "ProductName": "Chai" }, { "ProductID": 2, "ProductName": "Chang" }, { "ProductID": 3, "ProductName": "Aniseed Syrup"}, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning" },
{ "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix" }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread" }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears" },
{ "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce" }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku" }, { "ProductID": 10, "ProductName": "Ikura" }, { "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products" },
{ "ProductID": 12, "ProductName": "Queso Manchego La Pastora" }, { "ProductID": 13, "ProductName": "Konbu" }, { "ProductID": 14, "ProductName": "Tofu" }, { "ProductID": 15, "ProductName": "Genen Shouyu" },
{ "ProductID": 16, "ProductName": "Pavlova" }, { "ProductID": 17, "ProductName": "Alice Mutton" }, { "ProductID": 18, "ProductName": "Carnarvon Tigers" }, { "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits" },
{ "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade" }, { "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones" }, { "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd" }, { "ProductID": 23, "ProductName": "Tunnbröd" },
{ "ProductID": 24, "ProductName": "Guaraná Fantástica" }, { "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme" }, { "ProductID": 26, "ProductName": "Gumbär Gummibärchen" }, { "ProductID": 27, "ProductName": "Schoggi Schokolade" },
{ "ProductID": 28, "ProductName": "Rössle Sauerkraut" }, { "ProductID": 29, "ProductName": "Thüringer Rostbratwurst" }, { "ProductID": 30, "ProductName": "Nord-Ost Matjeshering" }
];
constructor() {
this.continentsWithCountriesAndCitiesCoordinates = Countries.getContinentsWithCountriesAndCitiesCoordinates();
this.treeRendered = function(evt) {
let unitedStatesNodeElement = evt.ui.owner.nodeByPath("0_0");
let unitedStatesNode = evt.ui.owner.nodeFromElement(unitedStatesNodeElement);
this.initMap();
this.initCitiesGrid(unitedStatesNode.data.Cities);
evt.ui.owner.expandToNode(unitedStatesNodeElement);
evt.ui.owner.select(unitedStatesNodeElement);
}
this.treeSelectionChanged = function (evt) {
var node = evt.ui.selectedNodes[0];
this.zoomMapTo(node.data.Latitude, node.data.Longitude, 23);
this.grid.igGrid.dataSourceObject(node.data.Cities);
this.grid.dataBind();
this.detailSplitter.expandAt(1);
}
this.expanded = function (evt) {
$("#grid_headers").css("width", "100%");
this.grid.widget().css("width", "100%");
}
this.splitterOptions = {
height: 700,
panels: [
{ size: 200, min: 100, max: 250 },
{ collapsible: true }
]
};
this.detailSplitterOptions = {
orientation: "horizontal",
panels: [
{ size: 500, collapsible: true },
{ size: 200, collapsible: true }
]
};
this.gridOptions = {
width: "100%",
height: "99%",
dataSource: this.northwindProductsEN,
defaultColumnWidth: "25%",
features: [{
name: "Selection",
mode: "row",
rowSelectionChanged: function (ui, args) {
let selectedCity = this.grid.dataSource.dataView()[args.row.index];
this.zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
}
}]
};
this.mapOptions = {
width: "100%",
height: "100%",
crosshairVisibility: "visible",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
panModifier: "control",
backgroundContent: {
type: "openStreet"
},
windowResponse: "immediate",
windowRect: {
left: 0.27,
top: 0.20,
height: 0.45,
width: 0.45
}
}
this.treeOptions = {
dataSource: this.continentsWithCountriesAndCitiesCoordinates,
dataSourceType: "json",
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Countries"
}
};
}
initMap() {
let map = $("#map").igMap({
width: "100%",
height: "100%",
crosshairVisibility: "visible",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
panModifier: "control",
backgroundContent: {
type: "openStreet"
},
windowResponse: "immediate",
windowRect: {
left: 0.27,
top: 0.20,
height: 0.45,
width: 0.45
}
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
return map;
}
initCitiesGrid(dataSource) {
let grid = $("#grid").igGrid({
width: "100%",
height: "99%",
dataSource: dataSource,
defaultColumnWidth: "25%",
features: [{
name: "Selection",
mode: "row",
rowSelectionChanged: function (ui, args) {
let selectedCity =this.grid.dataSource.dataView()[args.row.index];
this.zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
}
}]
});
return grid;
}
zoomMapTo(latitude, longitude, radius) {
let geographic = this.geographichFromCentered({
latitude: latitude,
longitude: longitude,
radius: radius
});
let zoom = this.map.zoomToGeographic(geographic);
}
// Calculates the geographich coordinates of a square around a central point and radius
geographichFromCentered(centered) {
let geographic = {
left: centered.longitude - centered.radius,
top: centered.latitude - centered.radius,
width: centered.radius * 2,
height: centered.radius * 2
};
return geographic;
}
}
@NgModule({
bootstraps: [AppComponent],
declarations: [AppComponent, IgGridComponent, IgMapComponent, IgSplitterComponent, IgTreeComponent],
imports: [BrowserModule]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/continents-with-countries-and-cities.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<script type="text/babel">
var App = React.createClass({
render: function() {
let northwindProductsEN = [
{ "ProductID": 1, "ProductName": "Chai" }, { "ProductID": 2, "ProductName": "Chang" }, { "ProductID": 3, "ProductName": "Aniseed Syrup"}, { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning" },
{ "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix" }, { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread" }, { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears" },
{ "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce" }, { "ProductID": 9, "ProductName": "Mishi Kobe Niku" }, { "ProductID": 10, "ProductName": "Ikura" }, { "ProductID": 11, "ProductName": "Queso Cabrales", "CategoryName": "Dairy Products" },
{ "ProductID": 12, "ProductName": "Queso Manchego La Pastora" }, { "ProductID": 13, "ProductName": "Konbu" }, { "ProductID": 14, "ProductName": "Tofu" }, { "ProductID": 15, "ProductName": "Genen Shouyu" },
{ "ProductID": 16, "ProductName": "Pavlova" }, { "ProductID": 17, "ProductName": "Alice Mutton" }, { "ProductID": 18, "ProductName": "Carnarvon Tigers" }, { "ProductID": 19, "ProductName": "Teatime Chocolate Biscuits" },
{ "ProductID": 20, "ProductName": "Sir Rodney\u0027s Marmalade" }, { "ProductID": 21, "ProductName": "Sir Rodney\u0027s Scones" }, { "ProductID": 22, "ProductName": "Gustaf\u0027s Knäckebröd" }, { "ProductID": 23, "ProductName": "Tunnbröd" },
{ "ProductID": 24, "ProductName": "Guaraná Fantástica" }, { "ProductID": 25, "ProductName": "NuNuCa Nuß-Nougat-Creme" }, { "ProductID": 26, "ProductName": "Gumbär Gummibärchen" }, { "ProductID": 27, "ProductName": "Schoggi Schokolade" },
{ "ProductID": 28, "ProductName": "Rössle Sauerkraut" }, { "ProductID": 29, "ProductName": "Thüringer Rostbratwurst" }, { "ProductID": 30, "ProductName": "Nord-Ost Matjeshering" }
];
rowSelectionChanged: function (event, ui) {
var selectedCity = $("#grid").data("igGrid").dataSource.dataView()[args.row.index];
this.zoomMapTo(selectedCity.Latitude, selectedCity.Longitude, 0.5);
});
expanded: function() {
$("#grid_headers").css("width", "100%");
$("#grid").css("width", "100%");
}
treeRendered: function(evt, ui) {
let unitedStatesNodeElement = ui.owner.nodeByPath("0_0");
let unitedStatesNode = ui.owner.nodeFromElement(unitedStatesNodeElement);
this.initMap();
this.initCitiesGrid(unitedStatesNode.data.Cities);
ui.owner.expandToNode(unitedStatesNodeElement);
ui.owner.select(unitedStatesNodeElement);
}
treeSelectionChanged: function (evt, ui) {
let node = ui.selectedNodes[0];
this.zoomMapTo(node.data.Latitude, node.data.Longitude, 23);
$("#grid").igGrid("dataSourceObject", node.data.Cities);
$("#grid").igGrid("dataBind");
$("#detailSplitter").igSplitter("expandAt", 1);
}
initMap(): function() {
let map = $("#map").igMap({
width: "100%",
height: "100%",
crosshairVisibility: "visible",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
panModifier: "control",
backgroundContent: {
type: "openStreet"
},
windowResponse: "immediate",
windowRect: {
left: 0.27,
top: 0.20,
height: 0.45,
width: 0.45
}
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
return map;
}
initCitiesGrid: function (dataSource) {
let grid = $("#grid").igGrid({
width: "100%",
height: "99%",
dataSource: dataSource,
defaultColumnWidth: "25%",
features: [{
name: "Selection",
mode: "row"
}]
});
return grid;
}
zoomMapTo: function (latitude, longitude, radius) {
let geographic = this.geographichFromCentered({
latitude: latitude,
longitude: longitude,
radius: radius
});
let zoom = this.map.zoomToGeographic(geographic);
}
// Calculates the geographich coordinates of a square around a central point and radius
geographichFromCentered(centered) {
let geographic = {
left: centered.longitude - centered.radius,
top: centered.latitude - centered.radius,
width: centered.radius * 2,
height: centered.radius * 2
};
return geographic;
}
let splitterOptions = {
height: 700,
expanded: this.expanded,
panels: [
{ size: 200, min: 100, max: 250 },
{ collapsible: true }
]
}
let detailSplitterOptions = {
orientation: "horizontal",
panels: [
{ size: 500, collapsible: true },
{ size: 200, collapsible: true }
]
}
let gridOptions = {
width: "100%",
height: "99%",
dataSource: this.northwindProductsEN,
defaultColumnWidth: "25%",
features: [{
name: "Selection",
mode: "row",
rowSelectionChanged: this.rowSelectionChanged
}]
}
let mapOptions = {
width: "100%",
height: "100%",
crosshairVisibility: "visible",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/splitter/world.png",
panModifier: "control",
backgroundContent: {
type: "openStreet"
},
windowResponse: "immediate",
windowRect: {
left: 0.27,
top: 0.20,
height: 0.45,
width: 0.45
}
}
let treeOptions = {
dataSource: this.continentsWithCountriesAndCitiesCoordinates,
dataSourceType: "json",
rendered: this.treeRendered,
selectionChanged: this.treeSelectionChanged,
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Countries"
}
}
return (
<IgUpload id="igUpload1" mode="single"
autostartupload={true}
progressUrl="/IGUploadStatusHandler.ashx"
controlId="serverID1"
onError={function (e, args) {showAlert(args);}}></IgUpload>
}
<IgSplitter id="splitter" options={splitterOptions}>
<div><IgTree id="tree" options="{treeOptions}" /></div>
<IgSplitter id="detailSplitter" options={detailSplitterOptions} >
<div><IgMap id="map" options={mapOptions} /></div>
<div><IgGrid id="grid" options={gridOptions} /></div>
</IgSplitter>
</IgSplitter>
);
}
});
ReactDOM.render(
<App />,
document.getElementById("app")
);
</script>
</div>
</body>
</html>