From 42c4ae2ec64610a18b14dad39cd120f050c58a9d Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sat, 18 Jun 2022 15:55:39 +0300 Subject: [PATCH 1/2] kb(grid): improve cascading dropdowns KB to handle initial data load --- .../grid-cascade-dropdowns-for-fields.md | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/knowledge-base/grid-cascade-dropdowns-for-fields.md b/knowledge-base/grid-cascade-dropdowns-for-fields.md index df1ff20f98..c72444535b 100644 --- a/knowledge-base/grid-cascade-dropdowns-for-fields.md +++ b/knowledge-base/grid-cascade-dropdowns-for-fields.md @@ -29,14 +29,15 @@ There are two approaches you can take: * For full freedom, implement a custom edit form (here are examples for inline, and popup) -* Implement the general approach for [cascading dropdowns]({%slug dropdown-kb-cascading%}) in the [editor templates]() of those fields. a key thing is to create new data collections, and to use the OnChange event. +* Implement the general approach for [cascading dropdowns]({%slug dropdown-kb-cascading%}) in the [editor templates]({%slug grid-templates-editor%}) of those fields. a key thing is to create new data collections, and to use the OnChange event. You may also want to handle the `OnEdit` event of the grid to provide initial data for the second column. >caption Example of cascading dropdowns in grid editor templates in popup edit mode (works for inline mode too) ````CSHTML @* Field 1 determines what you see in the cascaded field. The code comments offer some more details *@ - + @@ -77,6 +78,11 @@ There are two approaches you can take: public List GridData { get; set; } public List SecondFieldData { get; set; } + // These two event handlers implement loading data on demand to cascade the value of the second + // column through the value of the first. The OnEdit handler is to pre-load data for the second column + // when there is already data for the first one, but none for the second + // Modify the logic and use appropriate services in an actual application, this is just a basic example + async Task CascadeSecondList(object newVal) { await Task.Delay(300); // simulate service/data call, remove in real app @@ -84,7 +90,10 @@ There are two approaches you can take: // "load" data - in this case just show some relation to the first field List theNewData = Enumerable.Range(1, 5).Select(x => $"option {x} for {CurrentlyEditedEmployee.Field1}").ToList(); // add the current value so that it is found in the data source and the drodown does not revert to the default value of the type - if (!string.IsNullOrEmpty(CurrentlyEditedEmployee.Field2)) + Console.WriteLine(theNewData.IndexOf(CurrentlyEditedEmployee.Field2)); + if (!string.IsNullOrEmpty(CurrentlyEditedEmployee.Field2) && + theNewData.IndexOf(CurrentlyEditedEmployee.Field2) == -1 // don't add the existing item a second time + ) { theNewData.Add(CurrentlyEditedEmployee.Field2); } @@ -92,6 +101,16 @@ There are two approaches you can take: SecondFieldData = theNewData; } + async Task EditHandler(GridCommandEventArgs args) + { + if(CurrentlyEditedEmployee is null) + { + CurrentlyEditedEmployee = args.Item as SampleData; + } + await CascadeSecondList(null); + } + + // sample data to get the thing running public void UpdateHandler(GridCommandEventArgs args) From 6964a395acbd73e61a8a75d5bd4e3dc3ef0982fc Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Sun, 19 Jun 2022 09:28:32 +0300 Subject: [PATCH 2/2] kb(grid): hint for other LOD for cascading dropdowns in a grid --- knowledge-base/grid-cascade-dropdowns-for-fields.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/knowledge-base/grid-cascade-dropdowns-for-fields.md b/knowledge-base/grid-cascade-dropdowns-for-fields.md index c72444535b..a0bffead2e 100644 --- a/knowledge-base/grid-cascade-dropdowns-for-fields.md +++ b/knowledge-base/grid-cascade-dropdowns-for-fields.md @@ -25,12 +25,15 @@ res_type: kb I want to have the options for one of the fields in the grid to depend on the choice of another. In other words, to cascade one dropdown from the other in the grid columns. ## Solution -There are two approaches you can take: +There are three approaches you can take: * For full freedom, implement a custom edit form (here are examples for inline, and popup) * Implement the general approach for [cascading dropdowns]({%slug dropdown-kb-cascading%}) in the [editor templates]({%slug grid-templates-editor%}) of those fields. a key thing is to create new data collections, and to use the OnChange event. You may also want to handle the `OnEdit` event of the grid to provide initial data for the second column. +* Use load on demand for the dropdowns themselves (their `OnRead` event) so that when they initialize, they will fire the event, and you can load the data there. The component fires the event when needed and you can use the currently edited item you store in the view-model to provide more information to your service. + + >caption Example of cascading dropdowns in grid editor templates in popup edit mode (works for inline mode too) ````CSHTML