Skip to content

Commit b621bb8

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 06-08-2024 1:30:25 PM
1 parent 9e652a8 commit b621bb8

File tree

12 files changed

+193
-4127
lines changed

12 files changed

+193
-4127
lines changed

‎ej2-javascript-toc.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2555,7 +2555,7 @@
25552555
<li><a href="https://ej2.syncfusion.com/javascript/documentation/api/tooltip/">API Reference</a></li>
25562556
</ul>
25572557
</li><li>
2558-
TreeGrid
2558+
<a href="/ej2-javascript/treegrid/overview">TreeGrid</a>
25592559
<ul>
25602560
<li><a href="/ej2-javascript/treegrid/getting-started">Getting Started</a></li>
25612561
<li><a href="/ej2-javascript/treegrid/module">Feature Modules</a></li>

‎ej2-javascript/code-snippet/treegrid/data-binding-cs2/datasource.ts

Lines changed: 0 additions & 1174 deletions
Large diffs are not rendered by default.

‎ej2-javascript/code-snippet/treegrid/data-binding-cs2/es5-datasource.js

Lines changed: 0 additions & 752 deletions
Large diffs are not rendered by default.

‎ej2-javascript/code-snippet/treegrid/data-binding-cs3/datasource.ts

Lines changed: 0 additions & 1304 deletions
Large diffs are not rendered by default.

‎ej2-javascript/code-snippet/treegrid/data-binding-cs3/es5-datasource.js

Lines changed: 0 additions & 881 deletions
Large diffs are not rendered by default.

