Hey Guys,

I'm having a problem getting a dropdown list to work properly. Below is the code I'm using:

$(("#category").kendoDropDownList({
        dataTextField:"category",
        dataValueField:"id",
        autoBind:false,
        optionLabel:"All",
        dataSource:{
            transport:{
                dataType:'json',
                read:'/products/category/json_category/
            },
            schema:{
                data:"results"
            }
        },
});

This is my json response:

{ "results":[ { "category":"03", "id":"512" }]}

The json request fires when clicking on the dropdown list, but it just sits there with the loading spinner... Any ideas?

If I specify a manual list of items as the datasource, it works fine ><

I have a kendo grid with a bunch of columns, I know a few default columns but the rest are dynamic as the user can define what data he wants to see in the resulting grid.

Is there a way to make a cell in each row a link using values from multiple columns?

<a href="view.aspx?id=SomeID">SomeValue</a>

SomeID and SomeValue would come from different columns in the row.  

It seems to me I have to either define no templates or all templates for the columns but it would be nice to define column[0].template or something like that.

If it is not possible to make that column a link, is it possible to link a javascript event to clicking on a field in the first column?  I would think that is the same as defining a template but maybe it is different.  I'd want the mouse cursor to change on that cell as well so the user would know it is clickable.

I'm trying to limit ComboBox entry to something valid from the datasource.  I've tried to add a change event handler that looks for a valid item and if the item is not valid select the first item from the datasource.

The problem seems to be that if an "invalid" entry is typed in, the combo box gets into some weird state where the select() method stops working.  See this JSfiddle:  http://jsfiddle.net/gVWBf/

What am I doing wrong?

Thanks!
Jeff Butler

Can you give me a example of remote binding for this type of chart? or this type of chart we just can bind to local data list? Thanks.
http://demos.kendoui.com/dataviz/bar-charts/grouped-stacked-bar.html

Hi,

I've got a set of editable grids on a page. One contains a date field (mysql) that is editable. When the grid runs a datepicker is shown in the popup editor for that field, dates can be selected and the grid is updated with the new date selected. However, the update on the database doesn't work. All of the other editable fields work fine, just the datepicker is failing.

I have attached a screenshot of the Firebug post info showing that the BillDate is posting as BillDate  Wed Jan 30 2013 00:00:00 GMT-0500 (Eastern Standard Time). Based on the docs I have the BillDate field set to format: "{0:yyyy-MM-dd}" and assumed this formatting would be submitted in the post. It's not and that appears to be the problem.

So, can you tell me how to get the datepicker to submit the date selected in Y-m-d format?

I'm using PHP/MYSQL and have a the very simple update script for the grid with the datepicker:

<?php include('dbcon.php'); ?>
<?php
$id = mysql_real_escape_string($_POST["contractID"]);
$billable = mysql_real_escape_string($_POST["Billable"]);
$billed = mysql_real_escape_string($_POST["Billed"]);
$billdate = mysql_real_escape_string($_POST["BillDate"]);


$rs = mysql_query("UPDATE contracts SET Final = '" .$billable. "', billed = '".$billed."', billed_date = '" .$billdate. "' WHERE contractID = '" .$id."'");
    if ($rs) {
    header("Content-type: application/json");
    echo json_encode($rs);
    }
    else {
    header("HTTP/1.1 500 Internal Server Error");
    echo "Failed on update: " .$billable;
    }
?>

I have also tried converting the date submitted with $billdate = date('Y-m-d', strtotime("".$_POST["BillDate"]."")); and that doesn't work either.

Here is the grid code:

   
    var billableDataSource = new kendo.data.DataSource({
                       transport: {
                        read: "data/billable-options.php"
                        }
                });
    var billedDataSource = new kendo.data.DataSource({
                       transport: {
                        read: "data/billed-options.php"
                        }
                });
    
     function typeDropDownEditor(container, options) {
                    $('<input data-text-field="label" data-value-field="item" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billableDataSource
                        });
                }
    function billedDropDownEditor(container, options) {
                    $('<input data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billedDataSource
                        });
                }
   $("#past").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/unbilled-fetch.php?start=<?php echo $_GET['start']; ?>",
                                update: {url:"data/unbilled-update.php", type:"POST"}
                                                                
                            },
                            schema: {
                                model: {
                                   id: "contractID",
                                    fields: {
                                        contractID: { type: "number", editable: false, nullabe: false },
                                        Artist: { type: "string", editable: false},
                                        PlayDate: { type: "date", editable: false},
                                        Venue: { type: "string", editable: false},
                                        Fee: {type: "number", editable: false},
                                        Overage: {type: "number", editable: false},
                                        Actual: {type: "number", editable: false},
                                        Deposits: {type: "number", editable: false},
                                        Commission: {type: "number", editable: false},
                                        MgmtComm: {type: "number", editable: false},
                                        Net: {type: "number", editable: false},
                                        Billable: {type: "string", editable: true},
                                        BillableText: {type: "string"}
                                                    
                                     }
                                }
                            },
                            batch: false,
                        pageSize: 10
                        },
                        sortable: true,
                        groupable: true,
                        resizable: true,
                        scrollable: {
                             virtual: true //false
                             },
                        pageable: {
                            refresh : true
                            },
                        toolbar: ["save", "cancel"],
                        columns: [
                        { field:"contractID", title: "ID", width: "50px" },
                        { field:"Artist", title: "Artist", width: "100px" },
                        { field:"PlayDate", title: "Date", width: "75px", format: "{0:MM/dd/yyyy}" },
                        { field:"Venue", title: "Venue", width: "150px" },
                        { field:"Fee", title: "Fee", width: "60px" },
                        { field:"Overage", title: "Overage", width: "60px" },
                        { field:"Actual", title: "Actual", width: "60px" },
                        { field:"Deposits", title: "Deposits", width: "75px" },
                        { field:"Commission", title: "Commission", width: "75px" },
                        { field:"MgmtComm", title: "MgmtComm", width: "70px" },
                        { field:"Net", title: "Net", width: "60px" },
                        { field:"Billable", title: "Billable",  width: "160px", editor: function (container, options) {
                    $('<input data-text-field="label" data-value-field="item" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billableDataSource
                        });
                }},
                        ],
                        editable: true
                    });
                    
                    
                    
                // current billing cycle data based on the search criterea    
                $("#billable").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/billing-cycle-fetch.php?start=<?php echo $_GET['start']; ?>&end=<?php echo $_GET['end']; ?>",
                                update: {url:"data/billing-cycle-update.php", type:"POST"}
                                                                
                            },
                           schema: {
                                model: {
                                   id: "contractID",
                                    fields: {
                                        contractID: { type: "number", editable: false, nullabe: false },
                                        PlayDate: { type: "date", editable: false},
                                        Artist: { type: "string", editable: false},
                                        Venue: { type: "string", editable: false},
                                        Fee: {type: "number", editable: false},
                                        Overage: {type: "number", editable: false},
                                        Actual: {type: "number", editable: false},
                                        Deposits: {type: "number", editable: false},
                                        Commission: {type: "number", editable: false},
                                        MgmtComm: {type: "number", editable: false},
                                        Net: {type: "number", editable: false},
                                        Billable: {type: "string", editable: true},
                                        Billed: {type: "number", editable: true},
                                        BillDate: {type: "date", editable: true},
                                        Label: {type: "string"}
                                                    
                                     }
                                }
                            },
                            parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                },
                            batch: false,
                        pageSize: 20
                        },
                        sortable: true,
                        resizable: true,
                        filterable: true,
                        columnMenu: true,
                        groupable: true,
                        pageable: {
                            refresh : true,
                            pageSizes: [10,20,50,100],
                            },
                        /* toolbar: ["save", "cancel"], */
                        columns: [
                        { field:"contractID", title: "ID", width: "75px" },
                        { field:"PlayDate", title: "Date", width: "75px", format: "{0:MM/dd/yyyy}" },
                        { field:"Artist", title: "Artist", width: "100px" },
                        { field:"Venue", title: "Venue", width: "150px" },
                        { field:"Fee", title: "Fee", width: "75px" },
                        { field:"Overage", title: "Overage", width: "75px" },
                        { field:"Actual", title: "Actual", width: "75px" },
                        { field:"Deposits", title: "Deposits", width: "75px" },
                        { field:"Commission", title: "Commission", width: "75px" },
                        { field:"MgmtComm", title: "MgmtComm", width: "75px" },
                        { field:"Net", title: "Net", width: "75px" },
                        { field:"Billable", title: "Billable",  width: "125px", editor: function (container, options) {
                    $('<input data-text-field="label" data-value-field="item" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billableDataSource
                        });
                }},
                        { field:"Billed", title: "Billed", width: "75px", editor: function (container, options) {
                    $('<input data-text-field="Label" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: billedDataSource
                        });
                }},
                        { field:"BillDate", title: "Bill Date", width: "100px", format: "{0:yyyy-MM-dd}" },
                        
                         { command: ["edit"], title: "&nbsp;", width: "210px" }],
                        editable: "popup"
                    });   
 
