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.
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.
/*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.
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ő.
/*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;';
//
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 |
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.
//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>';
//
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.
//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 + '"');
//
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.
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)
{
//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(); }