Dyanmically changing the value of a DropDownList control inside of the Edit Template of a ListView control

[Scott]

Hello,
I have a DropDownList control in the Edit template of a ListView control and it is passing values to my controller instance correctly if the user selects a value from the DropDownList and then presses the "k-update-button".

Also , I have code that dynamically changes the value of the DropDownList control if the value of another DropDownList control is changed. I am using this statement to change the DropDownList control value:

$("#ValidationType").data("kendoDropDownList").value("Flat");

The above line works correctly and the UI successfully displays the correct DropDownList option on the screen. However, when pressing the "k-update-button", the dynamically selected value is not passed back to the controller during MVC binding. It is a null value.

Again, my the value binding works if the user selects a value, but it does not work if I dynamically select a value using JavaScript/jQuery. 

Just wanted to see if this is a known issue and/or if there is a work-around. 

I have also tried getting the template data via the "Data" method in conjunction with the DataScource Create event but I ran into the same problem here as well. My ListView is defined as:

             @(Html.Kendo().ListView<AdjustmentsListViewModel>()
                                .Name("LineItemsAdjustmentsListView")
                                .TagName("div")
                                .ClientTemplateId("adjustments-template")                                                                   
                                .AutoBind(false)                                
                                .Editable()
                                .Events(events => events
                                    .Remove("LineItemsAdjustmentsListViewRemove")
                                    .DataBound("LineItemsAdjustmentsListViewDataBound")
                                    .Edit("LineItemsAdjustmentsListViewEdit")
                                )
                                .DataSource(dataSource => dataSource                                   
                                    .Model(model =>
                                        {
                                            model.Id(a => a.Id);
                                            model.Field(f => f.AdjustmentId);
                                            model.Field(f => f.AdjustmentType);
                                            model.Field(f => f.Description);
                                            model.Field(f => f.ValidationType);
                                            model.Field(f => f.IncreaseDecrease);
                                            model.Field(f => f.Percent);
                                            model.Field(f => f.Amount);
                                        })
                                    .Create(create => create.Action("CreateAdjustmentForLineItem", "Intake").Data("GetLineItemKeys"))
                                    .Read(read => read.Action("GetAdjustmentsForLineItem", "Intake").Data("GetLineItemKeys"))
                                    .Update(update => update.Action("UpdateAdjustmentForLineItem", "Intake").Data("GetLineItemKeys"))
                                    //Destroy(Delete) handled by Remove event above
                                    .Events(events => events
                                        .Error("LineItemsAdjustmentsListViewError")
                                        .RequestEnd("LineItemsAdjustmentsListViewRequestEnd")                                                                                
                                    )
                                )                                                        
                            )                            
                            @Html.ValidationMessageFor(model => model.LineItems.LineItemsDetail.Adjustments)

My Edit Template appears as: 

@model InvSubModule.WebApp.Areas.Submission.Models.LineItems.AdjustmentsListViewModel

@using System.Globalization;
@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@using InvSubModule.Infrastructure.Localization

<div class="lineItemsAdjustmentView k-widget">
    <div class="lineItemsAdjustmentButtons">
        <div><a class="k-button k-button-icontext k-update-button" href="\\#"><span title='@ResourceManager.GetString("Save")' class="k-icon k-update"></span></a></div>
        <div><a class="k-button k-button-icontext k-cancel-button" href="\\#"><span title='@ResourceManager.GetString("Cancel")' class="k-icon k-cancel"></span></a></div>
    </div>                                
    <dl>
        <dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_AdjustmentType")</label></dt> 
        <dd>
            @(Html.Kendo().DropDownListFor(model => model.AdjustmentType)
                    .Name("AdjustmentType")                                        
                    .OptionLabel(" ")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new SelectList(Model.AdjustmentTypes, "AdjustmentType", "AdjustmentTypeAnswer"))    
                    .Events(e =>
                    {
                        e.Change("AdjustmentTypeChange");
                    })                  
            )
            @Html.ValidationMessageFor(model => model.AdjustmentType)
        </dd>
        <dt><label class="displayLabel">@ResourceManager.GetString("LineItems_Adjustments_Description")</label></dt>
        <dd>
            @Html.TextBoxFor(model => model.Description, "", new { @id = "Description", @class = "k-input k-textbox k-state-disabled", @disabled="disabled" })
            @Html.ValidationMessageFor(model => model.Description)
        </dd>
        <dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_ValidationType")</label></dt>  
        <dd>
            @(Html.Kendo().DropDownListFor(model => model.ValidationType)
                    .Name("ValidationType")                                        
                    .OptionLabel(" ")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new SelectList(Model.ValidationTypes, "ValidationType", "ValidationTypeAnswer"))
                    .Events(e =>
                    {
                        e.Change("ValidationTypeChange");
                    })                      
            )                                
            @Html.ValidationMessageFor(model => model.ValidationType)
        </dd>
        <dt><label class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_IncreaseDecrease")</label></dt>  
        <dd>
            @Html.RadioButtonFor(model => model.IncreaseDecrease, "Increase")
            @ResourceManager.GetString("LineItems_IncreaseDecrease_Increase")
            @Html.RadioButtonFor(model => model.IncreaseDecrease, "Decrease")                        
            @ResourceManager.GetString("LineItems_IncreaseDecrease_Decrease")
            @Html.ValidationMessageFor(model => model.IncreaseDecrease)
        </dd>
        <dt>
            <label id="lblAmount" class="displayLabel">*@ResourceManager.GetString("LineItems_Adjustments_Amount")</label>
            <label id="lblPercent" class="displayLabel" style="display:none;">*@ResourceManager.GetString("LineItems_Adjustments_Percent")</label>
        </dt> 
        <dd>
            @(Html.Kendo().NumericTextBoxFor<decimal>(model => model.Amount)
                        .Name("Amount")
                        .Format("c")
                        .Decimals(4)
                        .Spinners(false)
                        .Min(-9999999.0000m)
                        .Max(9999999.0000m)
                        .Culture(CultureInfo.CurrentCulture.ToString()) 
            )
            @Html.ValidationMessageFor(model => model.Amount)
            @(Html.Kendo().NumericTextBoxFor<decimal>(model => model.Percent)
                        .Name("Percent")                        
                        .Spinners(true)
                        .Decimals(2)
                        .Min(-100.00m)
                        .Max(100.00m)
                        .Step(0.01m)                        
                        .Culture(CultureInfo.CurrentCulture.ToString())
            )
            @Html.ValidationMessageFor(model => model.Percent)
        </dd>
    </dl>    
</div>        

Thanks for your time,
Scott 

[Nikolay Rusev]

Hello Scott,

The reason for this behavior is because the change event of the DropDownList is not triggered when the value is changed from code /see the important block/. 

To overcome this you will have to execute the code for `ValidationTypeChange` function right after you change the value of the DropDownList.

Regards,
Nikolay Rusev
Telerik

[Scott]

Nikolay,
Thanks for your help. Your suggestion pointed me in the right direction. I was able to resolve my issue by calling the "tigger" method on the change event after setting the value of the DropDownList control as you suggested. The line of code that fixed the issue ended up being:

validationType.data("kendoDropDownList").trigger("change");

Thanks for your time,
Scott Dulock