Thanks in advance,
Tony 

I have  login form fields incuding a switch for remember me on a modalview like the demo example.  When I toggle the switch, it causes the modal view to close.  Can anyone please help with a way to work around this and not have the modalview closed by the switch. I want the modalview to only be closed by my login and cancel buttons.

Hello,

I have a Popover with a ListView of links.  I would like someone to be able to click on a link, have it close and it navigates to the page.  Here is the code that I have so far, I have it opening in the parent, but it doesn't close.


The current code is not closing the link for me.  Using the Developer Tools when I debug the JS, the closeParentPopover is not being called when a link is clicked inside the Popover.  Can someone help me out here?  I would have thought that this would have been more simple.

Is it possible to style the tooltip so it can have an arrow similar to this: 
bootstrap tooltip example

Hello!
I'm developing a simple app using Icenium Mist. I followed the example on mobile forms page about drop-down list:
http://demos.kendoui.com/mobile/forms/index.html

In the demo it works fine - the drop down shows up and stays there. In my app I can see the drop-down list show for a split second, and it disappears right away. I didn't see any JS errors or missing references.

Markup is simple:
<div data-role="view" data-init="initSignOffForm">
.....
<select id="ddlChild">
<option value="1">Veronique</option>
<option value="2">Michelle</option>
        <option value="3">Griffin</option>
        <option value="4">Boris</option>
</select>
.....
</div>

Then my JS file piece copied from demo page:

function initSignOffForm(){
    var body = $(".km-vertical,.km-horizontal");
    if (kendo.ui.DropDownList) {
        $("#ddlChild").kendoDropDownList({
                // The options are needed only for the desktop demo, remove them for mobile.
                popup: { appendTo: body },
                animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : "slideIn:down" } }
            });
    }
}

I tried removing the options for the list in JS - same thing...

Compiled and tested in on the phone - blinks the same way as well.

Anyone knows why and how to fix?

I have a grid, with a nested grid (exposed via detailInit), which also has a nested grid.
I am having a couple of issues with it.
When expanding the main grid, if I start at the top item, the second and third one won't expand.
If I start at the third one, the second and first one will expand.  If I start at the second one, the first will expand, but the third one won't.

In the inner grid, if I expand the top row, the second row expands, but isn't rendered correctly.  My innermost grid is actually a tabstrip with two div's in it, and each of those divs are a grid.

I've made a sample that re-creates the problems I am seeing at 
http://jsfiddle.net/giltnerj0/e2RfH/

Thank you.

Robin