For Kendo ComboBoxes (and dropDown lists) is it possible to programmatically turn on/display (and turn off) the little "loading" icon that shows in the open icon area to the right (temporarily replacing the down arrow) as it shows when doing a server data fetch.  And on a related subject: Is it possible to replace the standard down arrow  with a custom graphic, perhaps via over-riding the style?

Im getting the following json response from the server.

How do I set the selected item based on "IsCurrentFlag" where "IsCurrentFlag  == true" ?

Below is my code to Create DataSource and Set the DropDownList.

using standard jquery, i can configure the toolbar buttons this way:


but how do i do it when using angularjs and the code for initializing the editor is just this:

I am trying to bind the result of my wcf service to a bullet chart. This is my code. Can anyone please tell me, what am I doing wrong here.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/bullet-charts/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-content">
        <table class="history">
            <tr>
                <td class="item">Chart1</td>
                <td class="chart"><div id="chart-mmHg" style="width: 485px"></div></td>
            </tr>
          
        </table>
     
    </div>
   
    <script>
        
        function createChart() {
            $("#chart-mmHg").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: {
                    transport: {
                        read: {
                            url: "http://localhost:29067/Service1.svc/Mymethodname",
                            dataType: "json"
                        }
                    }
                },
                series: [{
                    type: "bullet",
                    currentField: "current",
                    targetField: "target",
                    target: {
                        color: "#aaaaaa"
                    }
                }],
                chartArea: {
                    margin: {
                        left: 0
                    }
                },
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    majorTicks: {
                        visible: false
                    }
                },
                valueAxis: [{
                    plotBands: [{
                        from: 0, to: 17500, color: "#ccc1df", opacity: .6
                    }, {
                        from: 17500, to: 18000, color: "#1rf036", opacity: .3
                    }],
                    majorGridLines: {
                        visible: false
                    },
                    min: 0,
                    max: 18000,
                    minorTicks: {
                        visible: true
                    }
                }],
                tooltip: {
                    visible: true,
                    template: "Maximum: #= value.target # <br /> Average: #= value.current #"
                }
            });
           
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
    <style scoped>
        .history {
            border-collapse: collapse;
            width: 60%;
            margin: 0 auto;
        }
        
        .history .k-chart {
            height: 65px;            
        }

        .history td.item {
            line-height: 65px;
            width: 20px;
            text-align: right;
            padding-bottom: 22px;
        }
    </style>
</div>
</body>
</html>

Thanks.

Hello,

I have created an application using kendo mobile. I want to use a bullet chart in my application. But when I try to create a chart, it gives me an error "Uncaught TypeError: Object [object Object] has no method 'kendoChart'". I do not understand why I am getting this error.

Please help me solve it.

Thanks,
Nirav

In my chart's legend, it lists each series' name with a square icon that is the same color as my line to the left of it. I need this icon to remove square icon  one of my series. Is this possible?

thanks

I'm have a my input text: 

    <input type="text" id="txtSearch" class="form-control" placeholder="Buscar" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="Search()">
            <i class="glyphicon glyphicon-search"></i>
        </button>
    </span>

And my javascript

    function Search() {
        $.ajax({
            type: "POST",
            url: '@Url.Content("~/groups/Search")',
            data: JSON.stringify({ Search: $('#txtSearch').val() }),
            contentType: "application/json",
            dataType: "JSON",
            success: function (result) {
                $('#grid').data("kendoGrid").dataSource.data(JSON.parse(result));
            }
        });
    }

But, return error :/

Sugest?

How do you dynamically load a view and layout?  I can get the view to work by itself, but not a view with layout.  I created the simple example below to illustrate the issue.  The only way I can make this work is to place the layout in the index.html file, which means it's not dynamically loaded at runtime.

// insert view
$('body').append("<div data-role='view' id='view2' data-layout='main'>This is view2</div>")

// insert layout
$('body').append("<div data-role='layout' data-id='main'><header data-role='header'>Header</header><!-- application views will be rendered here --><footer data-role='footer'>Footer</footer></div>");

// display view
app.navigate('#view2');

Hi,

When i have opened the delete popup of event and after it when i am clicking the X-button as per highlighted area in attached screen then pop is not getting closed.

Please help me.

If I modify the scope from a callback (data-k-dragend="onDragEnd") then it seems I have to manually call $scope.$apply.  I had assumed that KendoUI with the AngularJS integration would automatically wrap this for me.  Can you confirm if I'm doing something wrong or if this is planned to be fixed in a future release?

Thanks!

  Nick