adding a class name to a div in a kendo template dynamically

Question

adding a class name to a div in a kendo template dynamically

3.2k Views Asked by maxspan At 10 April 2025 at 06:27

I am trying to add a class name dynamically for a div, it is called 'source'. It is working in chrome but not working in internet explorer or firefox. I have tried '#= source#', yet it does not work.

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

Original Q&A

There are 1 best solutions below

**Jayesh Goyani** · Answer 1

Please try with the below code snippet. Please select "Chai" and "Chang" option from dropdown to check applied class effect. (becuase temporary I have created only 2 css class)

<!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.

adding a class name to a div in a kendo template dynamically

There are 1 best solutions below

Related Questions in C#

Related Questions in ASP.NET-MVC

Related Questions in KENDO-UI

Related Questions in KENDO-ASP.NET-MVC

Related Questions in KENDO-TEMPLATE

Trending Questions

Popular # Hahtags

Popular Questions