Handling the ValueChanged problem

[Alberto]

Hi, I am trying the example from documentation but it doesnt work and report a js problem in browser.

 

Error:

blazor.server.js:15 [2019-09-04T13:35:52.440Z] Error: System.InvalidOperationException: Telerik.Blazor.Components.DropDownList.TelerikDropDownList`2[UI.Pages.Users.User+MyDdlModel,System.Int32] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.
   at Telerik.Blazor.Common.TelerikInputBase`1.SetParametersAsync(ParameterView parameters)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue()

 

 

Code:

 

@using Telerik.Blazor.Components.DropDownList

 

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"

                     Value="@InitialValue" ValueChanged="@( (int v) => MyValueChangedHandler(v) )">

</TelerikDropDownList>

 

<br />

@result

<br />

@InitialValue

 

@code {

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

 

    int InitialValue { get; set; } = 3; // an intial value is not required, this example showcases how to set it

 

    string result { get; set; }

 

    public class MyDdlModel

    {

        public int MyValueField { get; set; }

        public string MyTextField { get; set; }

    }

 

    async Task MyValueChangedHandler(int newVal)

    {

        // the type of the value field in the model determines the signature of the handler

        result = $"The user selected {newVal}";

 

        // handling ValueChanged does not let you use value binding, so if you need to update the model

        // you must do that manually in the handler. This is not required, though

        InitialValue = newVal;

    }

}

[Marin Bratanov]

Hi Alberto,

If you have upgraded to Preview 9, please wait a little until we release our 1.7.0 version that will be compatible with Preview 9, so you can use this. I tested this snippet with the current release candidate and it works fine for me. It did work fine for me with Preview 8 and 1.6.0 when I wrote the docs, so my best guess is that you are already at Preview 9 with 1.6.0.

If upgrading to 1.7.0 when it becomes available does not help, I would encourage you to open a support ticket and send me a simple solution that reproduces the problem.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor