Данные ячейки изменения стиля сетки кендо

У меня очень простая сетка кендо. Я использую функцию шаблона для стилизации данных ячейки. То, что я хочу сделать, это стиль «Редактировать» красным и «Удалить» зеленым цветом.

КОД СЕТКИ

grid = $("#grid").kendoGrid({
        dataSource: {
            data: createRandomUserData(),
            schema: {
                model: {
                    id: 'Id',
                    fields: {
                        FirstName: {
                            type: "string"
                        },
                        Action: {
                            type: "string"
                        }
                    }
                }
            }
        },
        columns: [
            {
                field: "FirstName",
                title: "First Name"
            },
            {
                field: "Action",
                title: "Action",
                template: "<span style='color:red'>#: Action #</span>"
            }
        ]
    }).data("kendoGrid");

Как мне это сделать. Я не могу разделить данные ячейки.

JSFiddle — http://jsfiddle.net/Sbb5Z/1338/


javascript jquery kendo-ui client-side-templating knockout-templating
person Ashwin    schedule 07.04.2014    source источник
comment
Что касается вашего JSFiddle... Как насчет ячеек, содержащих как Edit, так и Delete?   -  person OnaBai    schedule 07.04.2014

Ответы (1)


arrow_upward
3
arrow_downward

Вместо непосредственного применения цвета я предлагаю вам определить несколько классов CSS, которые выполняют стилизацию.

Пример:

.Edit {
    color: red;
}

.Delete {
    color: green;
}

.Edit.Delete {
    color: blue;
}

И указать в шаблоне, какой class использовать.

template: "<span class='#: Action #'>#: Action #</span>"

Это использует red, когда они Edit, green, если Delete и blue, если оба.

И вы изменили JSFiddle здесь: http://jsfiddle.net/OnaBai/298nZ/

РЕДАКТИРОВАНИЕ: если вы хотите разделить/форматировать по словам, вам потребуется немного программирования. В основном вы можете сделать это следующим образом.

// Convert words separated by spaces into an array
var words = data.Action.split(" ");
// Iterate on array elements for emitting the HTML
$.each(words, function(idx, word) {
    // emit HTML using template syntax
    <span class="#: word #">#: word #</span>
});

Все это нужно завернуть в шаблон и получится:

<script type="text/kendo-script" id="template">
    # console.log("data", data, data.Action); #
    # var words = data.Action.split(" "); #
    # $.each(words, function(idx, word) { #
        <span class='#= word #'>#= word #</span>&nbsp;
    # }); #
</script>

И ваше определение сетки:

grid = $("#grid").kendoGrid({
    dataSource: {
        data: createRandomUserData(),
        schema: {
            model: {
                id: 'Id',
                fields: {
                    FirstName: {
                        type: "string"
                    },
                    Action: {
                        type: "string"
                    }
                }
            }
        }
    },
    columns: [
        {
            field: "FirstName",
            title: "First Name"
        },
        {
            field: "Action",
            title: "Action",
            template: $("#template").html()
        }
    ]
}).data("kendoGrid");

JSFiddle изменен здесь: http://jsfiddle.net/298nZ/1/

person OnaBai    schedule 07.04.2014
comment
Большой !! Но я не хочу третьего цвета. Когда присутствуют оба параметра «Редактировать» и «Удалить», я хочу, чтобы «Редактировать» был красным, а «Удалить» — зеленым. - person Ashwin; 08.04.2014
comment
очень здорово !! Спасибо за такой умный ответ. - person Ashwin; 09.04.2014