Display details of foreign key model below combo box - Gird, Editor Template

[Michael]

I have a combobox with a foreign key lookup, works great...

Business would like to see detail attributes of selected value below combobox:

Example:

Combobox:  <Selected Value>
Display detail description 1:   xxxx
Display detail description 2:
Etc...

Is this possible?

Thanks!

[Petur Subev]

Hello Michael,

Kendo ComboBox allows you to customize the template of its elements. To do so check the following demo:

http://demos.kendoui.com/web/combobox/template.html

I hope this suits your needs.

Kind Regards,
Petur Subev
Telerik

[Michael]

Hello Peter, I have gotten this to work using the code below, one more open item...

I assign the details to a hiddenfor field, for final post back the model, everything looks good on the client but when update button is pressed, value are not
updated?

This ComboBox, is in a EditorTemplate for a KendoGid (edit mode is popup), just to add a little more complexity, the EditorTemplate, has 3 KendoTabStripes
 to display all the information in the model...

A side note:

1. If I make the HiddenFor a EditorFor, the JS updates the field with the correct value, but the update does NOT get posted to the server, unless I actually type a value in the field.

Any thoughts would be great.






function selectpa(e) {

    var SelCCS = $("#CCS").data("kendoComboBox");
    var CC = SelCCSinput.val();
    $.ajax({
        type: "POST",
        cache: 'false',
        url: '@Url.Action("GetSCodePA", "SCController")',
        data: "{ccs:'" + CC + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (data) {

            var msg = $.parseJSON(data);
            $('#PA').val(msg[0].Pa);

        }
    });

    }
<div class="editor-field">
         @(Html.Kendo().ComboBox()
                  .Name("CCS")
                  .DataTextField("CCSName")
                  .DataValueField("CCSID")
          .Filter("contains")
          .MinLength(5)
          .HtmlAttributes(new { style = "width: 250px" })
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetCCS", "CCSController")
                      .Data("CCSAdditionalData");
              })
              .ServerFiltering(true);
          })
          .AutoBind(false)
          .Events(e => e.Change("selectpa"))
   
    )
        </div>
<div class="editor-field">
<span data-bind="text: ProductArea"></span>
   </div>
 @Html.HiddenFor(model => model.ProductArea)

[Petur Subev]

Hello Michael,

If I understand you correctly - when you are using Hidden field to send to the server the value is not sent properly, is that correct? However I am not sure what could go wrong, what exactly is that CCSID value that you append to the data of the Ajax request, I do not see it declared.

Did you try to use hidden input with value binding?

Can you demonstrate your case in a demo project which we can run on our side?

Kind Regards,
Petur Subev
Telerik