CSS / стиль ломается, когда запускается kendodropdownlist onChange - PullRequest
Новая
       35

CSS / стиль ломается, когда запускается kendodropdownlist onChange

0 голосов
/ 17 сентября 2018

хорошо, у меня есть кендогрид, который выглядит так

enter image description here

проблема возникает, когда я включаю, а затем выбираю тип джекпота, он ломает активированный, который является стилизованным флажком, и я понятия не имею, почему он это делает?

когда я выбрал что-то, оно выглядит следующим образом

enter image description here

как вы видите, он превратился в обычные чекбоксы, а также почему-то снял флажок с выбранным типом джекпота.

Любой может понять, почему или если есть лучший способ для меня отреагировать на выбранный тип джекпота. Вот код. 

$("#configSettingsGrid").kendoGrid({

    dataSource: [
        {
            index: 1,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
        {
            index: 2,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
        {
            index: 3,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
        {
            index: 4,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
    ],
    pageable: false,
    scrollable: true,
    navigatable: true,
    selectable: false,
    columns: [
        {
            title: "@Resources.GetString("common.enabled")",
            template: addStyledCheckbox,
            width: "66px",
            attributes: {
                "class": "gridCellCheckbox"
            }
        },
        { title: "@Resources.GetString("common.index")", template: "<div class='gridposition'> #= index #</div>", width: "40px"},
        {
            field: "jackpotType", title: "@Resources.GetString("common.jackpottype")", template: addJackpotTypes 
             , width: "150px"
        }
    ],
    dataBound: function (e) {
        var grid = e.sender;
        var items = e.sender.items();
        items.each(function (index) {
            var dataItem = grid.dataItem(this);
            var ddt = $(this).find('.dropDownTemplate');
            this.className += " disabledrow";

            $(ddt).kendoDropDownList({
                value: dataItem.value,
                dataSource: e.sender.dataSource.options.data[index].jackpotType,
                dataTextField: "name",
                dataValueField: "name",
                optionLabel: "Select Jackpot Type",
                change: onDDLChange
            });
        });
    }
});

function addStyledCheckbox() {

    var checkbox = '<div class="toggle_wrapper"><input type="checkbox" class="gridCheckbox" data-on="&nbsp" data-off="&nbsp" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="mini"><div/>'

    return checkbox
}
function addJackpotTypes(dataItem) {

    var input = "<input id='jackpotTypeDropdown' class='dropDownTemplate' />"

    return input
};

function onDDLChange(e) {
    var element = e.sender.element;
    var row = element.closest("tr");
    var grid = $("#configSettingsGrid").data("kendoGrid");
    var dataItem = grid.dataItem(row);

    dataItem.set("value", e.sender.value());


};
...