This is a migrated thread and some comments may be shown as answers.

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

2 Answers 99 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 05 Mar 2014, 10:49 PM
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 


















2 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 10 Mar 2014, 08:00 AM
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

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

0
Scott
Top achievements
Rank 1
answered on 14 Mar 2014, 07:12 PM
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
Tags
ListView
Asked by
Scott
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Scott
Top achievements
Rank 1
Share this question
or