在kendo模板中动态地向div中添加一个类名

Question

I am trying to add a class name dynamically for a div, it is called 'source'. 我正在尝试为div动态添加一个类名，它被称为“源”。 It is working in chrome but not working in internet explorer or firefox. 它可以在Chrome浏览器中使用，但不能在Internet Explorer或Firefox中使用。 I have tried '#= source#', yet it does not work. 我已经尝试过“＃= source＃”，但是它不起作用。

  <script type="text/x-kendo-template" id="singleEntryTemplate">
       <div class="logEntryRow #: source #">
           <span class="entryTime">
               #: entryTime #
           </span>
       </div>
</script>

Answer 1

Please try with the below code snippet. 请尝试使用以下代码段。 Please select "Chai" and "Chang" option from dropdown to check applied class effect. 请从下拉菜单中选择“ Chai”和“ Chang”选项，以检查应用的类效果。 (becuase temporary I have created only 2 css class) （因为临时我只创建了2个CSS类）

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-header">
            <input id="products" style="width: 400px;" />
        </div>
        <div id="product-preview" class="demo-section k-header"></div>
    </div>
    <script id="product-template" type="text/x-kendo-template">
    <h4 class="logEntryRow #: ProductName #">ProductName: #: ProductName #</h4>
    </script>
    <script>
        var template = kendo.template($("#product-template").html());

        function preview() {
            var dropdown = $("#products").data("kendoDropDownList");

            var product = dropdown.dataSource.get(dropdown.value());

            var productPreviewHtml = template(product);

            $("#product-preview").html(productPreviewHtml);
        }


        $("#products").kendoDropDownList({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/products",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    model: {
                        id: "ProductID"
                    }
                }
            },
            dataBound: preview,
            change: preview
        });
    </script>
    <style>
        .Chai {
            color: red;
        }

        .Chang {
            color: blue;
        }

        .logEntryRow {
            text-decoration: underline;
        }
    </style>
</body>
</html>

Let me know if any concern. 让我知道是否有任何问题。

在kendo模板中动态地向div中添加一个类名

问题描述

1 个解决方案

解决方案1
0 2014-12-18 02:59:00

在kendo模板中动态地向div中添加一个类名

问题描述

1 个解决方案

解决方案1 0 2014-12-18 02:59:00

解决方案1
0 2014-12-18 02:59:00