Skip to content

Commit

Permalink
Merge pull request #708 from IgniteUI/rivanova/treeGrid-search-sample
Browse files Browse the repository at this point in the history 
Add Tree Grid search sample
  • Loading branch information
@kacheshmarova
kacheshmarova committed Jun 5, 2024
2 parents 8d13507 + dde7b79 commit c2193b4
Show file tree
Hide file tree
Showing 9 changed files with 492 additions and 0 deletions.
125 changes: 125 additions & 0 deletions samples/grids/tree-grid/data-searching/App.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
@using IgniteUI.Blazor.Controls

<div class="container sample">
<div style="margin-bottom: 1rem">
<IgbInput ValueChanging="OnValueChanging" Value="@searchText" @onkeydown="OnSearchKeyDown">
@if (searchText.Length == 0)
{
<IgbIcon @ref="searchIconRef" slot="prefix" IconName="search" Collection="material" />
}
@if (searchText.Length > 0)
{
<IgbIcon slot="prefix" IconName="clear" Collection="material" @onclick="ClearSearch" />
}

<div class="chips" slot="suffix">
<IgbChip Selectable=true SelectedChanged="UpdateCase">
Case Sensitive
</IgbChip>
<IgbChip Selectable=true SelectedChanged="UpdateExactSearch">
Exact Match
</IgbChip>
</div>
<div class="searchButtons" slot="suffix">
<IgbIconButton Variant="IconButtonVariant.Flat" @onclick="PrevSearch">
<IgbIcon IconName="prev" Collection="material" />
</IgbIconButton>
<IgbIconButton Variant="IconButtonVariant.Flat" @onclick="NextSearch">
<IgbIcon IconName="next" Collection="material" />
</IgbIconButton>
</div>
</IgbInput>
</div>

<div class="container vertical">
<IgbTreeGrid @ref=treeGrid AutoGenerate=false Data=EmployeesFlatData PrimaryKey="ID" ForeignKey="ParentID" AllowFiltering=true Height="100%" Width="100%">
<IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true></IgbColumn>
<IgbColumn Field="ID" DataType="GridColumnDataType.Number" Sortable=true></IgbColumn>
<IgbColumn Field="Title" DataType="GridColumnDataType.String" Sortable=true></IgbColumn>
<IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true></IgbColumn>
<IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true></IgbColumn>
</IgbTreeGrid>
</div>
</div>

@code {
private IgbTreeGrid treeGrid;

public bool caseSensitive = false;
public bool exactMatch = false;
public string searchText = "";

private IgbIcon searchIconRef { get; set; }
const string searchIcon = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
const string prevIcon = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
const string nextIcon = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
const string clearIcon = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";

private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}

protected override void OnAfterRender(bool firstRender)
{
if (this.searchIconRef != null && firstRender)
{
this.searchIconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
{
this.searchIconRef.RegisterIconFromTextAsync("search", searchIcon, "material");
this.searchIconRef.RegisterIconFromTextAsync("prev", prevIcon, "material");
this.searchIconRef.RegisterIconFromTextAsync("next", nextIcon, "material");
this.searchIconRef.RegisterIconFromTextAsync("clear", clearIcon, "material");
}));
}
}

private void OnSearchKeyDown(KeyboardEventArgs evt)
{
if (evt.Key == "Enter" || evt.Key == "ArrowDown") {
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
} else if (evt.Key == "ArrowUp") {
this.treeGrid.FindPrevAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}

public void OnValueChanging(string newValue)
{
this.searchText = newValue;
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}

public void PrevSearch()
{
this.treeGrid.FindPrevAsync(this.searchText, this.caseSensitive, this.exactMatch);
}

public void NextSearch()
{
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}

public void ClearSearch()
{
this.searchText = "";
this.treeGrid.ClearSearchAsync();
}

public void UpdateCase(bool selected) {
this.caseSensitive = selected;
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}

public void UpdateExactSearch(bool selected) {
this.exactMatch = selected;
this.treeGrid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
}
21 changes: 21 additions & 0 deletions samples/grids/tree-grid/data-searching/BlazorClientApp.csproj
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
<AssemblyName>Infragistics.Samples</AssemblyName>
<RootNamespace>Infragistics.Samples</RootNamespace>
</PropertyGroup>

<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<NoWarn>1701;1702,IDE0028,BL0005,0219,CS1998</NoWarn>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor" Version="23.2.204" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" />
<PackageReference Include="System.Net.Http.Json" Version="8.0.0" />
</ItemGroup>

</Project>
25 changes: 25 additions & 0 deletions samples/grids/tree-grid/data-searching/BlazorClientApp.sln
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 16
VisualStudioVersion = 16.0.29613.14
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
EndGlobalSection
EndGlobal
219 changes: 219 additions & 0 deletions samples/grids/tree-grid/data-searching/EmployeesFlatData.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
using System.Collections.Generic;

public class EmployeesFlatDataItem
{
public double Age { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public string Phone { get; set; }
public bool OnPTO { get; set; }
public double ParentID { get; set; }
public string Title { get; set; }
}

public class EmployeesFlatData
: List<EmployeesFlatDataItem>
{
public EmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}
Loading

0 comments on commit c2193b4

Please sign in to comment.