How to implement an In-place Editor DropDownList Cascading model (get lower level data from server)?

[Brian]

Hi team,

There is an use case: I would like to implement a three-hierarchy In-place Editor with DropDownList to allow my clients to select some value, Vender-Brand-Product for example, I have referenced the official DropDownList Cascading sample, but it's somehow unfit to my case: I need to update the second and third level's DataSource dynamically from server, not from a local Query, since the second and third level contain huge data. So I build a structure like this and expect it could work:

    private SfDropDownList<int, StandardDto> VenderModel = new SfDropDownList<int, StandardDto>

    {

        Fields = new FieldSettingsModel {Text = "Name", Value = "Id"},

        DataSource = new List<StandardDto>(),

    };

    private SfDropDownList<int, StandardDto> BrandModel = new SfDropDownList<int, StandardDto>

    {

        Fields = new FieldSettingsModel {Text = "Name", Value = "Id"},

        DataSource = new List<StandardDto>()

    };

    private SfDropDownList<int, StandardDto> ProductModel = new SfDropDownList<int, StandardDto>

    {

        Fields = new FieldSettingsModel {Text = "Name", Value = "Id"},

        DataSource = new List<StandardDto>()

    };

and initialize the first level in OnInitializedAsync:

    protected override async Task OnInitializedAsync()

    {

        VenderModel.DataSource = (await _appService.GetVenderListAsync()).ToList();

        await base.OnInitializedAsync();

    }

the View is:

<div class="form-group row">

        <label class="col-sm-2">Vender</label>

        <div class="col-sm-10">

            <SfInPlaceEditor Name="Vender" Mode="RenderMode.Inline" Type="InputType.DropDownList" @bind-Value="Selected.Vender.Id" Model="VenderModel" ShowButtons="false" EmptyText="">

                <InPlaceEditorEvents OnActionBegin="OnVenderChange" TValue="int"></InPlaceEditorEvents>

            </SfInPlaceEditor>

        </div>

    </div>

    <div class="form-group row">

        <label class="col-sm-2">Brand</label>

        <div class="col-sm-10">

            <SfInPlaceEditor @ref="_brandEditor" Name="Brand" Mode="RenderMode.Inline" Type="InputType.DropDownList" @bind-Value="Selected.Brand.Id" Model="BrandModel" ShowButtons="false" EmptyText="">

                <InPlaceEditorEvents OnActionBegin="OnBrandChange" TValue="int"></InPlaceEditorEvents>

            </SfInPlaceEditor>

        </div>

    </div>

    <div class="form-group row">

        <label class="col-sm-2">Product</label>

        <div class="col-sm-10">

            <SfInPlaceEditor @ref="_productEditor" Name="Product"  Mode="RenderMode.Inline" Type="InputType.DropDownList" @bind-Value="Selected.Product.Id" Model="ProductModel" ShowButtons="false" EmptyText="">

                <InPlaceEditorEvents OnActionBegin="OnProductChange" TValue="int"></InPlaceEditorEvents>

            </SfInPlaceEditor>

        </div>

    </div>

and I linked three level through (the third level omitted for simplicity):

    private async Task OnVenderChange(ActionBeginEventArgs args)

    {

        InPlaceEditorArgs inPlaceEditorArgs = args.GetInPlaceEditorArgs(); //this is a self-made extension method to get changed name and value

        if (!inPlaceEditorArgs.Value.IsNullOrEmpty())

        {

            BrandModel.DataSource = (await _appService.GetBrandListAsync(int.Parse(inPlaceEditorArgs.Value))).ToList();

            //whatever way I used bellow, the second level never updated, it keeped an empty list.

            _brandEditor.Refresh();

            BrandModel.Refresh();

            await InvokeAsync(StateHasChanged);

        }

    }

But of course it didn't work. So I think there maybe something wrong when I established this, could you please supply a sample to show how to deal with this kind of server-update cascading requirement?

Thanks.

[Indrajith Srinivasan]

Hi Brian,

Greetings from Syncfusion support,

We are currently validating your reported query and will update you with further details in two business days by 10th June 2020.

Regards,
Indrajith

[Brian]

Well, I am really expecting your reply.

[Indrajith Srinivasan]

Hi Brian,

Sorry for the delayed response,

