We are trying to bind the navigate and/or the viewShow events to one of our panes in a split view. However, the events only seem to fire on the initial page load, but after that, no matter how many times the view changes in the pane, no events fire. What is the correct way of getting these events to fire everytime? Currently we are using the following to bind the event:
data-bind="events: {navigate: alert('test')}"

Thanks for any help

My ASP.NET page method is working and data is coming back but no data is being rendered in the grid.  The grid just shows the column names and no rows.  Here is the first row of the data returned from the invocation of my ASP.NET page method.


{"d": [{"__type":"HDServer.DataDictViewModel","IndexName":"$FacilityName","FieldWidth":8,"MaximumValue":null,"MinimumValue":null,"PointType":"VAR","ProcessArea":null,"CompressionType":"LST","DataSource":null,"DataType":"A","DecimalPlaces":2,"Description":"$FacilityName","Units":null}]
}


The javascript I am using is basically from the editing-popup grid sample


 <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "Default.aspx",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/ReadDataDict",
                            contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                            type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
                            dataType: "jsonp"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return kendo.stringify({ datadict: options.models });
                            }
                        }
                    },
                    batch: true,
                    pageSize: 30,
                    schema: {
                        data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                        model: {
                            id: "IndexName",
                            fields: {
                                IndexName: { type: "string", nullable: false, validation: { required: true } },
                                FieldWidth: { type: "number", validation: { required: true } },
                                MaximumValue: { type: "number" },
                                MinimumValue: { type: "number" },
                                PointType: { type: "string" },
                                ProcessArea: { type: "string" },
                                CompressionType: { type: "string" },
                                DataSource: { type: "string" },
                                DataType: { type: "string", validation: { required: true } },
                                DecimalPlaces: { type: "number", validation: { required: true } },
                                Description: { type: "string", validation: { required: true } },
                                Units: { type: "string", validation: { required: true } }
                            }
                        }
                    }
                });


                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 400,
                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        { field: "IndexName", title: "Index Name" },
                        { field: "FieldWidth", title: "Field Width", width: "150px" },
                        { field: "PointType", title: "Point Type", width: "150px" },
                        { field: "ProcessArea", title: "Process Area", width: "100px" },
                        { field: "MinimumValue", title: "Min", width: "100px" },
                        { field: "MaximumValue", title: "Max", width: "100px" },
                        { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }],
                    editable: "popup"
                });
     
            });
    </script>


The javascript console shows no errors and all scripts load successfully.  The grid does render, but with no data.  I am at a loss ...


Dan

Hi ,

i worked on kendo grid i have solved an problem per Persist selected rows while paging.
Following is the code

$(document).ready(function($) {
    var selectedIds = {};
    var grid = $("#grid");
    grid.kendoGrid({
        dataSource: {
            data: myData(),
            schema: {
                model: {
                    id: 'Id',
                    fields: {
                        select: {
                            type: "string",
                            editable: false
                        },
                        Id: {
                            type: "number"
                        },
                        FirstName: {
                            editable: true
                        },
                        LastName: {
                            type: "string"
                        },
                        City: {
                            type: "string"
                        },
                        Title: {
                            type: "string"
                        },
                        BirthDate: {
                            type: "date"
                        },
                        Age: {
                            type: "number"
                        },
                    }
                }
            },
            pageSize: 5
        },
        editable: false,
        selectable: "multiple",
        sortable: {
            mode: 'single',
            allowUnsort: false
        },
        pageable: true,
        columns: [
        {
            field: 'LastName',
            title: 'Last Name',
            width: 120},
        {
            field: 'City'},
        {
            field: 'Title',
            width: 230},
        {
            field: 'BirthDate',
            title: 'Date Of Birth',
            width: 120,
            format: "{0:MM/dd/yyyy}",
            template: '#= kendo.toString(BirthDate, "MM/dd/yyyy")#'},
        {
            field: 'Age',
            width: 80}],
       
         dataBound: function() {
         var grid = this;
             var selected = $();                
            var ids = selectedIds[grid.dataSource.page()] || [];
            for (var idx = 0, length = ids.length; idx < length; idx++) {         
                selected = selected.add(grid.table.find("tr[data-uid=" + ids[idx] + "]"));                  
                    grid.select(selected);                    
                }
         },
         change: function () {         
                var grid = this;
                 var ids = selectedIds[grid.dataSource.page()] = [];
                grid.select().each(function () {
                    dataItem = grid.dataItem($(this));                   
                   ids.push($(this).data().uid);
                   
                });
                }
    });   

});


