I have a simple view with an AutoComplete, a MultiSelect, and an IntegerTextBox side-by-side with no other styling.

The AutoComplete and IntegerTextBox are the same width as each other and have the same font for the placeholder. The MultiSelect is radically different - it fills the width of the page and its placeholder has Arial font, which differs from the other two.

What's going on?

The web page, http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBuilder, shows an example of ClientAltRowTemplate.  Is this out of date?  When I try it, I get CS1061: Kendo.Mvc.UI.Fluent.GridBuilder<System.Data.DataRowView>' does not contain a definition for ClientAltRowTemplate'.  I am trying to set up alternate rows in a Kendo Grid using Razor syntax.

I have a kendo combobox with an OnSelect method defined on the page, but would like to move it to the jQuery ready function. How do I do that?
Right now, the code looks like this:
I want to place it within : The ready function is in an external JavaScript file that gets loaded at the bottom of the page.

Hi,

Could you please anyone advise me how can i bind model class data annotation attributes using Kendo MVVM?

I have defined the Employee model class as below,

  public class EmployeeModel
    {
        public int EmployeeId { get; set; }

        [Display(Name = "Employee Name")]
        [DataType(DataType.Text)]
        [Required(ErrorMessage = "The employee name should not be empty")]
        [StringLength(50, ErrorMessage = "The employee name should be less than 50 characters length")]
        public string Name { get; set; }

        public bool IsActive { get; set; }
    }

and i have bound this model class into view page using observable object binding. I can use HTML5 attributes for validation and validate using the below Kendo validator code, EmployeeDetails - observable object.

                               <input type="hidden" id="employeeId" data-bind="value : EmployeeDetails.EmployeeId"/>
                                Name<br />
                                <input data-bind="value: EmployeeDetails.Name" type="text" id="Name" name="Name" class="k-textbox" 
                                    placeholder="Employee name" required validationMessage="Please enter employee {0}" />
                                <div></div>
                                <span class="k-invalid-msg" data-for="Name"></span>
                             
                                <input type="checkbox" data-bind="checked: EmployeeDetails.IsActive" id="Status" />


           var validator = $("#EmployeeDetailsView").kendoValidator().data("kendoValidator");

                if (!validator.validate()) {
                    $("#Name").focus();
                    return false;
                }

Now, how can i achieve the same validation by binding the  model attributes directly to input fields with HTML5 validation attributes mentioned as above?
At the same time i have to use observable object binding for elements.

Cheers,
Mahesh

Hi,

While using Kendo UI Upload control in IE9 the UI is little bit distorted when status message is displayed. But, it's fine in IE10, FF & Chrome. After observing in IE developer tool, I found the following difference in the rendered HTML. Please refer the attached image -

IE10 the status-message is wrapped inside a div with class k-dropzone. But, in IE9 there is no wrapper for that. What could be the solution for this?
Stackoverflow Link - http://stackoverflow.com/questions/18699119/kendoui-upload-status-message-issue-in-ie9

Thanks

Hello,

I'm using Kendo UI ver. Q1 2013 and jQuery 1.9.1.
I have some difficulties to show the graph in area chart when I use grouped data. The problem is that, it doesn't paint the graph in Chrome. The graph is painted in Firefox but it is completely wrong and when I move my mouse over legends, Firebug tells "TypeError: u is null". I've reproduce the code on http://jsfiddle.net/saes/7EWRU/1/ so you can see the graph is not painted (in Chrome).

Something that is strange for me is that when I use Kendo UI ver. Q2 2013 (not Q1) as library in jsfiddle, it shows the graph but it's completely wrong (exactly the same like I use Firefox in my dev. environment). You can see it on http://jsfiddle.net/saes/XvRfn/14/
If you click on legends and choose one of them, you can see the grouped data is wrong. 

I wonder what's wrong in my code?

Thank you in advance,
Sam


Code:

