diff --git a/.vscode/settings.json b/.vscode/settings.json index 67e6f3cce..6de18e4ed 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,3 @@ { - "typescript.tsdk": "./node_modules/typescript/lib", - "vsicons.presets.angular": true + "typescript.tsdk": "./node_modules/typescript/lib" } diff --git a/src/app/pages/examples/various/basic-example-button-view.component.ts b/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts similarity index 100% rename from src/app/pages/examples/various/basic-example-button-view.component.ts rename to src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts diff --git a/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html b/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html index eb11c69ae..581e2fdea 100644 --- a/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html +++ b/src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html @@ -23,3 +23,15 @@

For the custom cell renderer:
In this example the custom component is applying a .toUpperCase() to one of the columns. You can implement the ViewCell interface to make sure you are setting up your component correctly.

+ +

+ Button View +

+

An example on how to use custom button view:

+
+ Demo Source + +
diff --git a/src/app/pages/examples/examples.component.html b/src/app/pages/examples/examples.component.html index f06d710f7..d4c39e260 100644 --- a/src/app/pages/examples/examples.component.html +++ b/src/app/pages/examples/examples.component.html @@ -1,13 +1,15 @@ -
+
- -
+
+ +
+ diff --git a/src/app/pages/examples/examples.component.scss b/src/app/pages/examples/examples.component.scss index a6a724426..07f94b4f8 100644 --- a/src/app/pages/examples/examples.component.scss +++ b/src/app/pages/examples/examples.component.scss @@ -1,30 +1,41 @@ .with-sidebar { position: relative; - padding-right: 16rem; + + .main-content-body { + padding-left: 16rem; + } + .fixed-sidebar { + display: block; padding: 0 1rem; margin-top: 2rem; - position: absolute; - right: 0; + position: fixed; + top: 0; + padding-top: 290px; width: 16rem; font-size: 0.875rem; + .back-top { display: none; margin-bottom: 1rem; font-weight: bold; } + ul { padding-left: 1rem; list-style: none; margin-bottom: 0.875rem; } + &.scrolled { position: fixed; top: 0; + .back-top { display: block; } } + .examples-menu { a.active { font-weight: bold; diff --git a/src/app/pages/examples/examples.module.ts b/src/app/pages/examples/examples.module.ts index a09c2a7e4..83834fc01 100644 --- a/src/app/pages/examples/examples.module.ts +++ b/src/app/pages/examples/examples.module.ts @@ -21,7 +21,10 @@ import { FilterExamplesComponent } from './filter/filter-examples.component'; import { ServerExamplesComponent } from './server/server-examples.component'; import { CustomViewEditExamplesComponent } from './custom-edit-view/custom-edit-view-examples.component'; import { VariousExamplesComponent } from './various/various-examples.component'; -import { BasicExampleButtonViewComponent, ButtonViewComponent } from './various/basic-example-button-view.component'; +import { + BasicExampleButtonViewComponent, + ButtonViewComponent, +} from './custom-edit-view/basic-example-button-view.component'; const EXAMPLES_COMPONENTS = [ AdvancedExampleFiltersComponent, diff --git a/src/app/pages/examples/server/server-examples.component.html b/src/app/pages/examples/server/server-examples.component.html index 9c7c6f001..d22bd3959 100644 --- a/src/app/pages/examples/server/server-examples.component.html +++ b/src/app/pages/examples/server/server-examples.component.html @@ -8,7 +8,7 @@

Load From Server Example

+

Server Data Source Example

An example on how to load data user Server DataSource:

diff --git a/src/app/pages/examples/various/various-examples.component.html b/src/app/pages/examples/various/various-examples.component.html index 339d522dd..b9c0955ea 100644 --- a/src/app/pages/examples/various/various-examples.component.html +++ b/src/app/pages/examples/various/various-examples.component.html @@ -15,15 +15,3 @@

- -

- Button View -

-

An example on how to use custom button view:

-