I'm using a kendo grid with a toolbar with buttons that might be disabled (and using the class k-state-disabled). After updating version of kendo the disabled buttons got less distinctive and - possible worst of all - started to react to hover.

After looking further into this I noticed that the k-secondary class that kendo adds to the grid wrapper is mainly responsible for this behavior as shown in this jsfiddle:
http://jsfiddle.net/DLezC/

What is the reason for using the k-secondary on the grid and why does it affect the disabled buttons. Is this to be considered as a bug? Is there a better way to accomplice the disabled effect?

We have a lot of similar file uploads, but they all upload to different urls with different parameters. And I'm trying to minimise amount of random javascript in our MVC4 application.  So I would like to provide a save url into kendo upload element via data-  parameter in html:

Url will be different in every instance. Sometimes we even have upload in a table and url will differ by a parameter (i.e. productId will be different).

Then in javascript I'm trying this: 
But  this does not seem to work:  $(this).data('saveurl')
Data parameter is not picked up.. or rather $(this) is not what I would like it to be, hence the data attribute is empty, giving blank saveUrl property. 

Andy idea how to access the object on which the kendoUpload is applied? Or some other method of specifying generic url on html element?

Thanks!

p.s. just noticed what I need can be  done with MVVM (http://demos.kendoui.com/web/upload/mvvm.html), but it has too much black magic, and would this work with many (50-100) uploads on the same page? 

I'm using an autocomplete control in a grid, which works well.
When the user types in the field the list is populated from an ajax call, works no problem. 
When one of the list options are selected it updates the grid values in the same row. 

Scenario: If the user clears the autocomplete control by highlighting the text, pressing delete and then tabbing out of the field we need to clear the current grid row values. 
ALSO, when the user selects a valid value we're adding a new row below the current one for the user to use. (I.e. dynamically growing the grid). 

So, we bind to the select event and on a valid selection we add the new row. This works.
We added a change event to the autocomplete control and it fires in the above mentioned scenario, but if the user selects a valid option, then highlights the text, types in something else and then selects an option from the resulting list, the select event fires, but not the change event. 

Why would that be? 

Hi:

I'm using the event binding to bind a viewmodel function to a div in a template, like this:

<ul id="myList"  data-role="listview" data-template="myTemplate" data-bind="source: detail.states"></ul>

 <script type="text/x-kendo-template" id="myTemplate">
        <div data-role="touch" data-bind="events: { tap: open}">
            <div class="response-container">
                <div id="text">
                    ${text}
                 </div>
                <div id="controls" class="hidden" style="height: 100px">
                                <textarea id="response-textarea" maxlength="8000"></textarea>
.
.
.

The "open" function that fires for the tap event changes the class of the inner "controls" div to "unhidden", which just makes a textarea and some other bound buttons visible.  In that function, I want to remove the event binding established in the data-bind of the template.  In other words, I want to be able to interact with the newly exposed widgets without firing the tap event over and over. One of the exposed buttons sets the class back to hidden, and then I would like to re-enable the tap event binding.  This would be trivial, if there wasn't a template involved, but I don't understand how the templating code adds the binding, so removing it is even more obscure.

So the general question is, how do you remove and restore an event binding for a listview item that is added via a template?

Thank you,

Kelly

Hello!

I'm evaluating Kendo for use in an asp.net mvc4 web application using razor based views.
I want implement a dropdown list in a grid cell.
I saw this example
http://demos.kendoui.com/web/grid/editing-custom.html
and I have implemented it successfully but the problem is that I don’t want to create an EditorTemplate for each dropdownlist in my application. I would like to implement kendo dropdown list in a grid cell using .Template:

columns.Bound(m => m.Names).Template(@...); 

Is there some documentation for use kendo dropdown list in a grid cell using .Template?  Can I get an MVC razor example of this?

Thanks

Hello,

I'm trying to implement a functionality that defines total number of  axis divisions (by setting majorUnit dynamically) for Kendo chart. 
In order to implement this functionality, I have to calculate the maximum value of the chart and divide this value by an integer number. This methodology is used for both drawing the chart and clicking on the legend items. There is a function that is called from dataBound function for drawing the chart and from onLegendClick for reading the max value according to the changes of chart.

In order to read the max value I have to read this value from $(chartID).data("kendoChart")._model._plotArea.children[0].charts[0].valueAxisRanges.undefined.max.
My first question question is that if there is a better way to get this maximum value of the chart?
My second question is that I have to use setTimeout function in order to read the value otherwise I'll get error so is there any other way of retrieving this maximum value without using timeout function? 

I've created a sample project that is located at: http://jsfiddle.net/saes/8v8VT/

Thanks in advance,
Sam

I need to know how to set validation on the mulitselect so that if no
items are selected, client and server side validation  kicks in with
appropriate message. I am binding to a custom array list with text/value

I am struggling  to get json value,it's cannot display values
 here my coding 
display.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
    <script type="text/javascript">
        var queryString = new Array();
        $(function () {
            if (queryString.length == 0) {
                if (window.location.search.split('?').length > 1) {
                    var params = window.location.search.split('?')[1].split('&');
                    for (var i = 0; i < params.length; i++) {
                        var key = params[i].split('=')[0];
                        var value = decodeURIComponent(params[i].split('=')[1]);
                        queryString[key] = value;
                    }
                }
            }
            if (queryString["name"] != null && queryString["category"] != null && queryString["value"] != null) {
               var name=queryString["name"];
  var category=queryString["category"];
  var value=queryString["value"];
  alert(name+category+value);
            }
        });

        function createChart() {
            $("#chart").kendoChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "data.json",
                            dataType: "json"
                        }
                    },
                    sort: {
                        field: "date",
                        dir: "asc"
                    }
                },
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series:
                [{
                    data:"value",
                    name: "Name"
                }],
                categoryAxis: {
                    field: "date",
                    labels: {
                        rotation: -90
                    }
                },
                valueAxis: {
                    labels: {
                        format: "{0:N0}"
                    },
                    majorUnit: 5000
                },
                tooltip: {
                    visible: true,
                    format: "{0:N0}"
                },
              
            });
        }

       
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
    <div class="demo-section">
        
        <div class="console"></div>
    </div>
    <style scoped>
        .demo-section {
            width: 700px;
        }
    </style>
