We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Context value not updating with two-way binding

Hello,


I'm experiencing a bit of a head scratcher and I have no idea if I'm just misunderstanding how blazor works, or how the data grid works. Essentially I have an edit template for the grid. There's two dropdowns in their own components. The second component (sub type) needs to watch for the first dropdowns value and then go fetch the right values from the list. This is essentially cascading the values. What's happening though is I set the value in the first component and despite having two way binding, the 2nd component is not receiving an updated value. Any ideas? I've attached the code I'm using but here's a snippet:




 var entry = (context as AlcoholModel);
                    <div>
                        <div class="row">
                            <div class="col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                <label>Type</label>
                                <MyApp.Pages.AlcoholTypes.AlcoholTypeDropdown @bind-ID="entry.AlcoholTypeID"></MyApp.Pages.AlcoholTypes.AlcoholTypeDropdown>
                            </div>
                            <div class="col-xl-6 col-md-6 col-sm-12 col-xs-12">
                                <label>Sub-Type</label>
                                <MyApp.Pages.AlcoholTypes.AlcoholSubTypeDropdown @bind-ID="entry.AlcoholSubTypeID" AlcoholTypeID="entry.AlcoholTypeID"></MyApp.Pages.AlcoholTypes.AlcoholSubTypeDropdown>
                            </div>
                        </div>
What am I missing here?

Attachment: BindingIssue_a8f2f2c8.zip

3 Replies 1 reply marked as answer

PS Prathap Senthil Syncfusion Team March 31, 2023 01:08 PM UTC

Hi Evan,

Query:” The second component (sub type) needs to watch for the first dropdowns value and then go fetch the right values from the list. This is essentially cascading the values. What's happening though is I set the value in the first component and despite having two way binding, the 2nd component is not receiving an updated value.”


We created the simple custom dropdown component sample and we have tried reproducing the issue in our recent version (21.1.35) but were unable to do so. We have included a sample for your reference. In order to assist in troubleshooting the issue, we kindly request that you provide a simple reproducible runnable sample or if possible, try modifying the attached sample to see if the issue can be reproduced there. We appreciate your cooperation and hope to resolve this issue for you as soon as possible.

Regards,
Prathap S


Attachment: BlazorDataGridwithDropdownCustomComponent_80bf50f9.zip


EV Evan April 1, 2023 05:10 PM UTC

Hello,


I actually managed to solve this using a different method. I found this thread. I needed to move all the edit template code into its own component and use two-way binding on the context entry. After doing this, the values were changing as expected between the sibling components and my dropdowns were working properly. Thanks for looking into this. 


<EditTemplate @bind-Model="entry"></EditTemplate>


Marked as answer

PS Prathap Senthil Syncfusion Team April 3, 2023 04:57 AM UTC


Thanks for the update,


We are happy to hear that the issue has been resolved on your end. If you have any further questions, please do not hesitate to reach out to us.


Loader.
Up arrow icon