Grid Filtering - Filter TreeGrid using client data with parent controls

Title:

BI{code} ?

I have a complex TreeGrid and need to filter it using parental control, similar to this sample https://demo.aspnetawesome.com/GridDemo/Filtering However, filtering in server mode is too slow. Is it possible to filter using client-side data?

Save Changes Cancel

Meccanica Rossi

asked at 10 Jun 2025

Answers

• BI{code} ?

  Yes, you can filter a TreeGrid using client data, btw in our main demo the SideMenu is a TreeGrid with client data, data that is being loaded from the server on the first grid load, Here's an example that you could paste in our main demo and see it working: <h2>TreeGrid client data</h2> <div class="bar"> @(Html.Awe().TextBox("txtFilterClientGrid").Placeholder("search...")) </div> @{ var clientTreeGridId = "ClientDataTreeGrid"; } @(Html.Awe().Grid(clientTreeGridId) .DataFunc($"getTreeGridData('{Url.Action("GetMenuNodes", "Data")}')") .Columns( new Column { Bind = "Name" }, new Column { Bind = "Id", Width = 100 }) .Parent("txtFilterClientGrid", "search", false) // false since we bind to input event manually .Height(400)) <script> $(function(){ // Reloads the TreeGrid when the input field changes. $('#txtFilterClientGrid').on('input', () => $('#@clientTreeGridId').data('api').load()); }); let loadedNodes = null; function getTreeGridData(dataUrl) { // Fetches data from the server. const getData = () => $.get(dataUrl); const buildMenuGridModel = (gp) => { gp.paging = false; const search = gp.search || ''; // Splits search query into individual words for filtering. const words = search.split(" ").filter(Boolean); // Filters nodes based on whether they contain all search words. const result = loadedNodes.filter(node => { const nodeText = `${node.Keywords} ${node.Name}`.toLowerCase(); return words.every(word => nodeText.includes(word)); }); // Ensures filtered items include their parents for hierarchical integrity. result.forEach(o => addParentsTo(result, o, loadedNodes)); // Extracts root nodes (those without parents). const rootNodes = result.filter(o => !o.ParentId); // Retrieves children of a given node. const getChildren = (node) => result.filter(o => o.ParentId === node.Id); // Configures grid row headers. const makeHeader = (info) => ({ Item: info.NodeItem, Collapsed: !search && info.NodeItem.Collapsed, IgnorePersistence: Boolean(search) }); return aweUtils.gridModelBuilder({ key: "Id", gp, items: rootNodes, getChildren, defaultKeySort: aweUtils.Sort.None, makeHeader }); }; return async (sgp) => { const gp = aweUtils.getGridParams(sgp); // If data is already loaded, use it. if (loadedNodes) { return buildMenuGridModel(gp); } // Fetches data from server and processes it. loadedNodes = await getData(); return buildMenuGridModel(gp); }; } function addParentsTo(res, node, all) { // Ensures a node's ancestors are included in the filtered results. if (!node.ParentId) return; // Check if the parent is already in the result set. if (!res.some(o => o.Id === node.ParentId)) { // Locate the parent node and add it. const parent = all.find(o => o.Id === node.ParentId); if (parent) { res.push(parent); addParentsTo(res, parent, all); // Recursively add ancestors. } } } </script> Note: Our main demo does not automatically camel-case JSON properties; we use `opt.JsonSerializerOptions.PropertyNamingPolicy = null;` in `Program.cs`

  Save Changes Cancel

  

  Omu

  answered at 10 Jun 2025

please Sign In to leave an answer