Extend the ValueChanged handlers to use Blazor's data binding

[sven5]

Hi Miha,

I was successful in setting a widget's value back to Blazor. It would be great to have this functionality for all widgets. Currently I manually implemented some changes for this to work. You have to take care of this in your automatic code generation.

Let me try to explain with some sample code. I started with a DxSelectBox <DxSelectBox DataSource="@(NewsService.GetCategories())" DisplayExpr="@("Name")" ValueExpr="@("Id")" bind-Value="@DataItem.CategoryId" OnValueChangedEnabled="true" />

In Registration.js I had to extend the code for BlazorDevExtreme_DxSelectBox_Init to call the onValueChanged function:

 if (options.onValueChangedEnabled) {
        options.onValueChanged = function () {
            DotNet.invokeMethodAsync(assemblyName, 'DevExpress.Ui.EditorInterop.OnValueChanged', element.id, instance.option("value"));

        }
    }

In Controls.cs I had to change the ValueChanged EventHandler to use a Tuple:

public static event EventHandler<(JQueryEventArgs, string)> ValueChanged;

And the modified JS registration:

[JSInvokable("DevExpress.Ui.EditorInterop.OnValueChanged")]
public static void OnValueChanged(string identifier, string value)
        {
            ValueChanged?.Invoke(null, (new JQueryEventArgs(identifier), value));
        }

Now in the component DxSelectBox.cshtml I had to modify the event handler:

[Parameter]
    Action<string> ValueChanged { get; set; }
    void DxSelectBox_ValueChanged(object sender, (JQueryEventArgs jQueryEventArgs, string value) args) {
        if (args.jQueryEventArgs.Identifier == Id) {
            ValueChanged?.Invoke(args.value);
        }
    }

Please see my checkin for a complete overview.

[sven5]

It would be great if you could implement this change in your automatic code generation tool because doing it manually is very time-consuming.

But for the moment, as you are very busy, there is no other way for me to do it manually.

Thanks Sven