var chartData = [{"PathCategory":"Angel","ScanTime":"/Date(1377295627880)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377295627880)/","Usage":473316311218},{"PathCategory":"Angel","ScanTime":"/Date(1377374709233)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377374709233)/","Usage":473316307895},{"PathCategory":"Angel","ScanTime":"/Date(1377806709363)/","Usage":315658122119},{"PathCategory":"Development","ScanTime":"/Date(1377806709363)/","Usage":473148678025},{"PathCategory":"Angel","ScanTime":"/Date(1377893108347)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377893108347)/","Usage":473653756198},{"PathCategory":"Angel","ScanTime":"/Date(1377979510767)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377979510767)/","Usage":473653763520},{"PathCategory":"Angel","ScanTime":"/Date(1378065909570)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1378065909570)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378152311203)/","Usage":316113243171},{"PathCategory":"Development","ScanTime":"/Date(1378152311203)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378238716937)/","Usage":316876500733},{"PathCategory":"Development","ScanTime":"/Date(1378238716937)/","Usage":473685197791},{"PathCategory":"Angel","ScanTime":"/Date(1378325112323)/","Usage":318792603246},{"PathCategory":"Development","ScanTime":"/Date(1378325112323)/","Usage":473685191889},{"PathCategory":"Angel","ScanTime":"/Date(1378411511853)/","Usage":318802654704},{"PathCategory":"Development","ScanTime":"/Date(1378411511853)/","Usage":474014244961}];

$("#dataGrowthOverviewPerCategoryChart").kendoChart({
            theme: $(document).data("kendoSkin") || "metro",
            dataSource: {
                group: {
                    field: "PathCategory"
                },
                data: chartData,
                schema: {
                    model: {
                        fields: {
                            ScanTime: {
                                type: "date"
                            }
                        }
                    }
                }
            },
            series: [
                {
                    type: "area",
                    field: "Usage",
                    missingValues: "interpolate"
                }
            ],
            legend: {
                position: "bottom"
            },
            categoryAxis: {
                field: "ScanTime",
                baseUnitStep: "auto",
                labels: {
                    format: "MM/dd"
                },
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            },
            chartArea: {
                height: 250,
                background: "transparent"
            }
        });

Hi,

Using the http://demos.kendoui.com/dataviz/api/selection.html code as example, when i add tooltip function, the chart was unable to show the tooltip.
But if i disable the selection api, the tooltip work.
How to make tooltip work together with selection api?

Thanks.

Regards,
Tan

Hi,

I Noticed that supplying a   object does work, but not the 'event' property.

So:

Will not render the title of an edit-event popup to "Boeking".
I use a custom template, as in:


I found a workaround:
In the parse function of the transport.schema object it's possible to define extra functions. They can do extra magic, and called from the template using MVVM bindings. :)
Like this:
Another use for this method:
Hide the save/cancel buttonbar in certain conditions. Like this:

Just my 2 cents!

Hi, I have downloaded the trial version of kendo ui, but when I try the kendo scheduler resizeStart, resize and resizeEnd, this three function is not firing/working. I've already tried the sample code from your documentation but still I'm not getting  this thing to work. Can you provide me with a working sample code for this one? Thanks.

Hi,

I am building an app, with a mobile switch, but i can not reset it to default state. 
The value is resetted, but the graphic shows it still on "J", the onlabel.
How can I reset this switch completely without removing it from DOM??
Like if it is off for default, it should be off after reset, for it is on for default, it should reset to on, independed on what state it actually is.
<label for="bb" id="ms">Bla or blub?
<input type="checkbox" data-role="switch" id="BB-switch" name="bb" data-change="switchChange" class="rrform" data-off-label="N" data-on-label="J" value="false"/>
</label>
// reset whole formular to default settings
  function reset(){
        var $res = $("#rrform").get(0);
        $res.reset();
        $("#MWST-switch").removeAttr('checked');
   }
reset();