‎ej2-javascript/treegrid/data-binding/data-binding.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,11 @@ You can use TreeGrid [`dataSource`](../../api/treegrid/#datasource) property to
2727
{% highlight ts tabtitle="index.ts" %}
2828
{% include code-snippet/treegrid/data-binding-cs1/index.ts %}
2929
{% endhighlight %}
30+
{% highlight ts tabtitle="datasource.ts" %}
31+
{% include code-snippet/treegrid/data-binding-cs1/datasource.ts %}
32+
{% endhighlight %}
3033
{% highlight html tabtitle="index.html" %}
31-
{% include code-snippet/treegrid/data-binding-cs1/index.html %}
34+
{% include code-snippet/treegrid/data-binding-cs1/ts/index.html %}
3235
{% endhighlight %}
3336
{% endtabs %}
3437

@@ -40,8 +43,11 @@ You can use TreeGrid [`dataSource`](../../api/treegrid/#datasource) property to
4043
{% highlight js tabtitle="index.js" %}
4144
{% include code-snippet/treegrid/data-binding-cs1/index.js %}
4245
{% endhighlight %}
46+
{% highlight js tabtitle="datasource.js" %}
47+
{% include code-snippet/treegrid/data-binding-cs1/es5-datasource.js %}
48+
{% endhighlight %}
4349
{% highlight html tabtitle="index.html" %}
44-
{% include code-snippet/treegrid/data-binding-cs1/index.html %}
50+
{% include code-snippet/treegrid/data-binding-cs1/js/index.html %}
4551
{% endhighlight %}
4652
{% endtabs %}
4753

‎ej2-javascript/treegrid/data-binding/local-data.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,11 @@ The following code example shows you how to bind the hierarchical local data int
3434
{% highlight ts tabtitle="index.ts" %}
3535
{% include code-snippet/treegrid/data-binding-cs2/index.ts %}
3636
{% endhighlight %}
37+
{% highlight ts tabtitle="datasource.ts" %}
38+
{% include code-snippet/treegrid/data-binding-cs2/datasource.ts %}
39+
{% endhighlight %}
3740
{% highlight html tabtitle="index.html" %}
38-
{% include code-snippet/treegrid/data-binding-cs2/index.html %}
41+
{% include code-snippet/treegrid/data-binding-cs2/ts/index.html %}
3942
{% endhighlight %}
4043
{% endtabs %}
4144

@@ -47,8 +50,11 @@ The following code example shows you how to bind the hierarchical local data int
4750
{% highlight js tabtitle="index.js" %}
4851
{% include code-snippet/treegrid/data-binding-cs2/index.js %}
4952
{% endhighlight %}
53+
{% highlight html tabtitle="datasource.js" %}
54+
{% include code-snippet/treegrid/data-binding-cs2/es5-datasource.js %}
55+
{% endhighlight %}
5056
{% highlight html tabtitle="index.html" %}
51-
{% include code-snippet/treegrid/data-binding-cs2/index.html %}
57+
{% include code-snippet/treegrid/data-binding-cs2/js/index.html %}
5258
{% endhighlight %}
5359
{% endtabs %}
5460

@@ -70,8 +76,11 @@ TreeGrid is rendered from Self-Referential data structures by providing two fiel
7076
{% highlight ts tabtitle="index.ts" %}
7177
{% include code-snippet/treegrid/data-binding-cs3/index.ts %}
7278
{% endhighlight %}
79+
{% highlight ts tabtitle="datasource.ts" %}
80+
{% include code-snippet/treegrid/data-binding-cs3/datasource.ts %}
81+
{% endhighlight %}
7382
{% highlight html tabtitle="index.html" %}
74-
{% include code-snippet/treegrid/data-binding-cs3/index.html %}
83+
{% include code-snippet/treegrid/data-binding-cs3/ts/index.html %}
7584
{% endhighlight %}
7685
{% endtabs %}
7786

@@ -83,8 +92,11 @@ TreeGrid is rendered from Self-Referential data structures by providing two fiel
8392
{% highlight js tabtitle="index.js" %}
8493
{% include code-snippet/treegrid/data-binding-cs3/index.js %}
8594
{% endhighlight %}
95+
{% highlight html tabtitle="datasource.js" %}
96+
{% include code-snippet/treegrid/data-binding-cs3/es5-datasource.js %}
97+
{% endhighlight %}
8698
{% highlight html tabtitle="index.html" %}
87-
{% include code-snippet/treegrid/data-binding-cs3/index.html %}
99+
{% include code-snippet/treegrid/data-binding-cs3/js/index.html %}
88100
{% endhighlight %}
89101
{% endtabs %}
90102

‎ej2-javascript/treegrid/data-binding/remote-data.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,119 @@ Similarly, if the user navigates to a new page, the root nodes of that specific
5757
{% previewsample "page.domainurl/code-snippet/treegrid/data-binding-cs4" %}
5858
{% endif %}
5959

60+
**Service code snippet:**
61+
62+
```ts
63+
64+
namespace Controllers
65+
{
66+
[Produces("application/json")]
67+
[Route("api/SelfReferenceData")]
68+
public class SelfReferenceDataController : Controller
69+
{
70+
public static List<SelfReferenceData> tree = new List<SelfReferenceData>();
71+
// GET: api/SelfReferenceData
72+
[HttpGet]
73+
74+
public object Get()
75+
{
76+
var queryString = Request.Query;
77+
if (tree.Count == 0)
78+
tree = SelfReferenceData.GetTree();
79+
//Filtering
80+
if (queryString.Keys.Contains("$filter") && !queryString.Keys.Contains("$top"))
81+
{
82+
StringValues filter;
83+
queryString.TryGetValue("$filter", out filter);
84+
int fltr = Int32.Parse(filter[0].ToString().Split("eq")[1]);
85+
IQueryable<SelfReferenceData> data1 = tree.Where(f => f.ParentItem == fltr).AsQueryable();
86+
return new { result = data1.ToList(), count = data1.Count() };
87+
}
88+
List<SelfReferenceData> data = tree.ToList();
89+
if (queryString.Keys.Contains("$select"))
90+
{
91+
data = (from ord in tree
92+
select new SelfReferenceData
93+
{
94+
ParentItem = ord.ParentItem
95+
}
96+
).ToList();
97+
return data;
98+
}
99+
data = data.Where(p => p.ParentItem == null).ToList();
100+
int count = data.Count;
101+
//Paging
102+
if (queryString.Keys.Contains("$inlinecount"))
103+
{
104+
StringValues Skip;
105+
StringValues Take;
106+
107+
int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
108+
int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
109+
110+
return new { result = tree.Skip(skip).Take(top), count = tree.Count };
111+
}
112+
else
113+
{
114+
return SelfReferenceData.GetTree();
115+
}
116+
117+
public class SelfReferenceData
118+
{
119+
120+
[Key]
121+
public int TaskID { get; set; }
122+
public string TaskName { get; set; }
123+
public DateTime StartDate { get; set; }
124+
public DateTime EndDate { get; set; }
125+
public String Progress { get; set; }
126+
public String Priority { get; set; }
127+
public int Duration { get; set; }
128+
public int? ParentItem { get; set; }
129+
public bool? isParent { get; set; }
130+
public SelfReferenceData() { }
131+
public static List<SelfReferenceData> GetTree()
132+
{
133+
if (tree.Count == 0)
134+
{
135+
int root = -1;
136+
for (var t = 1; t <= 60; t++)
137+
{
138+
Random ran = new Random();
139+
string math = (ran.Next() % 3) == 0 ? "High" : (ran.Next() % 2) == 0 ? "Release Breaker" : "Critical";
140+
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
141+
root++;
142+
int rootItem = tree.Count + root + 1;
143+
tree.Add(new SelfReferenceData() { TaskID = rootItem, TaskName = "Parent Task " + rootItem.ToString(), StartDate = new DateTime(1992, 06, 07), EndDate = new DateTime(1994, 08, 25), isParent = true, ParentItem = null, Progress = progr, Priority = math, Duration = ran.Next(1, 50) });
144+
int parent = tree.Count;
145+
for (var c = 0; c < 10; c++)
146+
{
147+
root++;
148+
string val = ((parent + c + 1) % 3 == 0) ? "Low" : "Critical";
149+
int parn = parent + c + 1;
150+
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
151+
int iD = tree.Count + root + 1;
152+
tree.Add(new SelfReferenceData() { TaskID = iD, TaskName = "Child Task " + iD.ToString(), StartDate = new DateTime(1992, 06, 07), EndDate = new DateTime(1994, 08, 25), isParent = (((parent + c + 1) % 3) == 0), ParentItem = rootItem, Progress = progr, Priority = val, Duration = ran.Next(1, 50) });
153+
if ((((parent + c + 1) % 3) == 0))
154+
{
155+
int immParent = tree.Count;
156+
for (var s = 0; s < 3; s++)
157+
{
158+
root++;
159+
string Prior = (immParent % 2 == 0) ? "Validated" : "Normal";
160+
tree.Add(new SelfReferenceData() { TaskID = tree.Count + root + 1, TaskName = "Sub Task " + (tree.Count + root + 1).ToString(), StartDate = new DateTime(1992, 06, 07), EndDate = new DateTime(1994, 08, 25), isParent = false, ParentItem = iD, Progress = (immParent % 2 == 0) ? "On Progress" : "Closed", Priority = Prior, Duration = ran.Next(1, 50) });
161+
}
162+
}
163+
}
164+
}
165+
}
166+
return tree;
167+
}
168+
}
169+
}
170+
171+
```
172+
60173
> By default, `DataManager` uses `ODataAdaptor` for remote data-binding.
61174
> Based on the RESTful web services, set the corresponding adaptor to DataManager. Refer [`here`](https://ej2.syncfusion.com/documentation/data/adaptors/?no-cache=1) for more details.
62175
> Filtering and searching server-side data operations are not supported in load on demand

‎ej2-javascript/treegrid/js/getting-started.md

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -306,8 +306,11 @@ In root-level paging mode, paging is based on the root-level rows only, i.e., it
306306
{% highlight js tabtitle="index.js" %}
307307
{% include code-snippet/treegrid/tree-grid-cs1/index.js %}
308308
{% endhighlight %}
309+
{% highlight js tabtitle="datasource.js" %}
310+
{% include code-snippet/treegrid/tree-grid-cs1/es5-datasource.js %}
311+
{% endhighlight %}
309312
{% highlight html tabtitle="index.html" %}
310-
{% include code-snippet/treegrid/tree-grid-cs1/index.html %}
313+
{% include code-snippet/treegrid/tree-grid-cs1/js/index.html %}
311314
{% endhighlight %}
312315
{% endtabs %}
313316

@@ -322,8 +325,11 @@ The sorting feature enables you to order the records. It can be enabled by setti
322325
{% highlight js tabtitle="index.js" %}
323326
{% include code-snippet/treegrid/tree-grid-cs2/index.js %}
324327
{% endhighlight %}
328+
{% highlight js tabtitle="datasource.js" %}
329+
{% include code-snippet/treegrid/tree-grid-cs2/es5-datasource.js %}
330+
{% endhighlight %}
325331
{% highlight html tabtitle="index.html" %}
326-
{% include code-snippet/treegrid/tree-grid-cs2/index.html %}
332+
{% include code-snippet/treegrid/tree-grid-cs2/js/index.html %}
327333
{% endhighlight %}
328334
{% endtabs %}
329335

@@ -340,8 +346,11 @@ By default, filtered records are shown along with its parent records. This behav
340346
{% highlight js tabtitle="index.js" %}
341347
{% include code-snippet/treegrid/tree-grid-cs3/index.js %}
342348
{% endhighlight %}
349+
{% highlight js tabtitle="datasource.js" %}
350+
{% include code-snippet/treegrid/tree-grid-cs3/es5-datasource.js %}
351+
{% endhighlight %}
343352
{% highlight html tabtitle="index.html" %}
344-
{% include code-snippet/treegrid/tree-grid-cs3/index.html %}
353+
{% include code-snippet/treegrid/tree-grid-cs3/js/index.html %}
345354
{% endhighlight %}
346355
{% endtabs %}
347356

@@ -357,8 +366,11 @@ Output will be displayed as follows.
357366
{% highlight js tabtitle="index.js" %}
358367
{% include code-snippet/treegrid/tree-grid-cs4/index.js %}
359368
{% endhighlight %}
369+
{% highlight js tabtitle="datasource.js" %}
370+
{% include code-snippet/treegrid/tree-grid-cs4/es5-datasource.js %}
371+
{% endhighlight %}
360372
{% highlight html tabtitle="index.html" %}
361-
{% include code-snippet/treegrid/tree-grid-cs4/index.html %}
373+
{% include code-snippet/treegrid/tree-grid-cs4/js/index.html %}
362374
{% endhighlight %}
363375
{% endtabs %}
364376

@@ -369,3 +381,13 @@ Output will be displayed as follows.
369381
The Essential JS 2 TreeGrid control features are segregated into individual feature-wise modules. The [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contains code for all features used in the TreeGrid. So, do not to use the `CDN` scripts in production. It is strongly recommended to generate script files to use in production using our **Custom Resource Generator**[`(CRG)`](https://crg.syncfusion.com/) for Essential JS 2. CRG allows you to generate the bundled script for the currently enabled features in TreeGrid.
370382

371383
> You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos/#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data.
384+
385+
## See Also
386+
387+
* [Getting Started with Syncfusion JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started)
388+
* [Getting Started with Syncfusion Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started)
389+
* [Getting Started with Syncfusion React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started)
390+
* [Getting Started with Syncfusion Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started)
391+
* [Getting Started with Syncfusion ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core)
392+
* [Getting Started with Syncfusion ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc)
393+
* [Getting Started with Syncfusion Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp)

‎ej2-javascript/treegrid/index.md renamed to ‎ej2-javascript/treegrid/overview.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@ The most important features available in the TreeGrid component are paging, sort
1818
## Key features
1919

2020
* **Data sources**: Binds the TreeGrid component with an array of JavaScript objects or DataManager.
21+
* **Adaptive Layout**: The Tree Grid user interface (UI) has been designed to provide an optimal viewing experience and improve usability on small screens.
2122
* **Sorting**: Supports **n** levels of sorting.
2223
* **Filtering**: Supports filtering records with filter bar and menu filtering modes.
2324
* **Paging**: Allows easy switching between pages using the pager bar.
2425
* **Editing**: Offers cell and row editing modes for updating the records.
26+
* **Virtual scrolling**: To efficiently handle and display a large amount of data without experiencing any performance degradation.
2527
* **Columns**: The column definitions are used as the datasource schema in the TreeGrid. This plays a vital role in rendering column values in the required tree structure.
2628
* **Reordering**: Allows dragging and dropping of any column anywhere in the treegrid’s column header row, thus allowing repositioning of columns.
2729
* **Resizing**: Resizing allows changing column width on the fly by simply dragging the right corner of the column header.

‎ej2-javascript/treegrid/ts/getting-started.md

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -213,8 +213,11 @@ The paging feature enables users to view the treegrid record in a paged view. It
213213
{% highlight ts tabtitle="index.ts" %}
214214
{% include code-snippet/treegrid/tree-grid-cs5/index.ts %}
215215
{% endhighlight %}
216+
{% highlight ts tabtitle="datasource.ts" %}
217+
{% include code-snippet/treegrid/tree-grid-cs5/datasource.ts %}
218+
{% endhighlight %}
216219
{% highlight html tabtitle="index.html" %}
217-
{% include code-snippet/treegrid/tree-grid-cs5/index.html %}
220+
{% include code-snippet/treegrid/tree-grid-cs5/ts/index.html %}
218221
{% endhighlight %}
219222
{% endtabs %}
220223

@@ -229,8 +232,11 @@ The sorting feature enables you to order the records. It can be enabled by setti
229232
{% highlight ts tabtitle="index.ts" %}
230233
{% include code-snippet/treegrid/tree-grid-cs6/index.ts %}
231234
{% endhighlight %}
235+
{% highlight ts tabtitle="datasource.ts" %}
236+
{% include code-snippet/treegrid/tree-grid-cs6/datasource.ts %}
237+
{% endhighlight %}
232238
{% highlight html tabtitle="index.html" %}
233-
{% include code-snippet/treegrid/tree-grid-cs6/index.html %}
239+
{% include code-snippet/treegrid/tree-grid-cs6/ts/index.html %}
234240
{% endhighlight %}
235241
{% endtabs %}
236242

@@ -247,8 +253,11 @@ By default, filtered records are shown along with its parent records. This behav
247253
{% highlight ts tabtitle="index.ts" %}
248254
{% include code-snippet/treegrid/tree-grid-cs7/index.ts %}
249255
{% endhighlight %}
256+
{% highlight ts tabtitle="datasource.ts" %}
257+
{% include code-snippet/treegrid/tree-grid-cs7/datasource.ts %}
258+
{% endhighlight %}
250259
{% highlight html tabtitle="index.html" %}
251-
{% include code-snippet/treegrid/tree-grid-cs7/index.html %}
260+
{% include code-snippet/treegrid/tree-grid-cs7/ts/index.html %}
252261
{% endhighlight %}
253262
{% endtabs %}
254263

@@ -272,11 +281,24 @@ Output will be displayed as follows.
272281
{% highlight ts tabtitle="index.ts" %}
273282
{% include code-snippet/treegrid/tree-grid-cs8/index.ts %}
274283
{% endhighlight %}
284+
{% highlight ts tabtitle="datasource.ts" %}
285+
{% include code-snippet/treegrid/tree-grid-cs8/datasource.ts %}
286+
{% endhighlight %}
275287
{% highlight html tabtitle="index.html" %}
276-
{% include code-snippet/treegrid/tree-grid-cs8/index.html %}
288+
{% include code-snippet/treegrid/tree-grid-cs8/ts/index.html %}
277289
{% endhighlight %}
278290
{% endtabs %}
279291

280292
{% previewsample "page.domainurl/code-snippet/treegrid/tree-grid-cs8" %}
281293

282294
> You can refer to our [`JavaScript Tree Grid`](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example [`JavaScript Tree Grid example`](https://ej2.syncfusion.com/demos/#/material/tree-grid/treegrid-overview.html) to knows how to present and manipulate data.
295+
296+
## See Also
297+
298+
* [Getting Started with Syncfusion JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started)
299+
* [Getting Started with Syncfusion Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started)
300+
* [Getting Started with Syncfusion React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started)
301+
* [Getting Started with Syncfusion Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started)
302+
* [Getting Started with Syncfusion ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core)
303+
* [Getting Started with Syncfusion ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc)
304+
* [Getting Started with Syncfusion Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp)

‎ej2-typescript-toc.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2559,7 +2559,7 @@
25592559
<li><a href="https://ej2.syncfusion.com/documentation/api/tooltip/">API Reference</a></li>
25602560
</ul>
25612561
</li><li>
2562-
TreeGrid
2562+
<a href="/ej2-typescript/treegrid/overview">TreeGrid</a>
25632563
<ul>
25642564
<li><a href="/ej2-typescript/treegrid/getting-started">Getting Started</a></li>
25652565
<li><a href="/ej2-typescript/treegrid/module">Feature Modules</a></li>

0 commit comments

Comments
 (0)