Related Pages

Related Pages used for redirect the one page from another page without using any codes in html pages.

Developer can be added the any number of command buttons in grid with using related pages.

With using related menu concept developer can create the following controls with different container levels,

1)Details Command button in grid’s row

2)Text Command button in grid’s row           

3)Icon command button in grid’s row

4)Field hyperlink in grid fields

Details Command button in grid’s row

Here let us see how to create command button with container level - "A new tab at the application root",

Examples in Adventure Works

Entities – AdventureWorks Entities

Url - https://web1.mclsystems.com/AWv32/#/Home

Menu Path – HumanResources -> New Employee ->New Department

Steps:

a) Create the Related page “Child Department” for the menu “New Department” to make details button in grid’s row.

After created related page under “New Department”, details button will be shown in grid’s row as below

 

Clicking on Details button “Child Department” page will be opened in a new tab with Container level - A new tab at the application root

Text Command button in grid’s row

Here let us see how to create "Text Command button" in grid’s row using Related pages with Container level – “At the bottom of current page“

Steps:

A)Create the Related page “Child Department” under the menu “New Department” to make Text command button in grid

Output in UI:-

When we click that button “Child Department” from New Department Page,you will see Related page(Child Department) will be opened in bottom of current page as below,

Icon Command Button in grid’s row

As for icons, developer should be used only Kendo icons and Font awesome icons.

Example: “k-icon k-i-pencil”, “fas fa-exclamation-circle text-danger

Here let us see how to create Icon Command button in grid’s row using Related pages with Container level – “As a Popup“, If developer want to load the related page in the modal window then you can use this container level.

Steps:

a)Create the Related page “Child Department” under the menu “New Department” to make Icon Command button  in grid

Example Icon class – “k-icon k-i-calendar” 

Output in UI

Clicking on that Icon(calendar) button in first row (DepartmentID:1) of grid then you will see that Related page will be loaded in Modal window,

Field hyperlink in grid fields

Developer can make any field value as hyperlink in grid, we can achieve this with Related page concept. we will see how to make hyperlink with related menu,

Goal

We want to create the Hyperlink for “Name” field in “New Department” page grid

Steps:

a) Create the Related page “Child Department” under the menu “New Department” to make Hyperlink field in grid.

Note: As for the Field Hyperlink, we don’t need to add the command name when we create the related menu.

Output in UI