javascript - How to get databound function work with Kendo grid - Stack Overflow

admin管理员组

文章数量:1313121

I am trying to customize the style of grid cells depending on conditions met by cell values. In the kendo documentation I have found an example how to do this. The example works with extending the grid with a databound function. I have adjusted the code on the Dojo page to my needs and there it works perfectly. But when I try to extend my grid with a databound function I fail to find the right syntax/postion to insert the function.

This is my databound function:

                dataBound: function(e) {
                // get the index of the cell
                var columns = e.sender.columns;
                var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Frachtkonsens" + "]").index();

                // iterate the table rows and apply custom row and cell styling
                var rows = e.sender.tbody.children();
                for (var j = 0; j < rows.length; j++) {
                    var row = $(rows[j]);
                    var dataItem = e.sender.dataItem(row);

                    var value = dataItem.get("Frachtkonsens");
                    var max = dataItem.get("Mengenschwelle");
                    //var min = dataItem.get("Min");


                    var cell = row.children().eq(columnIndex);
                    cell.addClass(checkValue(value, max));
                }
            }

This is the javascript:

<script type="text/javascript">

    function checkvalue(value, max) {
        if (max > 0) {
            if (value > max){
                return "critical";
            }
        }
    }

    $(function() {

        var konsenseGrid = $("#parameters-grid").kendoGrid({
            dataSource: someData,
            scrollable: true,
            sortable: true,
            pageable: { refresh: true },
            selectable: "row",
            resizable: true,
            height: 430,
            editable: true,
            toolbar: [{ text: "", template: kendo.template($("#add-parameter-template").html()) }, { text: "", template: kendo.template($("#update-parameter-template").html()) }],
            columns: [
                {
                    field: "Parameter",
                    title: "Parameter",
                    width: "160px"
                },
                {
                    field: "Max",
                    title: "Max",
                    width: "55px",
                    format: "{0:n}",
                    editor: numberEditor

                },
                {
                    field: "Frachtkonsens",
                    title: "Frachtkonsens",
                    width: "70px",
                    format: "{0:n1}",
                    editor: numberEditor
                },
                {
                    mand:
                    ["edit", "destroy"],
                    title: "&nbsp;",
                    width: "200px"
                }

        ],
        });

    });

And this is the style I want to apply to cells that meet the conditions:

    .critical {
    font-weight: bold;
    color: #f00;
}

If someone could help me please! Regards Manu

I am trying to customize the style of grid cells depending on conditions met by cell values. In the kendo documentation I have found an example how to do this. The example works with extending the grid with a databound function. I have adjusted the code on the Dojo page to my needs and there it works perfectly. But when I try to extend my grid with a databound function I fail to find the right syntax/postion to insert the function.

This is my databound function:

                dataBound: function(e) {
                // get the index of the cell
                var columns = e.sender.columns;
                var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Frachtkonsens" + "]").index();

                // iterate the table rows and apply custom row and cell styling
                var rows = e.sender.tbody.children();
                for (var j = 0; j < rows.length; j++) {
                    var row = $(rows[j]);
                    var dataItem = e.sender.dataItem(row);

                    var value = dataItem.get("Frachtkonsens");
                    var max = dataItem.get("Mengenschwelle");
                    //var min = dataItem.get("Min");


                    var cell = row.children().eq(columnIndex);
                    cell.addClass(checkValue(value, max));
                }
            }

This is the javascript:

<script type="text/javascript">

    function checkvalue(value, max) {
        if (max > 0) {
            if (value > max){
                return "critical";
            }
        }
    }

    $(function() {

        var konsenseGrid = $("#parameters-grid").kendoGrid({
            dataSource: someData,
            scrollable: true,
            sortable: true,
            pageable: { refresh: true },
            selectable: "row",
            resizable: true,
            height: 430,
            editable: true,
            toolbar: [{ text: "", template: kendo.template($("#add-parameter-template").html()) }, { text: "", template: kendo.template($("#update-parameter-template").html()) }],
            columns: [
                {
                    field: "Parameter",
                    title: "Parameter",
                    width: "160px"
                },
                {
                    field: "Max",
                    title: "Max",
                    width: "55px",
                    format: "{0:n}",
                    editor: numberEditor

                },
                {
                    field: "Frachtkonsens",
                    title: "Frachtkonsens",
                    width: "70px",
                    format: "{0:n1}",
                    editor: numberEditor
                },
                {
                    mand:
                    ["edit", "destroy"],
                    title: "&nbsp;",
                    width: "200px"
                }

        ],
        });

    });

And this is the style I want to apply to cells that meet the conditions:

    .critical {
    font-weight: bold;
    color: #f00;
}

If someone could help me please! Regards Manu

• javascript
• css
• telerik-grid

Share Improve this question Follow asked Jan 18, 2017 at 11:00 ManuManu 1,47066 gold badges2222 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You should put dataBound along with the top-level configuration properties, and provide the respective handler function, e.g.:

 $(function() {
    var konsenseGrid = $("#parameters-grid").kendoGrid({
        dataSource: {
          data: [{'Parameter': 'a', Max: 5, Frachtkonsens: 10, Mengenschwelle: 5}, {'Parameter': 'b', Max: 1, Frachtkonsens: 1, Mengenschwelle: 3}]
        },
        dataBound: function(e) {
            // get the index of the cell
            var columns = e.sender.columns;
            var columnIndex = this.wrapper.find(".k-grid-header [data-field='Frachtkonsens']").index();

            // iterate the table rows and apply custom row and cell styling
            var rows = e.sender.tbody.children();
            for (var j = 0; j < rows.length; j++) {
                var row = $(rows[j]);
                var dataItem = e.sender.dataItem(row);

                var value = dataItem.get("Frachtkonsens");
                var max = dataItem.get("Mengenschwelle");
                //var min = dataItem.get("Min");


                var cell = row.children().eq(columnIndex);
                cell.addClass(checkValue(value, max));
            }
        },
        scrollable: true,
...

Example

本文标签： javascriptHow to get databound function work with Kendo gridStack Overflow