kendo ui grid in editable mode  can't validate the input value when I cut the value from the textbox and then paste it into the  textbox again,and I find the demo for it  has the same problem,so I think my code is OK, it's a bug,who can help me to fix it???

I have a treeview with databound to remote data from database. What I need is to set the image (icon) for the leaf nodes. The leaf nodes are of two different types; based on their type I need to set the icon before the text of the leaf node. I can easily set the image for parent nodes by setting the css for ".k-treeview .k-plus" and ".k-treeview .k-minus", but I do not know how to do it for leaf nodes based on their type.  I do not see any example of how to do that in the treeview demo either. It has one section that shows how to set the leaf node image, but the tree nodes are hard coded in the view with their image url hardcoded. I need something that has remote data binding and the treeview created dynamically. Any information on that will be highly appreciated. Thanks.

there are two group of inputs , 
line 3 : test1 group 
line13: test2 group 
 the same code I test in v2012.3.1315 ,  everything is ok , but in this new version , when choose from the second group , check one itemfrom the second group , the first group's only one option can checked , but the one I choose in second group not checked correctly. for example , you can choose A3 or A4, repeatly for serval times , B1 will  be checked .

Hello,

I am using Grids with the pageable option. I would like to keep the selected rows when the page is changed. The standard Grid behavior is, that the selection is not kept. But I already found an approach to store the row selection in the Change event and to restore it in the DataBound event.

global var:
    var selIdsAgentsInService = {};

In change event:
            // store selected rows of AgentsInService grid in selIdsAgentsInService array
            var ids = selIdsAgentsInService[gAgentsInService.dataSource.page()] = [];
            gAgentsInService.select().each(function () {
                dataItem = gAgentsInService.dataItem($(this));
                ids.push($(this).data().uid);
            });

In DataBound event:
        // restore selection
        var selected = $();
        var ids = selIdsAgentsInService[gAgentsInService.dataSource.page()] || [];
        for (var idx = 0, length = ids.length; idx < length; idx++) {
            selected = selected.add(gAgentsInService.table.find("tr[data-uid=" + ids[idx] + "]"));
            gAgentsInService.select(selected);
        }


This is still not exactly doing what I want, and therefore I am looking for a solution to handle the following use cases:

Use case 1 (which is working with my approach):

1. a grid displays data spread over several pages
2. rows are selected on page 1
3. page is changed to another page without selecting any row and back to page 1
4. the previously selected rows should still be selected

I have a combobox and a list view on a page. When ever an item is selected in the combo box it is suppose to load the listview with items from a table with the selected criteria. No matter what the data is not passed to the read method in the controller

The View The javascipt


the Read method in the controller. I have the debugger going and it returns the proper string but when it is read in the controller the value is ALWAYS null.

What am I doing wrong here?

In MVC3 using VS 2010 I used this all the time no problem. You have an order. You want to be able to view the line items. So you click View in the Custom command of the data grid and it redirects you to a view with the line items for that order. I did this all the time with no issues

Problem: MVC4, VS 2012 and IE10.  Same type of thing. Click the button, it calls the Ajax which  calls the proper method in the controller and passes the parameter in but does not return the View.

I assume its a JQueary issue now. I have been pounding my head against the wall for a good day now and getting nowhere.


The View

The Ajax call
BTW, the preventDefault makes no difference. Same result

The Controller method

Hello Again =),

I have an issue, I am calculating some fields, and the first time when I load the page with the cache clean, it displays this calculated fields correctly, This is a DateTimePicker inside a Kendo Grid. So when the user click s it we want it to display in an specific format, but after the page has been reloaded or refresh or we go back to the same page,  the format of the date is not respected anymore. Do you have any ideas why is this issue created.

Here is my code"

//New WO to schedule grid
    workOrdersSchedulingDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                // the remote service url
                url: '/sdata/api/dynamic/-/WorkOrders?where=(Status eq \'Unassigned\')&include=Customer,AssignedTo&count=200'
            }
        },
        type: 'sdata',
        serverSorting: true,
        sort: { field: "Priority", dir: "desc" },   
        schema: { data: "$resources",
            model: {
                fields: {$key: { editable: false, defaultValue: "00000000-0000-0000-0000-000000000000" },
                    Priority: { editable: false, nullable: true },
                    Customer: { editable: false, nullable: true },
                    LocationCity: { editable: false, nullable: true },
                    ServiceDate: { editable: true, nullable: true, type: "date" }, // This is the ones I care about
                    ServiceEndDate: { editable: true, nullable: true, type: "date" }, // This is the ones I care about
                    AssignedTo: { editable: true, nullable: true }
                }
            },
            parse: function (data) {
                $.each(data.$resources, function(idx, item) {
                    if (item.AssignedTo == null) {
                        item.AssignedTo = { $key: "", FirstName: "", LastName: ""} ;
                    }
                });
                return data;
            }
        },
        change: function () {
            var count = this.total();
            $("#workOrdersSchedulingCount").text(count);
            if (count == 0) {
                $("#zeroWorkOrdersToScheduling").removeClass("displayNone");
                $("#workOrdersSchedulingTable").addClass("displayNone");
                $("#workOrdersSchedulingFooter").addClass("displayNone");
            } else {
                $("#zeroWorkOrdersToScheduling").addClass("displayNone");
                $("#workOrdersSchedulingTable").removeClass("displayNone");
                $("#workOrdersSchedulingFooter").removeClass("displayNone");
                $("#unassignedBackground").removeClass("displayNone");
                $("#unassignedUnderline").removeClass("displayNone");
            }
        }
    });

var technicianDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/sdata/api/dynamic/-/servicesuser?where=Role eq 'Technician'&include=user",
            }
        },
        type: 'sdata',
        schema: { data: "$resources",
            parse: function (data) {
                $.each(data.$resources, function(idx, item) {
                    item['FirstLastName'] = concatFirstLastName(item.User.FirstName, item.User.LastName);
                    item['Id'] = item.User.$key;
                    item['FirstName'] = item.User.FirstName;
                    item['LastName'] = item.User.LastName;
                    //This is the calculated field I cared about

                    item['ServiceDateCalc'] = $.dateUtilities.getUtcDate(item.ServiceDate);      
                    //This one too                          
                    item['ServiceEndDateCalc'] = $.dateUtilities.getUtcDate(item.ServiceEndDate);

                });
                return data;
            }
        }
    });

var schedulingGrid = $("#workOrdersSchedulingTable").kendoGrid({
        dataSource: workOrdersSchedulingDataSource,
        pageable: false,
        sortable: false,
        scrollable: true,
        height: 250,
        dataBound: function () {
            var grid = this;
            $.each(grid.tbody.find('tr'), function () {
                var model = grid.dataItem(this);
                //if Role equals NoRoleAssigned, attach star icon ahead of user name
                if (model.Priority === "Low") {
                    $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/lowPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                }
                else if (model.Priority === "Regular") {
                    $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/regularPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                }
                else {
                    $('[data-uid=' + model.uid + ']' + '>td:first-child').prepend('<span class="staricon">&nbsp;<img src="/Content/images/criticalPriority.png" />&nbsp;&nbsp;&nbsp;</span>');
                }
            });

            $("table tr").hover(
                function () {
                    $(this).toggleClass("k-state-hover");
                }
            );
        },
        columns: [
            { hidden: true, field: "$key", title: "Key", template: kendo.template($("#tempId").html()) },
            { field: "Priority", title: "Priority", width: "75px"},
            { field: "Customer", title: "Customer", width: "119px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= Customer.Name #'>#= Customer.Name # </div>"},
            { field: "LocationCity", title: "Location", width: "95px", template: "<div style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;' title='#= LocationCity #'>#= LocationCity?LocationCity:'N/A' # </div>" },
            { field: "ServiceDate", title: "Start", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempStartDate").html()), editor: startDateTimeEditor },
            { field: "ServiceEndDate", title: "End", width: "155px", format: "{0:MM/dd/yyyy hh:mm tt}", template: kendo.template($("#tempEndDate").html()), editor: endDateTimeEditor },
            { field: "AssignedTo", title: "Technician", width: "145px", template: kendo.template($("#tempAssignedTo").html()), editor: assignedToDropDownEditor }
        ], editable: {
            template: null,
            createAt: "bottom"
        }
    });

    function startDateTimeEditor(container, options) {
        $('<input id="serviceDateEditor" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDateTimePicker({
                    dataTextField: "ServiceDateCalc",
                    dataValueField: "ServiceDate"
                });
    }
    
    function endDateTimeEditor(container, options) {
        $('<input id="serviceEndDateEditor" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDateTimePicker({
                    dataTextField: "ServiceEndDateCalc",
                    dataValueField: "ServiceEndDate"
                });
    }

So, it is working for the first time but after that the format gets messy.

Any suggestions? Thank you.

Guillermo Sanchez

Hello,

http://www.kendoui.com/forums/ui/grid/-validate-functions-not-working-on-inline-or-popup-editing.aspx

Please check attached screenshot.

Thanks,
Jayesh Goyani

On change template in code, the repainting of the grid doesn't seem to expand and produce scrollbars to match the new height of the update grid display.

Here's an example. To reproduce the issue, click on the 'Change Template' button:
http://jsfiddle.net/65kWY/20/

PS. Setting scrollable to true (non-virtual) works just fine.

Hello Community,

First of all I will like to thank Telerik for such a great product, it has been a very good experience developing my first Phonegap in conjunction with Keno UI Mobile, nice work ;)

Secondly, I have found a Bug with the state of buttons, to be more precise the class km-state-active gets stucked when a button is pressed, in navbar or content, so the user once have used a button from that view (back-button, actionsheet navbar button, button within content to open a link... and so on), will always get the button as pressed or with the  class km-state-active attached to it, resulting in a confusing and not so great user experience, and it also makes the App "less native" in a sense.

I have found a temporal solution, and will like to get a confirmation (if possible) from the telerik developing team, after trying to track a bit the matter from kendo.mobile.js, I have found that for some reason some of the new events (comparing events from build 2013.1.319) don't seem to work correctly, I will try to explain myself.

I have used an online javascript beautifier (don't know if links from other sites can be included here) and in line 6725 (this is based in the beautifier I have used, it may differ from your numeration) the function attached to the end it's not even triggering:
What this causes is that the buttons can't listen to the end event and the class km-state-active keeps attached to the element causing this behaviour. 

My solution is to always attach this to the functions which are correctly called by the events, which are press and tap (I've done it in both just in case), which call the functions _activate and _release respectively, code from line 6719-6724 (I insist these are the lines I obtain after uncompressing Javascript with the online tool):
So I included at the end of the called functions what the end event was supposed to be doing, resulting in these modified versions, lines 6747-6765:

After that I minify once more the whole javascript (including the Copyright licence on top once more obviously) and ready to go.

I don't know if this is the best approach but it did the trick for me, and it could also shed some light in tracking down this Bug from the last production version of Kendo UI Mobile (if it stills there of course...).

As I said before, thanks for the great product!