Thanks
Amol Gunjal

I'm working on creating a fully dynamic tabstrip for use with a chat program I"m developing. So for example, I have a single button that every time it is pressed it creates a new tab in the tabstrip and sets the tab content to a partial view that will contain the chat list between me and tab1, tab2, tab3...

My main issue at the moment is that the content of the tab is outside the borders of the tab that contains the partial view.  Here is everything I have up to this point.

If the animation isn't included and kendoTabStrip() are used the tabstrip isn't generate. Causing the following line to be null:
var tabStrip = $("#chatTabStrip").data("kendoTabStrip");

My first attempt was to not have the ajax call but to just use the following. The following lines would never render the content.
tabStrip.append({ text: Text, contentUrl: "TabPartialView.cshtml" });
tabStrip.select(tabStrip.tabGroup.children("li:last"));

I still haven't addressed how I will get the content of each specific chat thread into the correct tab's list.

Thanks,

Hi,
I am unable to apply cycle plugin to listview. It works when the page is loaded but once a delete, add or edit action is performed the cycle plugin fails. Please help me asap. Following is the script that I have applied to the div listview, rest all the code is same as the editable version of listview example except that I have removed the pager so that I can use the cycle plugin. 

The title is misleading. I want the tooltip to float on the left side of the bar. But I don't know how to edit the title.

The default of the tooltip for the bar chart is on the right side. I have checked the api for the tooltip in bar, it only provides the styles of the tooltip, but nothing else. I want to reset the location of tooltip to the left side that close to y-axis. 

Just create a test demo in Fiddle. In the code, I copy one of demo from DataViz. The tooltip is floating on the right side of the bar when you hover on the bar. However, sometime, there is not enough space to display tooltip on the browser even though the users see it in full screen. 

I am looking for modify the default behavior of tooltip in order to float it on the left side of the bar. 
http://jsfiddle.net/davishacker/gapkL/

Hi guys,

I'm currently trying to bind a viewModel value to a toolbar using a template, but no matter what I do it doesn't work, do you have any idea of how I can get it to work?


Thank you in advance.

I found two minor ui glitches that appear when zooming a page that contains a grid:

1) Grid header and grid body are not well aligned when zooming a page that contains a grid. The border line of some column headers is not well aligned with the border line of the respective column in the body. The effect becomes more visible the higher the zooming level is. All the columns become well aligned again once any column has been resized. After resizing a column the effect can|t be reproduced anymore (until the page is reloaded).

2) Resizing cursor does appear when zoomed page is scrolled to the right. Please notice, I'm referring to the horizontal scrollbar of the browser window, not to the scrollbar of the grid. The resizing cursor is always available (for any column) as long as the scrollbar is on the leftmost position. Once the user scrolls to the right (even a little bit), the resizing cursor doesn't appear anymore for any column. This can also be reproduced in low zoom levels, when the horizontal scrollbar just appears. In this case there seems to be some kind of threshold, when scrolling a little bit to the right, the resizing cursor is still available, scrolling a little further, no resizing cursor.

Both issues can be reproduced in the online demos (e.g. column-resizing.html), but also in 2012 Q2 and 2012 Q3 Beta. As both problems appear in various browsers (Firefox 16, Chrome 22, in IE7-9 only the 2nd bug) I suspect these could be a problem in kendoUI.

Hi Kendo,

Is it possible to have custom bindings applied to template items?

i have this in a template:

<input style="width:22px;" type="text" data-bind="value: PercentOfValue" data-keyup="numericOnly" data-value-update="keyup" />

and this as a binding:
kendo.data.binders.numericOnly = kendo.data.Binder.extend({
    refresh: function () {
        $(this.element).bind('keyup', function (evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode;
            if (charCode != 46 && charCode > 31
              && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;

        });        
    }
});


This is the latest thing i've tried. I've also attempted to use the 'refresh' to simply rewrite the bound value to not include any letters etc without any success. It seems as though the refresh is simply ignored to those properties bound in a template. it is initially called when a new array item is added to the viewModel.. but never called when the value is "refreshed".

PLEASE respond to this.

Our team has been testing our Kendo UI Mobile app in IE 10 on Win8 and WinRT devices this week. Things are working fairly well, however, the default SVG for things like tab strip buttons aren't displaying.  Is there a work around for this that you could recommend?

Thanks,
Benton