List nézet

Ez a fejezet a RecroGrid, List nézet testreszabásának alapvető lehetőségeit mutatja be.

This topic contains the following sections:

List nézetű stílusbeállítás

jQuery UI stílusok

A RecroGrid kliensoldali megjelenítése jQuery UI használatával került megvalósításra, ezért egyéni stílus kialakítása könnyen létrehozható a ThemeRoller segítségével. Letöltésnél a RecroGrid verziójának megfelelő verziót kell választani, és a témát az oldalhoz illeszteni.

_Layout.cshtml referenciák beállítása
<head>
    ...
    <link rel="stylesheet" href="/rgf/resource/bootstrap-submenu.css" />
</head>

<body>
    ...
    @*add class: rgf-menu*@
    <ul class="navbar-nav flex-grow-1 rgf-menu">
        <li>
            ...
        </li>
        @Html.Raw(Recrovit.RecroGridFramework.UI.MenuDesigner.CreateNavbar(this.Context))
    </ul>

    ...
    @Html.Raw(Recrovit.RecroGridFramework.RecroGrid.GetRecroGridScriptReferences(this.Context))
    @RenderSection("Scripts", required: false)
</body>

Stílusok beállítása paraméterezéssel

This section contains the following subsections:

Statikus stílusok

A RecroGrid megjelenését kényelmesen lehet formázni szabványos Style-Sheet használatával.
A mezőkhöz egyszerűen definiálhatunk stílusokat. A hivatkozásoknál az entitás azonosítójára (EntityId) az rg-ent- előtaggal, illetve a mezők azonosítójára (PropertyId) rg-col- előtaggal lehet hivatkozni.
Ennek fordítottja, amikor a stílusokat kötjük a mezőkhöz. A stílust az RGO_CssClass és RGO_Style opciós paraméterekben lehet megadni külön mezőnként, az entitáshoz kapcsolva pedig az egész Grid-re vonatkozóan.

C#
/*Traditional styles*/
.yellow-background {
    background-color: yellow !important;
}

.gray-italic {
    color: gray;
    font-style: italic;
}
/*Style directly assigned to columns*/
.rg-ent-1014 .rg-col-1045 {
    background-color: yellow;
}

.rg-ent-1014 .rg-col-1046 {
    color: gray;
    font-style: italic;
}

A stíluslapok definiálása közvetlenül a RGO_StyleSheet opciós paraméterben megadható, amit a RecroGrid Framework automatikusan hozzáad a HTML oldalhoz.

  Tip

Hosszabb távon, illetve éles környezetben javasolt ezeket külön fájlban elhelyezni és arra hivatkozni az RGO_StyleSheetURLs opciós paraméterben.

Dinamikus (adatfüggő) stílusok beállítása soronként, oszloponként

Dinamikus stílusok

A stílusok futásidőben az aktuális adatoktól függően is beállíthatóak. A funkciót a megjelenítés alkalmával egy JavaScript függvény végzi, amit az entitás mezőihez lehet opciós paraméterben beállítani. A visszatérési érték a paraméter típusától függően RGO_JSRowClass és RGO_JSColClass esetén a class attribútum, míg a RGO_JSRowStyle és RGO_JSColStyle esetén a style attribútum. Az érték mindig egy hozzáadás és nem felülírás.

Az opciós függvény kialakítása

Az opciós paraméterben a JavaScript szintaktikának megfelelően a függvény belsejét kell megírni. A függvény egy args nevű paramétert kap, ami tartalmaz egy Columns tömböt a kliensnek átadott összes mező definíciójával és értékével. Az egyes mezőkre a ClientName használatával lehet hivatkozni, ami megadja a RecroGridColumnDefs adatokat és a Value-ban az oszlop értékét. Az aktuális mező értéke közvetlenül az args.Value-ból is kinyerhető.

  Tip

Hosszabb távon, illetve éles környezetben javasolt ezeket a szkripteket külön fájlban elhelyezni, és az opciós beállításba csak a függvényhívásokat beállítani.