</div>
</body>
</html>


//data.json

[
        {
                "month": "jan",
                "date": 1,
                "value": 3000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 3,
                "value": 6000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 6,
                "value": 8000,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 1,
                "value": 3000,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 5,
                "value": 3030,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 8,
                "value": 4000,
                "name": "p2"
        },
        {
                "month": "jan",
                "date": 10,
                "value": 3000,
                "name": "p2"
        },
       {
                "month": "jan",
                "date": 10,
                "value": 3400,
                "name": "p1"
        },
        {
                "month": "jan",
                "date": 11,
                "value": 7000,
                "name": "p1"
        },
]

Hi

Is there a way that i can use 2 flat data sources to stitch together an editable screen that is fully supported for mvvm.

In my example i have countries and cities, city has a fk column to country.  See fiddle example

Of course in the example it incorrectly lists all cities under each country as there is no filtering

Note :- I understand that this could be as a nested field of cities under country, but my remote data source doesnt support this, instead it gives me 2 flat result sets.

So i want to bind a div to the countries as my driving data, then from within each country template i want to bind another to the subset of cities for that country...

Its probably obvious... Any suggestions welcome

Thanks

Chris

Hello,

We're evaluating tools for drawing data that will be dynamically changing (streams of data being pushed to the client).  We tried setting up a page using the Kendo UI Graph. The data renders and updates, but the redraw is noticeably slow and flickers.  We're currently calling the refresh() method on the chart to redraw after we append new values to the data source.  Is there are more efficient method for redrawing streaming data or some parameters that affect the redraw behavior that I haven't been able to locate?  For comparison, the Flot library for jQuery is noticeably smooth when rendering.

Thank you.