The DropDownList Model failed to work after upgraded to 18.2.0.44

Question

Hi team,When the In-Place Editor with DropDownList type works fine with model structure like this before v18.2: public SfDropDownList CountryModel { get; } = new SfDropDownList() { Placeholder = TaurusLocale.Country, DataSource = Enum.GetNames(typeof(Country)), AllowFiltering = true, ShowClearButton = false };it dosen't works any more after the upgrade, I found that I have to change the model type to "object" to make it work again, like this: public object CountryModel { get; } = new { placeholder = TaurusLocale.Country, dataSource = Enum.GetNames(typeof(Country)), allowFiltering = true, showClearButton = false };If the former model is indeed invalid, which I have made a lot of discussion and got some kind of confirmation of model usage here in the forum with you, that means I have to change all my interfaces and model types in my project now. It will be really frustrating about that since I see In-Place Editor is no longer in preview status. I am sorry it sounds like a complain but the huge change without stable API really annoys me so much.Could you please reconfirm if obsolete of using SfDropDownList as model type is the fact. and should I make effort to amend my code to follow the change..Thanks.

Indrajith Srinivasan · Accepted Answer

Hi Brian,Sorry for the inconvenience caused, We have validated your reported query and able to reproduce the reported issue from our end. As a workaround, we suggest you to define you the Model like below for the DropDownList. We will also include the existing working behavior with Inplace-editor Model binding within our next weekly patch release scheduled on 14th July. Until then you can use the below way for binding the Model. Feedback link: https://www.syncfusion.com/feedback/15979/ @using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.InPlaceEditor @using Newtonsoft.Json @code { public DropDownModal DropModel = new DropDownModal() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public class DropDownModal : SfDropDownList { [JsonProperty("dataSource")] public object DataSource { get; set; } [JsonProperty("placeHolder")] public string Placeholder { get; set; } } } We have validated on the reported query and have considered “Disable the showCloseIcon for the DateModel doesn't work” as a bug from our end and logged the report for the same, and the fix will be included with our weekly patch release, which is scheduled on 21st of July. You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/15976/ Regards, Indrajith

Brian · Answer

I also find that other models like DatePickerModel face the same problem too. And, in an object model used for InputType.Date, the showClearButton = false property dosen't work (which works in object model InputType.DropDownList):

public object DateModel { get; } = new

{

showClearButton = false

};

the Editor still shows the ClearButton when active.

Indrajith Srinivasan · Answer

Hi Brian, Thanks for your patience, We have resolved the issues with Inplace-editor Model bindings and the fix is now available with the Nuget package version 18.2.45. Below is the list of code blocks for Inplace-editor. We will also include the same in our documentation. Changes done: Model Before After DropDownList public SfDropDownList DropModel = new SfDropDownList() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public DropDownListModel DropModel = new DropDownListModel() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; DateTime public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" }; public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" }; @using Syncfusion.Blazor.InPlaceEditor @using Syncfusion.Blazor.RichTextEditor

Built-in Controls

DatePicker
DateTimePicker
DropDownList
MaskedTextBox
NumericTextBox
TextBox

Injectable Controls

AutoComplete
ColorPicker
ComboBox
DateRangePicker
MultiSelect
RTE
Slider
TimePicker

@code { public DateTime DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day); public DateTime DateTimeValue { get; set; } = DateTime.Now; public DateTime[] DateRangeValue { get; set; } = new DateTime[] { DateTime.Now, DateTime.Now.AddDays(20) }; public DateTime TimeValue { get; set; } = DateTime.Now; public string MaskValue = "123-345-678"; public string NumericValue = "10"; public string TextValue = "Andrew"; public string DropValue = "Android"; public string AutocompValue = "Android"; public string ColorValue = "#81aefd"; public string ComboBoxValue = "Android"; public string[] MultiValue = new string[] { "Android" }; public string RteValue = "

Enter your content here

"; public double SliderValue = 20; public DatePickerModel DateModel = new DatePickerModel() { Placeholder = "Select date" }; public DateTimePickerModel DateTimeModel = new DateTimePickerModel() { Placeholder = "Select date" }; public DropDownListModel DropModel = new DropDownListModel() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public MaskedTextBoxModel MaskedModel = new MaskedTextBoxModel() { Mask = "000-000-000" }; public NumericTextBoxModel NumericModel = new NumericTextBoxModel() { Placeholder = "Enter number" }; public TextBoxModel TextModel = new TextBoxModel() { Placeholder = "Enter some text" }; public AutoCompleteModel AutocompModel = new AutoCompleteModel() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public ComboBoxModel ComboBoxModel = new ComboBoxModel() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public DateRangePickerModel DateRangeModel = new DateRangePickerModel() { Placeholder = "Select date" }; public MultiSelectModel MultiModel = new MultiSelectModel() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public RichTextEditorModel RteModel = new RichTextEditorModel() { Placeholder = "Enter your content here" }; public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" }; } Also, the reported issue “Disable the showCloseIcon for the DateModel doesn't work” is resolved with the Nuget package version 18.2.45, when using the DatePickerModel instead of object type. Can you upgrade your package to this version to resolve the issue from your end ? Regards, Indrajith

Brian · Answer

The improvement is brilliant. However, could you please tell me why dosen't NumericTextBoxModel has properties of "Min" and "Max"? How can I limit input range without them. And why dosen't DropDownListModel  has "Fields" property to set Text and Value? Components couldn't meet my design target without them.

Indrajith Srinivasan · Answer

Hi Brian,We deeply regret for the inconvenience caused, 
We have included the missing properties with the Models, including the Fields property with DropDownListModel and Min and Max properties with NumericTextBoxModel, the fix will be included with our next patch release on 21st July. Until then, we suggest you to use the already suggested workaround.Regards, 
Indrajith

Brian · Answer

I am glad to get the release date.

Pandiyaraj Muniyandi · Answer

Hi Brian, 
 
Thanks for your patience,  
 
We have include the missing In-place Editor properties with Models and the fix is now available with the NuGet package version 18.2.46. 
 
Can you please upgrade your package to this version to resolve the issue from your end?  
 
Regards, 
Pandiyaraj

Brian · Answer

I have seen the update, but the DropDownListModel's new-added FieldSettingsModel still has console error bug. I supplied a project to show it. if you pick a item from the list, the console error will report as the screenshot shows. Is there something wrong with it? please re-check your release, thank you.

Attachment: SyncfusionBlazorDropDownModelIssue_43c22ec2.rar

Indrajith Srinivasan · Answer

Hi Brian,

Good day to you,

We have validated your reported query. The DropDownListModel Tvalue is set as the DataSource class StringDto, hence the reported script error occurs. Set proper Tvalue to resolve the reported issue.

private DropDownListModel<int> Model = new DropDownListModel<int>

{

...

};

Please get back to us if you need any further assistance,

Regards,

Indrajith

Brian · Answer

That works, thank you.

Indrajith Srinivasan · Answer

Hi Brian,Welcome,Please let us know if you need any further assistance,Regards,Indrajith

Model	Before	After
DropDownList	public SfDropDownList<string, string> DropModel = new SfDropDownList<string, string>() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } };	public DropDownListModel<string> DropModel = new DropDownListModel<string>() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } };
DateTime	public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" };	public TimePickerModel<string> TimeModel = new TimePickerModel<string>() { Placeholder = "Select date" };