JavaScript
/*Property option: field-level evaluation*/
//RGO_JSRowClass option for field-level evaluation, for styling the entire row
//RGO_JSColClass option for field-level evaluation, for styling the specific field
if (args.Value == 'M') return 'gray-italic';
// RGO_JSRowStyle option for field-level evaluation, for styling the entire row
// RGO_JSColStyle option for field-level evaluation, for styling the specific field
if (args.Value == 'F') return 'background-color:yellow;';

/*Entity option: single evaluation per row*/
//RGO_JSRowClass
if (args.Columns['rg-col-1052'].Value == 'M') return 'gray-italic';
//RGO_JSRowStyle
if (args.Columns['rg-col-1052'].Value == 'F') return 'background-color:yellow;';
//

  Caution

A RecroGrid Framework a kliensnek csak a ténylegesen megjelenített adatokat küldi ki, így az adatfüggő beállítások nagyobb odafigyelést igényelnek. Egyszerűbb esetben lehetőség van az egyes mezőket a RGO_Forced opcióval megjelölni, és akkor mindig kiküldésre kerül, bonyolultabb esetben a stílust javasolt szerveroldalon beállítani.

Egyéb formázási lehetőségek

  • RGO_MaxChar az opcióban beállított értéknél hosszabb karakteres mezőket levágja.

  • RGO_NoFormat opciós paraméter meghatározza, hogy List nézetben a mezőhöz ne használja az alapértelmezett formázásokat. (pl. numerikus érték jobbra igazítás)

Dinamikus adatformázás paraméterezéssel

This section contains the following subsections:

Adat egyszerű formázása szerveroldalon

Az RGO_Format opciós paraméterben beállítható egy egyszerű formázás, amit a rendszer szerveroldalon a Format(String, Object) függvénnyel fog végrehajtani. A módszer jól használható tipikusan numerikus vagy dátum típusoknál. Az opciós paraméterben a metódus első paraméterét a format stringet kell megadni (teljes format string {0}-val, vagy csak a Format specifier({0:format})), a második paraméter a mező értéke lesz.

Példa

Leírás

{0:yyyy} vagy yyyy

dátum esetén csak az év megjelenítése

{0:X} vagy X

numerikus érték megjelenítése hexadecimális formában

  Caution

Az RGO_Format használata esetén a kliens az eredeti értéket már nem kapja meg, ha arra is szükség van, akkor a mezőt duplikálni kell, vagy csak a kliensoldalon módosítani az értéket.

Adat módosítása a megjelenítés előtt

A funkcióban a megjelenítendő adat módosítható a megjelenítés előtt. A függvény az RGO_JSReplace opciós paraméterben állítható, és a stílusok beállításánál is használt args paramétert kapja meg. Az új/módosított adatot visszatérésben lehet megadni.

JavaScript
//Data modification
if (args.Value == 'M') return 'Male';
if (args.Value == 'F') return 'Female';

//Creating a link using data from another field
return '<a href="/Details?Id=' + args.Columns['rg-col-2077'].Value + '" target="_blank">' + args.Value + '</a>';
//

  Tip

A szótár jellegű elemek esetén javasolt a RecroDict használata, aminek a megjelenítését a rendszer automatikusan kezel List és Form nézetben is.

Az elkészült HTML elem módosítása jQuery segítségével

A funkcióban az elkészült elemet lehet módosítani, vagy egyéni funkcionalitással kiegészíteni. A függvényt az RGO_JQReplace opcióban lehet megadni. A megkapott args paraméter Self tagjában érhető el az elkészült objektum.

JavaScript
//Extending the functionality of an HTML element
args.Self.on('click', function () {
    alert('Clicked');
});

//Displaying an additional element
if (args.Value > 1000)
    $(args.Self).parent().prepend('<div class="ui-state-error" style="float:right"><span class="ui-icon ui-icon-alert"></span></div>');

//Modifying attributes in template mode
args.Self.attr('href', 'href="/Details?Id=' + args.Columns['rg-col-2077'].Value + '"');
//

Egyéni HTML elem készítés jQuery segítségével

Az RGO_JQManual opcióban az elem teljesen manuálisan létrehozható. A megkapott args paraméter Self tagjában található konténer $('div') objektumhoz kell hozzáadni az új elemeket.

JavaScript
args.Self.text(args.Value);

args.Self.append('<span>' + args.Value + '</span>');
//

Adatformázás és stílusmódosítás szerveroldalon programozással

