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

Populating Additional Fields from DropDown

6 Answers 643 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 27 Jul 2018, 06:34 PM

I'm using MVC and I have a dropdown list that pulls from the rows in the database and when an option from the dropdown list is selected, I want it to populate additional fields on the View that are other columns in the row on the database.

My View with the dropdown and the field I want populated.
 <div class="group">
        @Html.LabelFor(model => model.TransactionTemplateName, htmlAttributes: new { @class = "window-label-left" })
        @(Html.Kendo().DropDownList()
                                                                                .Name("TransactionTemplateName")
                                                                                .DataTextField("TransactionTemplateName")
                                                                                .DataValueField("ID")
                                                                                 .Filter("contains")
                                                                                .Events(e => e.Change("onChange"))
                                                                                .DataSource(source =>
                                                                                {

                                                                                    source.Read(read =>
                                                                                    {
                                                                                        read.Action("GetTransactionTemplate", "Transactions");
                                                                                    });
                                                                                })

                                                                                    .HtmlAttributes(new { style = "width: 50%" })
        )


    </div>
   
    <div class="group">
        @Html.LabelFor(model => model.DESCRIPTION, htmlAttributes: new { @class = "window-label-left" })

        @Html.EditorFor(model => model.DESCRIPTION, new { htmlAttributes = new { @class = "window-text" } })

        @Html.ValidationMessageFor(model => model.DESCRIPTION, "", new { @class = "text-danger" })

    </div>

My method in the Controller to call the dropdown list and hopefully the additional column

public JsonResult GetTransactionTemplate(string text)
        {
            var northwind = new TreasuryEntities();


            var products = northwind.TransactionTemplates.Select(product => new TransactionViewModel
            {
                ID = product.ID,
                TransactionTemplateName = product.TEMPLATE_ID,
                DESCRIPTION = product.DESCRIPTION

            });

            if (!string.IsNullOrEmpty(text))
            {
                products = products.Where(p => p.TransactionTemplateName.Contains(text));
            }

            return Json(products, JsonRequestBehavior.AllowGet);
        }
      

 

I'm having trouble with the script needed to populate the other fields. 

 function onChange() {

        $("#TransactionTemplateName").change(function () {
            $("#ID").val(ID);
            $("#DESCRIPTION").prop('readonly', false);
            $("#DESCRIPTION").val();
            $("#DESCRIPTION").prop('readonly', true);
        })
    }

6 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 31 Jul 2018, 11:25 AM
Hello,

I am not sure what the purpose of attaching a change handler with jQuery is:
function onChange() {
  $("#TransactionTemplateName").change(function () {
    $("#ID").val(ID);
    $("#DESCRIPTION").prop('readonly', false);
    $("#DESCRIPTION").val();
    $("#DESCRIPTION").prop('readonly', true);
  })
}

Since a change event handler is attached in the DropDownList's configuration:
.Events(e => e.Change("onChange"))

You can execute any custom logic directly within that handler without attaching an additional one with jQuery:
function onChange(e) {
  $("#ID").val(ID);
  $("#DESCRIPTION").prop('readonly', false);
  $("#DESCRIPTION").val();
  $("#DESCRIPTION").prop('readonly', true);
}


Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Tyler
Top achievements
Rank 1
answered on 31 Jul 2018, 01:22 PM
I had tried that and it still didn't populate the field...it's not throwing any errors as well so I'm not sure. 
0
Tyler
Top achievements
Rank 1
answered on 31 Jul 2018, 01:47 PM
I'm getting an error 'Uncaught ReferenceError onChange is not defined'
0
Tyler
Top achievements
Rank 1
answered on 31 Jul 2018, 04:07 PM

This issue has be fixed by using an ajax call to populate the fields...

 

Thank You

0
Ivan Danchev
Telerik team
answered on 02 Aug 2018, 10:32 AM
Hello Tyler,

I am glad you were able to populate the respective fields. The exception you are getting ("onChange is not defined") is likely to be caused by the handler being declared after the DropDownList's declaration. If the DropDownList is used in a partial view the handler must be declared before it:
<script>
function onChange() {
  $("#TransactionTemplateName").change(function () {
    $("#ID").val(ID);
    $("#DESCRIPTION").prop('readonly', false);
    $("#DESCRIPTION").val();
    $("#DESCRIPTION").prop('readonly', true);
  })
}
</script>
 
@(Html.Kendo().DropDownList()
     //...
 )



Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Tyler
Top achievements
Rank 1
answered on 10 Sep 2018, 07:48 PM

Just for reference, this is the ajax call that was used to populate the fields. 

<script>
    function onChange(e) {
        var templateId = $('#TEMPLATE_ID').data("kendoDropDownList").value();
        $.ajax({
            type: "POST",
            url: "@Url.Action("GetTransactionTemplate", "Transactions")",
            contentType: "application/json",
            data: JSON.stringify({ id: templateId }),
            success: function (resp) {
                if (resp && resp.success) {
                    if (resp.data) {
                        $("#COMPANY_CODE").val(resp.data.COMPANY_CODE_NAME);
                        $('#DESCRIPTION').val(resp.data.DESCRIPTION);
                        $('#TRANSACTION_TYPE_ID').val(resp.data.TRANSACTION_TYPE_NAME);
                        $('#TRANSFER_METHOD').val(resp.data.TRANSFER_METHOD_NAME);
                        $('#RD_BANK_CODE').val(resp.data.RD_BANK_NAME);
                        $('#RD_ACCOUNT_CODE').val(resp.data.ACCOUNT_CODE_NAME);
                        $('#WIRE_ADDENDA').val(resp.data.WIRE_ADDENDA);
                        $('#VENDOR_NUMBER').val(resp.data.VENDOR_NUMBER);
                        $('#RECEIPT_DISBURSEMENT').val(resp.data.RECEIPT_DISBURSEMENT);   
                      
                    }
                  
                } else {
                    alert(resp.message);
                }
              
            }
        });
        
       
    }
 

 
</script>

 

The Controller Method in which I used repositories to get the data and a mapper profile to map the data from the other table.

 public JsonResult GetTransactionTemplate(int id)
        {
                var template = Mapper.Map<TransactionTemplateViewModel>(new TransactionTemplateRepository().GetById(id));
                return Json(new { success = true, data = template }, JsonRequestBehavior.AllowGet);
        }

 

 

 

 

Tags
DropDownList
Asked by
Tyler
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Tyler
Top achievements
Rank 1
Share this question
or