CODEWITHSUNDEEP
javascriptajaxcomboboxkendo-ui
CeoDeveloper
CeoDeveloper

Reputation: 27

KendoUI ComboBox selecting Option based on Datasource

I need help with this code.

The code will get a JSON response from a PHP script and will create the ComboBox based on its content.

This works... My problem is that I need to define the option that is selected by default, in this case, because the form is a Edit Form.

Javascript:

    dsource = new kendo.data.DataSource({
        transport: {
            read: {
                url: url,
                dataType: "json"
            }
        },
        schema: {
            model: {
                fields: {
                    value: {type: "number"},
                    text: {type: "string"}
                }
            }
        }
    });

    var combobox = $(obj).kendoComboBox({
        placeholder: "Selecione",
        dataTextField: "text",
        dataValueField: "value",
        filter: "contains",
        minLength: 3,
        dataSource: dsource
    });

The json that is returned from PHP looks like this:

[{"value":3,"text":"Blue"},{"value":4,"text":"Red"},{"value":5,"text":"Pink"}]

What I need it to do is select a option based on this JSON, like:

[{"value":3,"text":"Blue", "selected":true},{"value":4,"text":"Red"},{"value":5,"text":"Pink"}]

In this case the Blue option would be selected by default.

I tried this by all means I can think of...

Upvotes: 0

Views: 735

Answers (2)

CeoDeveloper
CeoDeveloper

Reputation: 27

Well.... After trying all possible ways, I had to change the entire logic of my code.

First I used ajax to get the ComboBox json data from php. Just upon completion I transformed the form input into a KendoUi ComboBox.

Well, let the code speak for itself, THIS WORKS:

    $.ajax({
        url: url,
        dataType: "json",
        type: "GET"
    }).done(function (data) {  //Replace SUCCESS

        console.log(obj);

        selected = null;

        $.each(data, function (key, value) {
            console.log(key + ": " + value.text);
            if( value.selected === "selected" ){
                window.selected = key;
            }               
        });

        var dataSource = new kendo.data.DataSource({
            data: data
        });           

        var combobox = $(obj).kendoComboBox({
            placeholder: "Select",
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            index: selected
        });

    }).fail(function (data) {  //Replace ERROr

        console.log('Error', data);

    });

Upvotes: 1

Vinit Patel
Vinit Patel

Reputation: 2474

You can also try this..

//[{"value":3,"text":"Blue", "selected":true},{"value":4,"text":"Red"},{"value":5,"text":"Pink"}]

function getSelectedTagValue() {
    var i = null;
    for (i = 0; dsource.length > i; i += 1) {
        if (dsource[i].selected == 'true') {
            return dsource[i].text;
        }
    }
    return null;
};

$("#kendoitems").kendoComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: data
});

var combobox = $(obj).kendoComboBox({
        placeholder: "Selecione",
        dataTextField: "text",
        dataValueField: "value",
        filter: "contains",
        minLength: 3,
        dataSource: dsource
    });

combobox.value(getSelectedTagValue());

Hope this helps,

Regards,

Upvotes: 1

Related Questions