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:
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.
<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>
This section contains the following subsections:
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. |
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 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. |
/*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)
This section contains the following subsections:
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. |
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>');
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.
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(); }