@@ -791,10 +1146,10 @@ To bind GraphQL service data to the TreeGrid, provide the GraphQL query string u
Height="340"
RowHeight="40"
AllowPaging="true">
-
-
+
@@ -854,8 +1209,79 @@ To bind GraphQL service data to the TreeGrid, provide the GraphQL query string u
@code {
- // - Replace https://localhost:xxxx/graphql with the actual server port.
+ // GraphQLAdaptorOptions will be added in the next step
+}
+```
+
+**Component Explanation:**
+
+- **`@rendermode InteractiveServer`**: Enables interactive server-side rendering for the component.
+- **`
`**: The TreeGrid component that displays data in rows and columns.
+- **``**: Defines individual columns in the TreeGrid.
+- **``**: Configures pagination with 10 records per page.
+- **``**: Enable editing functionality directly within the TreeGrid by setting the AllowEditing, AllowAdding, and AllowDeleting properties within the TreeGridEditSettings to **true**.
+
+The `SfDataManager` component connects the TreeGrid to the GraphQL backend using the adaptor options configured below:
+
+```razor
+
+
+```
+
+**Component Attributes Explained:**
+
+| Attribute | Purpose | Value |
+|-----------|---------|-------|
+| `Url` | GraphQL endpoint location | `http://localhost:7213/graphql` (must match backend port) |
+| `GraphQLAdaptorOptions` | References the adaptor configuration object | `@adaptorOptions` (defined in next heading) |
+| `Adaptor` | Specifies adaptor type to use | `Adaptors.GraphQLAdaptor` (tells Syncfusion to use GraphQL adaptor) |
+
+**Important Notes:**
+
+- The `Url` must match the port configured in `launchSettings.json`.
+- If backend runs on port 7213, then URL must be `https://localhost:7213/graphql`.
+- The `/graphql` path is set by `app.MapGraphQL()` in Program.cs.
+
+---
+
+### Step 3: Configure GraphQL Adaptor and Data Binding
+
+The GraphQL adaptor is a bridge that connects the Syncfusion Blazor TreeGrid with the GraphQL backend. The adaptor translates TreeGrid operations (filtering, sorting, paging, searching) into GraphQL queries and mutations. When the user interacts with the tree grid, the adaptor automatically sends the appropriate GraphQL request to the backend, receives the response, and updates the tree grid display.
+
+**What is a GraphQL Adaptor?**
+An adaptor is a translator between two different systems. The GraphQL adaptor specifically:
+
+- Receives interaction events generated by the TreeGrid, including Add, Edit, Delete actions, as well as sorting and filtering operations.
+- Converts these actions into GraphQL query or mutation syntax.
+- Sends the **GraphQL request** to the backend **GraphQL endpoint**.
+- Receives the response data from the backend.
+- Formats the response back into a structure the TreeGrid understands.
+- Updates the tree grid display with the new data.
+
+The adaptor enables bidirectional communication between the frontend (TreeGrid) and backend (GraphQL server).
+
+---
+
+**GraphQL Adaptor Configuration**
+
+The `@code` block in `Home.razor` contains C# code that configures how the adaptor behaves. This configuration is critical because it defines:
+
+- Which GraphQL query to use for reading data.
+- Which GraphQL mutations to use for creating, updating, and deleting data.
+- How to connect to the GraphQL backend endpoint.
+
+**Instructions:**
+
+1. Open the `Home.razor` file located at `Components/Pages/Home.razor`.
+2. Scroll to the `@code` block at the bottom of the file.
+3. Add the following complete configuration:
+
+```csharp
+@code {
+
public class DropDownData { public string ID { get; set; } = ""; public string Name { get; set; } = ""; }
private readonly List CategoryOptions = new()
@@ -916,8 +1342,8 @@ To bind GraphQL service data to the TreeGrid, provide the GraphQL query string u
private GraphQLAdaptorOptions adaptorOptions = new GraphQLAdaptorOptions
{
Query = HrQuery,
- // ResolverName should match the GraphQL field name (camelCase)
+ // ResolverName should match the GraphQL field name (camelCase)
ResolverName = "employeesData"
};
@@ -963,474 +1389,744 @@ To bind GraphQL service data to the TreeGrid, provide the GraphQL query string u
[JsonPropertyName("projectEndDate")] public DateTime? ProjectEndDate { get; set; }
}
}
+```
-{% endhighlight %}
-{% endtabs %}
-
-Replace `https://localhost:xxxx/graphql` with the actual URL of the API endpoint that provides data in a consumable format (e.g., JSON).
-
-**Step 6: Enable CORS Policy**
+**GraphQL Query Structure Explained in Detail**
-To allow a Blazor application to access the GraphQL server, Cross-Origin Resource Sharing (CORS) must be enabled in the server application. Add the following code to the **Program.cs** file:
+The Query property is critical for understanding how data flows. Let's break down each component:
-```csharp
-// Add CORS policy
-builder.Services.AddCors(options =>
-{
- options.AddPolicy("AllowSpecificOrigin", policy =>
- {
- // Replace with the Blazor app's URL.
- policy.WithOrigins("https://localhost:xxxx/")
- .AllowAnyHeader()
- .AllowAnyMethod()
- .AllowCredentials();
- });
-});
-
-// Use CORS.
-app.UseCors("AllowSpecificOrigin");
+```graphql
+query expenseRecordData($dataManager: DataManagerRequestInput!) {}
```
-This configuration ensures that the Blazor application can communicate with the GraphQL server without encountering CORS-related issues.
+**Line Breakdown:**
+- `query` - GraphQL keyword indicating a read operation
+- `employeesData` - Name of the query (must match resolver name with camelCase)
+- `($dataManager: DataManagerRequestInput!)` - Parameter declaration
+ - `$dataManager` - Variable name (referenced as $dataManager throughout the query)
+ - `: DataManagerRequestInput!` - Type specification
+ - `!` - Exclamation mark means this parameter is **required** (not optional)
-**Step 7: Run the Application**
+```graphql
+query employeesData($dataManager: DataManagerRequestInput!) {}
+```
-After completing the setup, run the application. The TreeGrid will fetch and display data from the configured GraphQL API. Ensure that both the Blazor application and the GraphQL server are running and accessible.
-
-
+**Line Breakdown:**
+- `employeesData(...)` - Calls the resolver method in backend
+- `dataManager: $dataManager` - Passes the $dataManager variable to the resolver
+- The resolver receives this object and uses it to apply filters, sorts, searches, and pagination
-**Understanding DataManagerRequestInput Class**
+```graphql
+count
+result {
+ employeeID
+ managerID
+ ...
+}
+```
+- `count` - Returns total number of records (used for pagination)
+ - Example: If 150 total expense records exist, count = 150
+ - TreeGrid uses this to calculate how many pages exist
+- `result` - Contains the array of expense records
+ - `{ ... }` - List of fields to return for each record
+ - Each field must exist in the EmployeeData class
+ - Only requested fields are returned (no over-fetching)
-Before performing specific data operations such as search, sorting, or filtering, it is essential to understand the request structure that the Syncfusion® Blazor TreeGrid sends to the GraphQL server.
+---
-The following code demonstrates the `DataManagerRequestInput` class, which encapsulates parameters such as pagination (Skip, Take), search filters (Search), sorting (Sorted), and more. These parameters are passed as arguments to the resolver function for processing.
+**Response Structure Example**
-{% tabs %}
-{% highlight cs tabtitle="DataManagerRequest.cs" %}
+When the backend executes the query, it returns a **JSON response** in this exact structure:
-namespace GraphQLServer.Models
+```json
{
- ///
- /// Represents the input structure for data manager requests.
- ///
- public class DataManagerRequestInput
- {
- [GraphQLName("Skip")]
- public int Skip { get; set; }
-
- [GraphQLName("Take")]
- public int Take { get; set; }
+ "data": {
+ "employeesData": {
+ "count": 100,
+ "result": [
+ {
+ "employeeID": "EMP001",
+ "managerID": null,
+ "hasChild": true,
+ "name": "Ava Anderson",
+ "lastName": "Anderson",
+ "title": "Executive",
+ "location": "Seattle",
+ "dateJoined": "2016-01-05T00:00:00.000Z",
+ "salaryPerMonth": 15000,
+ "email": "ava.anderson001@company.com"
+ },
+ {
+ "employeeID": "EMP011",
+ "managerID": null,
+ "hasChild": true,
+ "name": "Mia Campbell",
+ "lastName": "Campbell",
+ "title": "Director",
+ "location": "Chicago",
+ "dateJoined": "2017-02-06T00:00:00.000Z",
+ "salaryPerMonth": 16200,
+ "email": "mia.campbell011@company.com"
+ }
+ ]
+ }
+ }
+}
+```
- [GraphQLName("RequiresCounts")]
- public bool RequiresCounts { get; set; } = false;
+**Response Structure Explanation:**
- [GraphQLName("Params")]
- [GraphQLType(typeof(AnyType))]
- public IDictionary Params { get; set; }
+| Part | Purpose | Example |
+|------|---------|---------|
+| `data` | Root object containing the query result | Always present in successful response |
+| `employeesData` | Matches the query name (camelCase) | Contains count and result |
+| `count` | Total number of records available | 2 (in this example) |
+| `result` | Array of ExpenseRecord objects | [ {...}, {...} ] |
+| Each field in result | Matches GraphQL query field names | Field values from database |
- [GraphQLName("Aggregates")]
- [GraphQLType(typeof(AnyType))]
- public List? Aggregates { get; set; }
+---
- [GraphQLName("Search")]
- public List? Search { get; set; }
+### Step 4: Add Toolbar with CRUD and search options
+
+The toolbar provides buttons for adding, editing, deleting records, and searching the data.
+
+**Instructions:**
+
+1. Open the `Components/Pages/Home.razor` file.
+2. Update the `` component to include the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar) property with CRUD and search options:
+
+```razor
+
+
+
+
+
+```
- [GraphQLName("Sorted")]
- public List? Sorted { get; set; }
+3. Add the toolbar items list in the `@code` block:
- [GraphQLName("Where")]
- [GraphQLType(typeof(AnyType))]
- public List? Where { get; set; }
+```csharp
+@code {
+ private List ToolbarItems = new List { "Add", "Edit", "Delete", "Update", "Cancel", "Search"};
+}
+```
- [GraphQLName("Group")]
- public List? Group { get; set; }
+### Step 5: Implement Paging Feature
+
+Paging divides large datasets into smaller pages to improve performance and usability.
+
+**Instructions:**
+
+1. The paging feature is already partially enabled in the `` component with [AllowPaging="true"](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging).
+2. The page size is configured with [TreeGridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html).
+3. No additional code changes are required from the previous steps.
+
+
+```razor
+
+
+
+
+
+
+```
- [GraphQLName("antiForgery")]
- public string? antiForgery { get; set; }
+4. Update the `EmployeesData` method in the `GraphQLQuery` class to handle paging:
- [GraphQLName("Table")]
- public string? Table { get; set; }
+```csharp
+using System.Text.Json;
- [GraphQLName("IdMapping")]
- public string? IdMapping { get; set; }
+namespace TreeGrid_GraphQLAdaptor.Models
+{
+ // Defines the GraphQL resolver for handling TreeGrid requests.
+ public class GraphQLQuery
+ {
+ // SINGLE ENTRYPOINT: handles roots, children, expand/collapse, expandall, loadchildondemand, filtering, search, sort, paging
+ public EmployeesDataResponse EmployeesData(DataManagerRequestInput dataManager)
+ {
+ EnsureDataLoaded();
- [GraphQLName("Select")]
- public List? Select { get; set; }
+ // Parent detection (params first, then ManagerID== in where)
+ string? parentId = TryGetParentIdFromParams(dataManager?.Params)
+ ?? TryGetParentIdFromWhere(dataManager?.Where);
- [GraphQLName("Expand")]
- public List? Expand { get; set; }
+ // CHILDREN SLICE: return only direct children of requested parent
+ if (!string.IsNullOrWhiteSpace(parentId))
+ {
+ var children = _data
+ .Where(d => string.Equals(d.ManagerID, parentId, StringComparison.OrdinalIgnoreCase))
+ .ToList();
- [GraphQLName("Distinct")]
- public List? Distinct { get; set; }
+ return new EmployeesDataResponse
+ {
+ Count = children.Count,
+ Result = children,
+ Items = children
+ };
+ }
- [GraphQLName("ServerSideGroup")]
- public bool? ServerSideGroup { get; set; }
+ // ROOTS: proper root-only paging
+ var roots = _data.Where(d => string.IsNullOrWhiteSpace(d.ManagerID)).ToList();
+ int total = roots.Count;
- [GraphQLName("LazyLoad")]
- public bool? LazyLoad { get; set; }
+ IEnumerable page = roots;
+ if (dataManager?.Skip is int sk && dataManager.Take is int tk)
+ {
+ page = page.Skip(sk).Take(tk);
+ }
- [GraphQLName("LazyExpandAllGroup")]
- public bool? LazyExpandAllGroup { get; set; }
- }
+ var list = page.ToList();
+ return new EmployeesDataResponse
+ {
+ Count = total,
+ Result = list,
+ Items = list
+ };
+ }
- ///
- /// Represents an aggregate operation in the data manager request.
- ///
- public class Aggregate
- {
- [GraphQLName("Field")]
- public string Field { get; set; }
+ private static List _data = EnsureDataInternal();
- [GraphQLName("Type")]
- public string Type { get; set; }
- }
+ private static List EnsureDataInternal() => EmployeeData.GetAllRecords();
- ///
- /// Represents a search filter in the data manager request.
- ///
- public class SearchFilter
- {
- [GraphQLName("Fields")]
- public List Fields { get; set; }
+ private static void EnsureDataLoaded()
+ {
+ if (_data == null || _data.Count == 0) _data = EnsureDataInternal();
+ }
+
+ private static string? TryGetParentIdFromParams(object? prms)
+ {
+ if (!TryReadFromParams(prms, "parentId", out var v) || v is null) return null;
+ return ToEmpId(v);
+ }
- [GraphQLName("Key")]
- public string Key { get; set; }
+ private static bool TryReadFromParams(object? prms, string key, out object? value)
+ {
+ value = null;
+ if (prms == null) return false;
- [GraphQLName("Operator")]
- public string Operator { get; set; }
+ // IDictionary
+ if (prms is IDictionary dictObj)
+ return dictObj.TryGetValue(key, out value);
- [GraphQLName("IgnoreCase")]
- public bool IgnoreCase { get; set; }
- }
+ // IReadOnlyDictionary
+ if (prms is IReadOnlyDictionary roDict)
+ return roDict.TryGetValue(key, out value);
- ///
- /// Represents a sorting operation in the data manager request.
- ///
- public class Sort
- {
- [GraphQLName("Name")]
- public string Name { get; set; }
+ // IDictionary
+ if (prms is IDictionary dictJson)
+ {
+ if (dictJson.TryGetValue(key, out var je)) { value = je; return true; }
+ return false;
+ }
+
+ // IEnumerable>
+ if (prms is IEnumerable> kvs)
+ {
+ foreach (var kv in kvs)
+ if (string.Equals(kv.Key, key, StringComparison.OrdinalIgnoreCase))
+ { value = kv.Value; return true; }
+ }
+
+ // JsonElement object
+ if (prms is JsonElement jeObj && jeObj.ValueKind == JsonValueKind.Object)
+ {
+ if (jeObj.TryGetProperty(key, out var je))
+ { value = je; return true; }
+ }
+
+ return false;
+ }
+
+ private static string? TryGetParentIdFromWhere(List? where)
+ {
+ if (where == null || where.Count == 0) return null;
+
+ foreach (var wf in where)
+ {
+ if (!string.IsNullOrWhiteSpace(wf.Field) &&
+ wf.Field.Equals("ManagerID", StringComparison.OrdinalIgnoreCase))
+ {
+ var op = (wf.Operator ?? "equal").Trim().ToLowerInvariant();
+ if (op is "equal" or "eq")
+ {
+ if (wf.Value == null) return null;
+ return ToEmpId(wf.Value);
+ }
+ }
- [GraphQLName("Direction")]
- public string Direction { get; set; }
+ if (wf.Predicates != null && wf.Predicates.Count > 0)
+ {
+ var nested = TryGetParentIdFromWhere(wf.Predicates);
+ if (nested != null || wf.Value == null) return nested;
+ }
+ }
+ return null;
+ }
- [GraphQLName("Comparer")]
- [GraphQLType(typeof(AnyType))]
- public object Comparer { get; set; }
+ private static string? ToEmpId(object? v)
+ {
+ if (v == null) return null;
+ if (v is string s)
+ {
+ if (int.TryParse(s, out var n)) return $"EMP{n:000}";
+ return s;
+ }
+ if (v is int i) return $"EMP{i:000}";
+ if (v is long l && l >= int.MinValue && l <= int.MaxValue) return $"EMP{(int)l:000}";
+ if (v is JsonElement je)
+ {
+ return je.ValueKind switch
+ {
+ JsonValueKind.Number => je.TryGetInt32(out var j) ? $"EMP{j:000}" : null,
+ JsonValueKind.String => int.TryParse(je.GetString(), out var k) ? $"EMP{k:000}" : je.GetString(),
+ JsonValueKind.Null => null,
+ _ => null
+ };
+ }
+ return v.ToString();
+ }
}
- ///
- /// Represents a filter condition in the data manager request.
- ///
- public class WhereFilter
+ // Response type
+ public class EmployeesDataResponse
{
- [GraphQLName("Field")]
- public string? Field { get; set; }
+ [GraphQLName("count")]
+ public int Count { get; set; }
+
+ [GraphQLName("result")]
+ public List Result { get; set; } = new();
- [GraphQLName("IgnoreCase")]
- public bool? IgnoreCase { get; set; }
+ [GraphQLName("items")]
+ public List Items { get; set; } = new();
+ }
+
+}
+```
- [GraphQLName("IgnoreAccent")]
- public bool? IgnoreAccent { get; set; }
+Fetches employee data by calling the **GetAllRecords** method, which is implemented in the **EmployeeData.cs** file.
- [GraphQLName("IsComplex")]
- public bool? IsComplex { get; set; }
+```csharp
+private static List? _employeesData;
+public static List GetAllRecords()
+{
+ // Add code to return a list of "ExpenseRecord" to process it further.
+ return _employeesData;
+}
+```
- [GraphQLName("Operator")]
- public string? Operator { get; set; }
- [GraphQLName("Condition")]
- public string? Condition { get; set; }
+| Part | Purpose |
+|------|---------|
+| `dataManager.Skip` | Number of records to skip from the start (used to jump to the correct page) |
+| `dataManager.Take` | Number of records to return for the current page (page size) |
+| `dataManager.RequiresCounts` | Indicates whether the server should also return the total record count |
- [GraphQLName("Value")]
- [GraphQLType(typeof(AnyType))]
- public object? Value { get; set; }
+**How Paging Variables are Passed:**
- [GraphQLName("predicates")]
- public List? predicates { get; set; }
- }
+When the tree grid requests a specific page, it automatically sends:
+```json
+{
+ "dataManager": {
+ "Skip": 10,
+ "Take": 10,
+ "RequiresCounts": true
+ }
}
+```
+The backend resolver applies **Skip** and **Take**, then returns `count` and the paged `result`. Paging feature is now active with 10 records per page.
-{% endhighlight %}
-{% endtabs %}
+---
-## Handling searching operation
-To handle search operations in the Syncfusion® Blazor TreeGrid using the `GraphQLAdaptor`, the `dataManager.Search` parameters can be utilized and the search logic applied on the server side. This approach enables efficient filtering and retrieval of relevant records from the TreeGrid based on the provided search criteria.
+### Step 6: Implement Searching feature
-When a search is performed in the TreeGrid, the `DataManager` sends the search parameters to the server, which include the search keyword and the list of fields to search against. The server then processes these parameters and filters the data accordingly.
+Searching provides the capability to find specific records by entering keywords into the search box.
-
+**Instructions:**
-{% tabs %}
-{% highlight razor tabtitle="Home.razor" %}
+1. Ensure the toolbar includes the "Search" item.
-@page "/"
-@rendermode InteractiveServer
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.TreeGrid
-@using Syncfusion.Blazor.DropDowns
-@using Syncfusion.Blazor.Calendars
-@using System.Text.Json.Serialization
+```razor
+
+
+
+
+
+
+```
-
-
- Employees
- Category:
+2. Update the `EmployeesData` method in the `GraphQLQuery` class to handle searching:
-
-
-
-
-
+```csharp
+using System.Text.Json;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+namespace TreeGrid_GraphQLAdaptor.Models
+{
+ // Defines the GraphQL resolver for handling TreeGrid data requests.
+ public class GraphQLQuery
+ {
+ // - Roots: search applied, then paged by Skip/Take
+ // - Children slice: ManagerID=parentId, search applied;
+ public EmployeesDataResponse EmployeesData(DataManagerRequestInput dataManager)
+ {
+ EnsureDataLoaded();
-
-
-
- @{
- var e = (EmployeeData)context;
- var p = (e.Priority ?? "Low").Trim().ToLowerInvariant();
- var cls = p switch
- {
- "critical" => "chip chip-critical",
- "high" => "chip chip-high",
- "medium" => "chip chip-medium",
- _ => "chip chip-low"
- };
- var label = string.IsNullOrWhiteSpace(e.Priority) ? "Low" : e.Priority!;
- }
- @label
-
-
+ // Detect explicit children request from params first, then ManagerID filter in where (only to detect parentId)
+ string? parentId = TryGetParentIdFromParams(dataManager?.Params)
+ ?? TryGetParentIdFromWhere(dataManager?.Where);
-
-
-
- @{
- var e = (EmployeeData)context;
- var pct = Math.Clamp(e.Progress ?? 0, 0, 100);
- var barClass = pct >= 80 ? "progress-bar prog-high"
- : pct >= 50 ? "progress-bar prog-mid"
- : "progress-bar prog-low";
- }
-
-
-
+ // CHILDREN SLICE: return only direct children of requested parent (no paging)
+ if (!string.IsNullOrWhiteSpace(parentId))
+ {
+ IEnumerable children = _data
+ .Where(d => string.Equals(d.ManagerID, parentId, StringComparison.OrdinalIgnoreCase));
-
-
-
-
-
-
-
-
- Employees
- Category:
+ // CHILDREN SLICE: return only direct children of requested parent (no paging)
+ if (!string.IsNullOrWhiteSpace(parentId))
+ {
+ var children = _data
+ .Where(d => string.Equals(d.ManagerID, parentId, StringComparison.OrdinalIgnoreCase))
+ .ToList();
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var p = (e.Priority ?? "Low").Trim().ToLowerInvariant();
- var cls = p switch
- {
- "critical" => "chip chip-critical",
- "high" => "chip chip-high",
- "medium" => "chip chip-medium",
- _ => "chip chip-low"
- };
- var label = string.IsNullOrWhiteSpace(e.Priority) ? "Low" : e.Priority!;
- }
- @label
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var pct = Math.Clamp(e.Progress ?? 0, 0, 100);
- var barClass = pct >= 80 ? "progress-bar prog-high"
- : pct >= 50 ? "progress-bar prog-mid"
- : "progress-bar prog-low";
- }
-
-
-
-
-
-
-
-
-
-
-
-
- Employees
- Category:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var p = (e.Priority ?? "Low").Trim().ToLowerInvariant();
- var cls = p switch
- {
- "critical" => "chip chip-critical",
- "high" => "chip chip-high",
- "medium" => "chip chip-medium",
- _ => "chip chip-low"
- };
- var label = string.IsNullOrWhiteSpace(e.Priority) ? "Low" : e.Priority!;
- }
- @label
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var pct = Math.Clamp(e.Progress ?? 0, 0, 100);
- var barClass = pct >= 80 ? "progress-bar prog-high"
- : pct >= 50 ? "progress-bar prog-mid"
- : "progress-bar prog-low";
- }
-
-
-
-
-
-
-
-
-
-
-
-
- Employees
- Category:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var p = (e.Priority ?? "Low").Trim().ToLowerInvariant();
- var cls = p switch
- {
- "critical" => "chip chip-critical",
- "high" => "chip chip-high",
- "medium" => "chip chip-medium",
- _ => "chip chip-low"
- };
- var label = string.IsNullOrWhiteSpace(e.Priority) ? "Low" : e.Priority!;
- }
- @label
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var pct = Math.Clamp(e.Progress ?? 0, 0, 100);
- var barClass = pct >= 80 ? "progress-bar prog-high"
- : pct >= 50 ? "progress-bar prog-mid"
- : "progress-bar prog-low";
- }
-
-
-
-
-
-
-
-
-
-
-
-
- Employees
- Category:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var p = (e.Priority ?? "Low").Trim().ToLowerInvariant();
- var cls = p switch
- {
- "critical" => "chip chip-critical",
- "high" => "chip chip-high",
- "medium" => "chip chip-medium",
- _ => "chip chip-low"
- };
- var label = string.IsNullOrWhiteSpace(e.Priority) ? "Low" : e.Priority!;
- }
- @label
-
-
-
-
-
-
- @{
- var e = (EmployeeData)context;
- var pct = Math.Clamp(e.Progress ?? 0, 0, 100);
- var barClass = pct >= 80 ? "progress-bar prog-high"
- : pct >= 50 ? "progress-bar prog-mid"
- : "progress-bar prog-low";
- }
-
-
-
-
-
-
-
-
-
-
-