Populating Additional Fields from DropDown

7 posts, 0 answers
  1. Tyler
    Tyler avatar
    9 posts
    Member since:
    May 2018

    Posted 27 Jul Link to this post

    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);
            })
        }

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1599 posts

    Posted 31 Jul Link to this post

    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.
  3. Tyler
    Tyler avatar
    9 posts
    Member since:
    May 2018

    Posted 31 Jul in reply to Ivan Danchev Link to this post

    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. 
  4. Tyler
    Tyler avatar
    9 posts
    Member since:
    May 2018

    Posted 31 Jul in reply to Tyler Link to this post

    I'm getting an error 'Uncaught ReferenceError onChange is not defined'
  5. Tyler
    Tyler avatar
    9 posts
    Member since:
    May 2018

    Posted 31 Jul in reply to Tyler Link to this post

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

     

    Thank You

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1599 posts

    Posted 02 Aug Link to this post

    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.
  7. Tyler
    Tyler avatar
    9 posts
    Member since:
    May 2018

    Posted 10 Sep Link to this post

    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);
            }

     

     

     

     

Back to Top