List nézet

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.

/*Hagyományos stílusok*/
.yellow-background {
    background-color: yellow !important;
}

.gray-italic {
    color: gray;
    font-style: italic;
}
/*Közvetlenül az oszlopokhoz rendelt stílus*/
.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 stílusok

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

Copy

/*Property opció: mezőnkénti kiértékelés*/
//RGO_JSRowClass opció a mezőben, az egész sor stílusához
//RGO_JSColClass opció a mező stílusához
if (args.Value == 'M') return 'gray-italic';
//RGO_JSRowStyle opció a mezőben, az egész sor stílusához
//RGO_JSColStyle opció a mező stílusához
if (args.Value == 'F') return 'background-color:yellow;';

/*Entity opció: soronként egyszeri kiértékelés*/
//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.

• 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)

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.

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.

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.

//Adat módosítás
if (args.Value == 'M') return 'Male';
if (args.Value == 'F') return 'Female';

//Hivatkozás létrehozása egy másik mező adatát is felhasználva
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.

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.

//elem funkcionalitásának bővítése
args.Self.on('click', function () {
    alert('Clicked');
});

//kiegészítő elem megjelenítése
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>');

//attribútum módosítás template módban
args.Self.attr('href', 'href="/Details?Id=' + args.Columns['rg-col-2077'].Value + '"');

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.

args.Self.text(args.Value);

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

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ó.

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

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

• RGOD_Attr segítségével a mezők HTML attribútumait lehet megadni.

• RGOD_Tooltip egy jQuery UI Tooltip-et lehet megadni.

• RGOD_Remove letiltja a mező megjelenítését, template mód esetén pedig eltávolítja.

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.

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.

protected override void OnClientRecCustomize(RGClientColumn[] clientRec, Dictionary<string, object> options)
{
    //Adatkeresés a kapott paraméterből
    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":
                        //CSS class hozzáadása az entitás sorához
                        options["RGOD_CssClass"] = "yellow-background";
                        options[clientRec[i].ClientName] = new
                        {
                            //jQueri UI Tooltip
                            RGOD_Tooltip = "Female"
                        };
                        break;
                    case "M":
                        options[clientRec[i].ClientName] = new
                        {
                            //Stílus beállítása a mezőre
                            RGOD_Style = "color:gray;font-style:italic;",
                            RGOD_Tooltip = "Male"
                        };
                        break;
                }
                break;

            case "JobTitle":
                options[clientRec[i].ClientName] = new
                {
                    //Attribútumok beállítása
                    RGOD_Attr = new
                    {
                        id = string.Format("id-{0}", id),
                        title = clientRec[i].DbValue.ToString()
                    }
                };
                break;

            case "SecureField":
                //Mező eltávolítása
                options[clientRec[i].ClientName] = new { RGOD_Remove = true };
                break;

            case "MaritalStatus":
                switch (clientRec[i].DbValue.ToString())
                {
                    case "M":
                        //Adatmódosítás
                        clientRec[i].Value = "Married";
                        break;
                    case "S":
                        clientRec[i].Value = "Single";
                        break;
                }
                break;

            case "Dyndata":
                //Dinamikus (adatbázis lekérdezésben nem szereplő) adat meghatározása metódus segítségével
                clientRec[i].Value = GetDynData(id);
                break;
        }
    }
}
private object GetDynData(object id) { throw new NotImplementedException(); }