MVC Migration : Setting initial value to combobox

[Achilles]

Hi,

I have a Telerik MVC Combobox which I'm trying to migrate it to Kendo. The original code looked like :

@(Html.Telerik().ComboBox().Name("CbPlants")
   .BindTo(new SelectList(Model.PowerPlants, "Key", "Value", Model.SelectedPowerPlant))
   .Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.Contains))
   .ClientEvents(c => c.OnChange("OnCbPlantsChange"))
   .AutoFill(true))

         
After migration as per the instructions, it looks like :
           

@(Html.Kendo().ComboBox().Name("CbPlants")
      .BindTo(new SelectList(Model.PowerPlants, "Key", "Value", Model.SelectedPowerPlant))
      .DataTextField("Text")
      .DataValueField("Value")
      .Filter(FilterType.Contains)
      .Events(c => c.Change("OnCbPlantsChange"))
      .Suggest(true))

The combobox is bound to a list of powerplants, whose key is a guid. I pass both the list as well as the selected item in the binding.              
It works well except for the fact that, when the page is refreshed, I see the selected item's guid for sometime, before the correct value is displayed. Please have a look at the attached pic.

Maybe it's because of the time taken for the combobox to load. Can I suppress displaying the key till the list loads ?

I tried setting the selected item in the DataBound event, instead of the razor. That seems to work. But unfortunately, the filtering & auto fill feature doesn't then. Is there any other way to achieve what I could do with the old MVC extensions ?

Regards

Achilles

[Petur Subev]

Hello Raja,

You need to use the Value method of the ComboBox for that purpose.

In your case it should be:

.Value(Model.SelectedPowerPlant.Value)

Also I suspected that you have switched the two parameters in the SelectList constructor (highlighted in yellow).

The following example works properly on my side.

@(Html.Kendo().ComboBox().Name("CbPlants")
      .BindTo(new SelectList(new[] { new { Key = "K1", Value = "V1" }, new { Key = "K2", Value = "V2" } }, "Value", "Key", new { Key = "K2", Value = "V2" }))
      .DataTextField("Text")
      .DataValueField("Value")
      .Value("V2")
      .Filter(FilterType.Contains)
      //.Events(c => c.Change("OnCbPlantsChange"))
      .Suggest(true))

Kind Regards,
Petur Subev
Telerik

[Achilles]

Hello Petur ,

If I set the Value method with a static string, it works for me. But unfortunately I don't know the selected text value, I only know the key from a session variable.

Also I think there is a bit of confusion over the way how my variables are named . For me

Model.PowerPlants   -> IDictionary<Guid, string>
Model.SelectedPowerPlant -> Guid

So what I mean by "Key", "Value" is actually "Value", "Text" in regular Kendo defination. Please, correct me if I'm wrong.

That's why if I use "Value", "Key" instead of "Key", "Value" , I get a list of Guids in the dropdown list.

But if I use

.DataTextField("Value")
.DataValueField("Key")

instead of 

.DataTextField("Text")
.DataValueField("Value")

along with your Key/Value switch, I see the proper text again.

What is left is to set the value method . In my case my Value is a Guid . So I cannot do a

Value(Model.SelectedPowerPlant).

   
as the method expects a string. Is a SelectList of <Guid, string> supported ?

Regards

Raja

[Petur Subev]

Hello Raja,

It is okey to use GUID. Here is what I can suggest you, it works on my side:

@(Html.Kendo().ComboBox().Name("CbPlants")
      .BindTo(new SelectList(new[] { new { Key = "K1", Value = "V1" }, new { Key = "K2", Value = "V2" } }, "Value", "Key", new { Key = "K2", Value = "V2" }))
      .DataTextField("Text")
      .DataValueField("Value")
      .Filter(FilterType.Contains)
      //.Events(c => c.Change("OnCbPlantsChange"))
      .Suggest(true))

<script type="text/javascript">
    $(function () {
        $('#CbPlants').data().kendoComboBox.text('K2');
        alert($('#CbPlants').data().kendoComboBox.value());
    })
</script>

In your case you should be able to use the Model.SelectedPowerPlant like this:

$('#CbPlants').data().kendoComboBox.text('@(Model.SelectedPowerPlant)');

Let me know your findings.

Kind Regards,
Petur Subev
Telerik

[Achilles]

Hello again Petur,

I tried your suggestion except that I didn't set the initial value to the equivalent of
new { Key = "K2", Value = "V2" }
as I'd earlier mentioned that I store only the keys in a session variable.

Anyway, what I noticed was that I see the selected key-guid in the alert box as well as in the combo-box, while the dropdownlist is of the correct text-value type. Also I notice that if I interchange the "Key" & "Value" text in the SelectList constructor, I actually see the correct selected text in the alertbox. But predictabley the dropdownlist has changed to a list of guids. (Please have a look at attached picture)