We have further validated on the reported query. We suggest you to load the DataSource, with the corresponding Fields mapped. We have also prepared a sample by changing the DataSource Dynamically on the OnActionBegin event of the first Inpalce-editor.

 

 

   private void OnActionBegin(ActionBeginEventArgs obj) 

    { 

        var value = (obj.Data as JObject)["value"]; 

        HobbyModel_Id  =  new SfDropDownList<int?, Hobby> 

        { 

            DataSource = new List<Hobby> 

            { 

               {new Hobby() {ID = 1, Text = "Changed 1"}}, 

                {new Hobby() {ID = 2, Text = "CHanged 2"}}, 

                {new Hobby() {ID = 3, Text = "Changed 3"}}, 

            }, 

            Fields = new FieldSettingsModel { Text = "Text", Value = "ID" } 

        }; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154985/ze/Inplace-editor_dropdown_datasource662480343  

 

Please let us know if the solution helps,

Regards, 

Indrajith 

[Brian]

Hi team,

I noticed that you suggest me assign a new SfDropDownList Model instead of merely change its DataSource, that's reasonable. I have tried the sample, and it worked on the UI. However, there are some error reported in the browser console . After the second level SfDropDownList Model loaded from OnActionBegin, if I select an option from the newly rendered second level SfDropDownList, the browser console will report as bellow:

System.NullReferenceException: Object reference not set to an instance of an object.

   at Syncfusion.Blazor.BaseComponent.UpdateComponentModel(Dictionary`2 properties, BaseComponent parentObject, Boolean isAutoInitialized)

   at Syncfusion.Blazor.BaseComponent.UpdateComponentModel(Dictionary`2 properties, BaseComponent parentObject, Boolean isAutoInitialized)

   at Syncfusion.Blazor.BaseComponent.UpdateModel(Dictionary`2 properties)

Error: System.NullReferenceException: Object reference not set to an instance of an object.

   at Syncfusion.Blazor.BaseComponent.UpdateComponentModel(Dictionary`2 properties, BaseComponent parentObject, Boolean isAutoInitialized)

   at Syncfusion.Blazor.BaseComponent.UpdateComponentModel(Dictionary`2 properties, BaseComponent parentObject, Boolean isAutoInitialized)

   at Syncfusion.Blazor.BaseComponent.UpdateModel(Dictionary`2 properties)

    at Object.endInvokeDotNetFromJS (https://localhost:5001/_framework/blazor.server.js:8:31660)

    at e. (https://localhost:5001/_framework/blazor.server.js:8:103446)

    at https://localhost:5001/_framework/blazor.server.js:1:19202

    at Array.forEach ()

    at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:19173)

    at e.processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:17165)

    at e.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:10276)

    at WebSocket.i.onmessage (https://localhost:5001/_framework/blazor.server.js:1:38091)

The same console error also appeared when I applied this solution to my own project, which loads second and third level DropDownLists via async remove call. So I guess its the component's bug, could you please check for that and give me a hint?

Thanks.

Thanks.

[Brian]

I sincerely expect you checking for this issue please.

[Indrajith Srinivasan]

Hi Brian,

Sorry for the delayed response,

We have further validated on the reported script error reported. The reported error is due to the type mismatch. By default, the Inplace-editor Model property is object type, and assigning the model as  SfDropDownList<int?, Hobby> dynamically is the cause of the reported script error. We suggest you to update the model as object, to resolve the reported issue. We have also modified the shared sample by loading the three level data for SfInplaceEditor.

Sample: https://www.syncfusion.com/downloads/support/forum/154985/ze/Inplace-editor_dropdown996706829  

 

Please let us know if you need any further assistance,

Regards, 

Indrajith 

[Brian]

Thanks, the sample is very helpful, but I also found that the model object's "dataSource" property name MUST use camelCase. If I use PascalCase (DataSource) or all-lower-case (datasource), the model will act abnormal, including showing the console error. The same to "fields" property name, if I use PascalCase (Fields), DropDownList will display blank options. 

It's not a big issue but somehow a little arbitrary. Since the document dosen't mention this case and developers lean to use PascalCase for property names, I suggest you team to treat them indiscriminately.

[Indrajith Srinivasan]

Hi Brian, 

 

Thanks for your valuable suggestions, 

 

We have validated your reported query. Yes, you can use Pascal casing for the DataSource property, by assigning the [JsonProperty("dataSource")] above the Datasource class definition. We have also modified the already shared sample defining the DataSource with pascal casing. 

 

Bind the datasource like below: 

 

 

   private InplaceData HobbyModel_new = new InplaceData() 

    { 

        DataSource = new List<Hobby> 

    { 

                {new Hobby() {ID = "1", Text = "Value1"}}, 

                {new Hobby() {ID = "2", Text = "Value2"}}, 

                {new Hobby() {ID = "3", Text = "Value3"}}, 

            }, 

        Fields = new FieldSettingsModel { Text = "Text", Value = "ID" } 

    }; 

    public class InplaceData 

    { 

        [JsonProperty("dataSource")] 

        public List<Hobby> DataSource { get; set; } 

        [JsonProperty("fields")] 

        public FieldSettingsModel Fields { get; set; } 

    } 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154985/ze/SfInplaceditor_dropdown_object-2951429  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith

[Brian]

Thanks, that helped me to understand the mechanism.

[Indrajith Srinivasan]

Hi Brian,

Thanks for the update,

Please let us know if you need any further assistance.

Regards, 

Indrajith