This section contains the following subsections:

Szerveroldali testreszabáshoz létre kell hozni az entitáshoz Egyedi osztályt. A RecroGrid megjelenítéshez szükséges adatok beolvasása után, a RecroGrid Framework létrehozza a kliensnek küldendő formátumot. Ezen a ponton lehetőség van egyéni testreszabásra a OnClientRecCustomize(RecroGridRGClientColumn, DictionaryString, Object) metódus felülírásával. Az aktuális rekord felépítését és értékeit a kapott paraméter tartalmazza, az opciókat pedig a szótár paraméterben lehet megadni.

Stílusok módosítása, beépített opciók

A stílusok egyszerűen befolyásolhatóak az RGOD_CssClass és az RGOD_Style opciók segítségével. Ez a két opció az entitásra (táblázatos megjelenítés esetén az egész sorra) is megadható, illetve külön mezőnként a ClientName-re hivatkozva Anonymous Types segítségével több opció is megadható.

C#
options["RGOD_CssClass"] = "yellow-background";
options[clientRec[i].ClientName] = new { RGOD_CssClass = "yellow-background" };

Egyéb előre definiált opciók

  Tip

Szerveroldali stílusok beállítása csak akkor javasolt, ha a stílus olyan adatoktól függ, ami nem kerül a kliensoldalra kiküldésre. Ha az adat kliensoldalon is elérhető, akkor javasolt a beállításokat ott elvégezni, így csökkenthető az adatforgalom, és nagyobb felhasználószám esetén a kliensekre oszlik a terhelés, ezáltal jobb teljesítmény érhető el. Ha a stílusok nem függenek adatoktól, akkor mindig statikus stílusok használata javasolt.

Adat módosítása

A paraméterben kapott rekord tartalmazza az összes adatot (és csak azt), ami az aktuális megjelenítéshez szükséges, illetve kötelezőnek van beállítva. A DbValue az eredeti lekérdezés során kapott típusos változó, a Value pedig a kliensnek küldendő. A Value-ban a DbValue-nak a beállítások szerinti String-re konvertált megfelelője található, és módosítás estén is azt kell megadni, kivéve formázatlan numerikus érték esetén. Ezen a ponton lehet a dinamikus (adatbázis lekérdezésben nem szereplő) adatokat is megadni.

C#
protected override void OnClientRecCustomize(RGClientColumn[] clientRec, Dictionary<string, object> options)
{
    //Data search based on the received parameters
    var id = clientRec.Single(r => r.Property.Alias == "BusinessEntityID").DbValue;
    for (int i = 0; i < clientRec.Length; i++)
    {
        switch (clientRec[i].Property.ColName)
        {
            case "Gender":
                switch (clientRec[i].DbValue.ToString())
                {
                    case "F":
                        //Adding a CSS class to the row of the entity
                        options["RGOD_CssClass"] = "yellow-background";
                        options[clientRec[i].ClientName] = new
                        {
                            //jQueri UI Tooltip
                            RGOD_Tooltip = "Female"
                        };
                        break;
                    case "M":
                        options[clientRec[i].ClientName] = new
                        {
                            //Setting the style for the field
                            RGOD_Style = "color:gray;font-style:italic;",
                            RGOD_Tooltip = "Male"
                        };
                        break;
                }
                break;

            case "JobTitle":
                options[clientRec[i].ClientName] = new
                {
                    //Setting attributes
                    RGOD_Attr = new
                    {
                        id = string.Format("id-{0}", id),
                        title = clientRec[i].DbValue.ToString()
                    }
                };
                break;

            case "SecureField":
                //Removing a field
                options[clientRec[i].ClientName] = new { RGOD_Remove = true };
                break;

            case "MaritalStatus":
                switch (clientRec[i].DbValue.ToString())
                {
                    case "M":
                        //Data modification
                        clientRec[i].Value = "Married";
                        break;
                    case "S":
                        clientRec[i].Value = "Single";
                        break;
                }
                break;

            case "Dyndata":
                //Specifies dynamic (data not present in the database query) data using a method
                clientRec[i].Value = GetDynData(id);
                break;
        }
    }
}
private object GetDynData(object id) { throw new NotImplementedException(); }

See Also

Other Resources