I have written a simple app to simulate this behaviour. The design is inline with my actual app
In this app I use a static class to simulate the session variable, Please note I  store only the selected "Key", and not the selected object ("Key" + "Value"). You can change the selections in the comboboxes to initiate a refresh.
Unfortunately, I could not reproduce the original problem in this app. (Probably because I couldn't simulate the load+latency created my Webservices, Authentication, AppFabric cache etc)
If you can fix the problem in this app before we call the javascript, maybe I can put it in my actual app & try again.

Thanks & Regards

Achilles

[Petur Subev]

Hello again,

I am afraid I do not understand your question anymore. Could you please clarify it, and point me what exactly should I look for inside the project that you shared?

<script type="text/javascript">
    $(function () {
        $("#CbPlants").data().kendoComboBox.value('@Model.PowerplantId');
        alert($("#CbPlants").data().kendoComboBox.value());
    })
</script>

In the snippet above I changed the highlighted in yellow, because from what I saw the third item has value of such GIUD not text. 

Please give concrete steps to follow when I run your project and tell me what should be the expected behavior, so I can advise you further.

Kind Regards,
Petur Subev
Telerik

[Achilles]

Hello again Petur,

I have reworked the project a little incorporating your suggested changes.
It's very tough to reproduce the problem in the sample project. It seems that this problem is seen when the reloaded page has a lot of content from the services in the backend. Once the page is completely loaded, we have the proper text. And in this project I'm not using any services.

But I can try to show you anyway. Please use the project attached to this post.

1. Run the project. The GUI opens with a default user in the customer combo & an alert box pops up.
2. Have a look at the half formed combo box below the debug button.
3. Dismiss the alertbox and change the selected user. Wait for a moment while the page reloads.
4. You see it again.
5. Now comment out the alert (Index.chtml : 112 ) & retry. Everything seems to be working.
6. Put a breakpoint one line above the commented alertbox. And you see it again.

So it is there...
But if the page loads fast enough you don't see it. In my actual app, this in not the case. Also in my app, I don't use the same model for 2 comboboxes ( If you suspect that to be the cause :), as in this sample.

If this doesn't help you understand the issue, I can create a temporary a/c on our staging system and send you the credentials privately if you want to see the actual problem.
Or I can create another application using some authenticated services, but then I have to send you an extra line of code which contains the login credentials

Regards

Achilles

[Petur Subev]

Hello,

 Thank you for clarifying, I think I understand the question now - the problem is that you see the GUID inside of the combobox for short period of time before the widget is initialized and bound to the corresponding item.

If so I can suggest you to set the value manually after the combobox is bound.

To do so you need to use the dataBound event + value method and you will also need to remove that last parameter when creating new SelectList - you do not need selected item or it will still behave the same.

e.g.

@(Html.Kendo().ComboBox().Name("CbTest")
      .BindTo(new SelectList(Model.PowerPlants, "Key", "Value"))
      .DataTextField("Text")
      .DataValueField("Value")
      .Filter(FilterType.Contains) .Events(ev => {
          ev.DataBound("dataBound");
      })
      .Events(ev => {
          ev.DataBound("dataBound");
      })
      .HtmlAttributes(new {style = "z-index: 20; width: 250px;"})
      .Suggest(true)
      )

function dataBound() {
    $("#CbTest").data().kendoComboBox.value('@Model.PowerplantId');
}

I hope this is what you are searching for. 

For reference I attached a modified version of your project. Regards,
Petur Subev
Telerik

[Achilles]

Hello Petur,

Thanks for your patience.
This does certainly suppress the appearance to the selected item guid before the list is bound.
But unfortunately it has some side effects.

I had tried the dataBound event + value method, much earlier on. But as I'd mentioned in my very original post, the filtering & auto-fill feature then, doesn't work.
In the same sample that you had sent me, try changing the selected item of the combobox, by typing into the input box. Try

1. Backspace a few letters to "User2: PV Plant 2" - It re-fills up automatically
2. Adding a letter to currently "User2: PV Plant 2" - A guid appears

Warm Regards

Achilles

[Petur Subev]

Hello Raja,

Thank you for getting back to me, I missed to note that behavior. Basically what I can suggest you then is to unsubscribe to the event just  after its first execution.

e.g.

function dataBound() {
    $("#CbTest").data().kendoComboBox.value('@Model.PowerplantId');
    this.unbind('dataBound');
}

I hope this resolves the case.

Kind Regards,
Petur Subev
Telerik

[Achilles]

Hello again Petur,
This solution does indeed seem to solve my problem
Thanks a lot for your support

Regards

Achilles