Skip to content

Commit ac8b081

Browse files
xristianstefanovdimodi
xristianstefanov
and
dimodi
authored
docs(grid, treelist):added section for searchbox in the state of the … (#613)
* docs(grid, treelist):added section for searchbox in the state of the grid and treelist * Update components/grid/filter/searchbox.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/treelist/filter/searchbox.md Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 8ca46ee commit ac8b081

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎components/grid/filter/images/searchbox-filter-control.gif‎

181 KB
Loading

‎components/grid/filter/searchbox.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,87 @@ To enable the search box, add the `<GridSearchBox>` tag in the `<GridToolBar>`.
6767
6868
![grid search box](images/search-box-overview.gif)
6969

70+
## Filter From Code
71+
72+
You can set the Grid filters programmatically through the component [state]({%slug grid-state%}).
73+
74+
@[template](/_contentTemplates/grid/state.md#initial-state)
75+
76+
>caption The result from the code snippet below.
77+
78+
![](images/searchbox-filter-control.gif)
79+
80+
>caption Set programmatically Searchbox Filter.
81+
82+
````Razor
83+
@* This snippet shows how to set filtering state to the grid from your code.
84+
Applies to the Searchbox filter *@
85+
86+
@using Telerik.DataSource;
87+
88+
<TelerikButton Primary="true" OnClick="@SetGridFilter">set filtering from code</TelerikButton>
89+
90+
<TelerikGrid Data="@MyData" Height="400px" @ref="@Grid"
91+
Pageable="true">
92+
<GridToolBar>
93+
<GridSearchBox />
94+
</GridToolBar>
95+
<GridColumns>
96+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
97+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
98+
<GridColumn Field="@(nameof(SampleData.Address))" Title="Address" />
99+
</GridColumns>
100+
</TelerikGrid>
101+
102+
@code {
103+
public TelerikGrid<SampleData> Grid { get; set; }
104+
105+
async Task SetGridFilter()
106+
{
107+
GridState<SampleData> desiredState = new GridState<SampleData>()
108+
{
109+
SearchFilter = CreateSearchFilter()
110+
};
111+
112+
await Grid.SetState(desiredState);
113+
}
114+
115+
private IFilterDescriptor CreateSearchFilter()
116+
{
117+
var descriptor = new CompositeFilterDescriptor();
118+
var fields = new List<string>() { "Name", "Address" };
119+
var searchValue = "name 10";
120+
descriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;
121+
122+
foreach (var field in fields)
123+
{
124+
var filter = new FilterDescriptor(field, FilterOperator.Contains, searchValue);
125+
126+
filter.MemberType = typeof(string);
127+
128+
descriptor.FilterDescriptors.Add(filter);
129+
}
130+
131+
return descriptor;
132+
}
133+
134+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
135+
{
136+
Id = x,
137+
Name = "name " + x,
138+
Address = "address " + x % 5,
139+
});
140+
141+
public class SampleData
142+
{
143+
public int Id { get; set; }
144+
public string Name { get; set; }
145+
public string Address { get; set; }
146+
}
147+
}
148+
149+
````
150+
70151
## Customize the SearchBox
71152

72153
The `GridSearchBox` component offers the following settings to customize its behavior:

‎components/treelist/filter/images/searchbox-filter-control.gif‎

231 KB
Loading

‎components/treelist/filter/searchbox.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,146 @@ To enable the search box, add the `<TreeListSearchBox>` tag in the `<TreeListToo
113113
114114
![treelist search box](images/search-box-overview.gif)
115115

116+
## Filter From Code
117+
118+
You can set the TreeList filters programmatically through the component [state]({%slug treelist-state%}).
119+
120+
@[template](/_contentTemplates/treelist/state.md#initial-state)
121+
122+
>caption The result from the code snippet below.
123+
124+
![](images/searchbox-filter-control.gif)
125+
126+
>caption Set programmatically Searchbox Filter.
127+
128+
````Razor
129+
@* This snippet shows how to set filtering state to the TreeList from your code
130+
Applies to the Searchbox filter *@
131+
132+
@using Telerik.DataSource;
133+
134+
<TelerikButton OnClick="@SetTreeListFilter" Primary="true">Set filtered state</TelerikButton>
135+
136+
<TelerikTreeList Data="@Data"
137+
ItemsField="@(nameof(Employee.DirectReports))"
138+
Height="400px"
139+
Pageable="true"
140+
Width="850px"
141+
@ref="TreeListRef">
142+
<TreeListToolBar>
143+
<TreeListSearchBox />
144+
</TreeListToolBar>
145+
<TreeListColumns>
146+
<TreeListColumn Field="Name" Expandable="true" Width="320px" />
147+
<TreeListColumn Field="Id" Width="120px" />
148+
<TreeListColumn Field="Address" Title="Email Address" Width="220px" />
149+
<TreeListColumn Field="HireDate" Width="220px" />
150+
</TreeListColumns>
151+
</TelerikTreeList>
152+
153+
@code {
154+
public TelerikTreeList<Employee> TreeListRef { get; set; } = new TelerikTreeList<Employee>();
155+
156+
async Task SetTreeListFilter()
157+
{
158+
var filteredState = new TreeListState<Employee>()
159+
{
160+
SearchFilter = CreateSearchFilter()
161+
};
162+
163+
await TreeListRef.SetState(filteredState);
164+
}
165+
166+
private IFilterDescriptor CreateSearchFilter()
167+
{
168+
var descriptor = new CompositeFilterDescriptor();
169+
var fields = new List<string>() { "Name", "Address" };
170+
var searchValue = "root: 1";
171+
descriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;
172+
173+
foreach (var field in fields)
174+
{
175+
var filter = new FilterDescriptor(field, FilterOperator.Contains, searchValue);
176+
177+
filter.MemberType = typeof(string);
178+
179+
descriptor.FilterDescriptors.Add(filter);
180+
}
181+
182+
return descriptor;
183+
}
184+
185+
public List<Employee> Data { get; set; }
186+
187+
188+
public class Employee
189+
{
190+
public List<Employee> DirectReports { get; set; }
191+
192+
public int Id { get; set; }
193+
public string Name { get; set; }
194+
public string Address { get; set; }
195+
public DateTime HireDate { get; set; }
196+
}
197+
198+
public int LastId { get; set; } = 1;
199+
200+
protected override async Task OnInitializedAsync()
201+
{
202+
Data = await GetTreeListData();
203+
}
204+
205+
async Task<List<Employee>> GetTreeListData()
206+
{
207+
List<Employee> data = new List<Employee>();
208+
209+
for (int i = 1; i < 15; i++)
210+
{
211+
Employee root = new Employee
212+
{
213+
Id = LastId,
214+
Name = $"root: {i}",
215+
Address = $"{i}@example.com",
216+
HireDate = DateTime.Now.AddYears(-i),
217+
DirectReports = new List<Employee>(),
218+
};
219+
data.Add(root);
220+
LastId++;
221+
222+
for (int j = 1; j < 4; j++)
223+
{
224+
int currId = LastId;
225+
Employee firstLevelChild = new Employee
226+
{
227+
Id = currId,
228+
Name = $"first level child {j} of {i}",
229+
Address = $"{currId}@example.com",
230+
HireDate = DateTime.Now.AddDays(-currId),
231+
DirectReports = new List<Employee>(),
232+
};
233+
root.DirectReports.Add(firstLevelChild);
234+
LastId++;
235+
236+
for (int k = 1; k < 3; k++)
237+
{
238+
int nestedId = LastId;
239+
firstLevelChild.DirectReports.Add(new Employee
240+
{
241+
Id = LastId,
242+
Name = $"second level child {k} of {j} and {i}",
243+
Address = $"{nestedId}@example.com",
244+
HireDate = DateTime.Now.AddMinutes(-nestedId)
245+
}); ;
246+
LastId++;
247+
}
248+
}
249+
}
250+
251+
return await Task.FromResult(data);
252+
}
253+
}
254+
````
255+
116256
## Customize the SearchBox
117257

118258
The `TreeListSearchBox` component offers the following settings to customize its behavior:

0 commit comments

Comments
 (0)