Sorry if this is explained elsewhere - I've been searching and can't find a simple example of how to do this.

I have just started using KendoUI, specifically a grid.  I would like to be able to click a row in the grid, and have that event send the user to a detail view for the item selected, passing along the ID of the selected item.  It seems like a pretty basic thing, but I can't find an example of this anywhere.  Here's the code I've got right now, which just pops an alert: Thanks!

Eddie

I'm using Visual Studio 2012 and building a very simple web app with the Kendoui Treeview and Editor. The Treeview data source is MS SQL CE 4 connected with Entity framework. Each node click will return text into the Editor on the right. The Treeview needs to be fully editable and drag-n-drop.

The Treeview demo code makes everything look easy, but I'm having trouble. I think your code example built into a downloadable project would more intuitive.

I'm wondering whether it is possible to create a line chart without the "bubbles" that are positioned at each data point.  Basically, the chart should look something like the new stock chart... just a smooth line with no indication to mark a specific data point. 

I'm building a line chart that might include hundreds of points.  I don't care to show any tooltips or any other decorations.  Just a line.

Any thoughts?

Hi there,

Since browsers have restrictions on the number of connections per domain/proxy, is there anyway that I could configure the upload widget to limit the maximum number of concurrent upload connections? This would allow other ajax calls to work while my long running asyn upload is running (which may range from 1-20 files).

Thank you!

If you guys can create a widget using a canvas that will allow a user to export canvas contents to a .png and/or .jpg file locally and/or a specific location on a server, suddenly, native apps become less important and the need to target WP7, W8/Metro, iOS and Android is mitigated (to a large extent).

Example: display a canvas, load pre-existing image, user draws lines over image, save image and user-input into new bitmap file (somewhere).

Furthermore, override the events that fire when a user touches a screen causing zoom-in/out and scrolling. Touching/dragging inside the "canvas widget" should invoke event to allow for manipulating that control/widget content only, similar to mouse-down, mouse-move and mouse-up...

Wrap that into a HTML5 widget...I'm signing up to Kendo right away.

Hello –

In an attempt to keep our Data and Business Logic on the server, we are generating our ViewModel data on the server and transporting them to the browser via using JSON. Once received, we extend that data onto a kendo.observable object using jquery's extend() method and then bind that to our DOM using the kendo.bind method. When we change the value of any input, we refresh the ViewModel by sending it back to the server. The server processes or commits any changes that it detects and sends us an updated ViewModel with any updated data/results. Yes, we realize that sending the entire ViewModel back, instead of just what changed could be considered inefficient, but we’re still in Proof-of-Concept mode.

The Problem

For the most part, our methodology seems to be working on all properties using simple data types (e.g. string, integer, decimals, etc). However, once we start introducing collections (or arrays), we start running into issues.

Scenario 1 – It Works!

Code can be seen and run at this JS Fiddle:
http://jsfiddle.net/mikejoseph23/QuGgy/

Since interacting with a web service would be tricky using, JS Fiddle, I’m emulating the same thing that’s happening by creating 3 different sets of data which represents ViewModels being pulled from the server in JSON format. The Refresh button simply cycles through them, but once implemented, this method would be requesting an updated ViewModel data set on the server based on any changes passed in.

Pressing the Refresh button works as expected. I can rebind to an updated viewModel (kendo observable) object with no problem.

Scenario 2 – FAIL!

Code can be seen and run at this JS Fiddle:
http://jsfiddle.net/mikejoseph23/wcPNp/

In this next sample, I changed the ViewModel data to use the following structure instead and instead of binding to individual input elements, I’m binding to a select dropdown.

The first press of the Refresh button works as expected, but the second press gives me the following error in Chrome:

Kendo.all.min.js:11
Uncaught TypeError: Object Negril, Jamaica,Cancun, Mexico,Key West, FL has no method 'unbind'

I can’t figure out why! Any help or advice would be greatly appreciated!

Thanks!!

I'm trying to integrate with an existing component feeding Json data in cross site environment. The grid works in Chrome, but fails to populate in IE. Using version 9 of Internet Explorer. I provided several examples below to demonstrate which code works and which doesn't.

I also attached the code with supporting files.

Please help.



<script>
// Code downloaded from http://demos.kendoui.com/web/grid/index.html
var alerts = 
{
"startIndex":0,
"count":25,
"entry": [
{"AlertId": 111},
{"AlertId": 222},
{"AlertId": 333},
{"AlertId": 444},
{"AlertId": 555},
{"AlertId": 666},
{"AlertId": 777}
]
};

$(document).ready(function() {
// Example 1. Works. Taken from http://docs.kendoui.com/howto/bind-the-grid-to-remote-data.
var ds1 = new kendo.data.DataSource({
transport: {
read: {
url: "https://api.instagram.com/v1/media/popular?client_id=4e0171f9fcfc4015bb6300ed91fbf719&count=2",
dataType: "jsonp"
}
},
pageSize: 5,
schema: {
 data: "data"
}
});

// Example 2. Fails in IE and Chrome with jsonp. No headers, no data.
// Works in Chrome and fails in IE with json.
var ds2 = new kendo.data.DataSource({
transport: {
read: {
url: "http://10.60.71.140/CoreRESTServices/Core.svc/alerts?fields=AlertId",
dataType: "jsonp"
}
},
pageSize: 5,
schema: {
 data: "entry"
}
});

// Example 3. Fails in IE, and works in Chrome. IE headers, but no data.
var ds3 = new kendo.data.DataSource({
type: "jsonp",
transport: {
read: {
url: "http://10.60.71.140/CoreRESTServices/Core.svc/alerts?fields=AlertId"
}
},
pageSize: 5,
schema: {
data: "entry"
}
});

// Example 4. Works.
var ds4 = new kendo.data.DataSource({
data: alerts,
pageSize: 5,
schema: {
 data: "entry"
}
});


// Initialize the grid.
$("#grid").kendoGrid({
dataSource: ds4
});
});
</script>

When using local data, my drop down list properly displays the value text in a field that contains the lookup value (integer).  However, when I try using a kendo.data.datasource to get the values from a database, the control no longer works for the basic grid display (the dropdown does populate correctly when in edit mode or adding a new record).

I'm missing something, but not sure what.  Here is the code:

           <div id="grid">

            </div>

 

<script>

             

    //works

    var relationshipDataSourcex = [{ kiRelationship: 2, RelationshipText: 'Item 2' },{ kiRelationship: 3, RelationshipText: 'Item 3'}, { kiRelationship: 4, RelationshipText: 'Item 4'}, { kiRelationship: 5, RelationshipText: 'Item 5'}]

     

    // does not work when getRelationship function called from grid (returns N/A), works when grid is in edit/insert mode

    var relationshipDataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: "data/relationshiplistJson.asp",

                        dataType: "json"

                            }

                            },

                schema: {

                data: "relationshiplist",

                    model: {

                        id: "kiRelationship",

                        fields: {

                            kiRelationship: { type: "number" },

                            RelationshipText: { type: "string" }

                                     

                            }

                    }

                }

                });

     

        // read does not seem to matter      

       // relationshipDataSource.read

       relationshipDataSource.query

 

        function getRelationship(kiRelationship) {

        for (var i = 0; i < relationshipDataSource.length; i++) {

            if (relationshipDataSource[i].kiRelationship == kiRelationship) {

                return relationshipDataSource[i].RelationshipText;

            }

        }

        return "N/A";

        }  

 

    function relationshipDropDownEditor(container, options) {

        $('<input data-text-field="RelationshipText" data-value-field="kiRelationship" data-bind="value:kiRelationship" />')

            .appendTo(container)

            .kendoDropDownList({

                autoBind: false,

                dataSource: relationshipDataSource

            });

    };  

                   

    $(document).ready(function () {

                relationshipDataSource.read();

                dataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: "data/respondentlistJson",

                        dataType: "json"

                        },

                    update: {

                        url: "data/respondentlistUpdate",

                        dataType: "POST"    ,                      

                        },

                     create: {

                        url:  "data/respondentlistUpdate",

                        dataType: "POST"

                    },

                    parameterMap: function(options, operation) {

                        if (operation !== "read" && options.models) {

                            return {models: kendo.stringify(options.models)};

                        }

                    }

                },

                batch: true,

                pageSize: 50,

                autoSync: false,

                             

                schema: {

                data: "respondentlist",

                    model: {

                        id: "kiRespondent",

                        fields: {

                            kiRelationship: { type: "number", editable: true, defaultvalue: 2 },

                            cName: { type: "string" ,validation: { required: true } },

                            cEmail: {type: "string"},

                            }

                    }

                }

            });

 

        $("#grid").kendoGrid({

            dataSource: dataSource,

            selectable: "row",

            pageable: true,

            sortable: true,

            scrollable: true,

            height: 800,

            toolbar: ["create"],

            columns: [

                { field: "cName", title: "Respondent Name", format: "{0:c}", width: "150px"} ,

                { field: "cEmail", title: "Email", format: "{0:c}", width: "150px"} ,

                { field: "kiRelationship", width: "150px",

                            editor: relationshipDropDownEditor,

                            template: '#= getRelationship(kiRelationship) #'

                            },

                                                  

                { command: ["edit", "destroy"], title: " ", width: "210px" }],

                editable: "inline" 

        });

               

    });

                 

</script>

I have been using an older version of kendo ui mobile, due to a bug I found in the old version of Kendo ui mobile, I had to upgrade to the latest in the latest one (went from v2012.2.913 to v2012.3.1114).  I have been using the mockjax library to mock the server responses to ajax calls, however in the latest version the mock is not getting hit.  Am I doing something improper in the code or is there a better way to accomplish this testing?

Here is an example of my previous setup:
mockjax:

View model code with a datasource

I am trying to work up a mobile app similar to your sushi demo.  I've attached a stripped version of what I'm working on.  I'm having a problem getting the data I want to edit to display.  For my data I am using a temporary webapi app to feed the mobile app data.  I'm getting data just fine and retrieve the record object I want, but can't set the values I need to edit.  The function below is where I get the data, and it is there, but I can't set the values.  When the view displays, the fields are empty.  I tried setting up like the sushi demo with it's detail view and template, but calling view.scrollerContent.html with the template and data never worked for me, it would not even display the view.  How else can I either set the values for edit or use a template to do this?  Thanks.

  function getCompanyPackageForEdit(e) { 
     var view = e.view; 
     var package = dsPackage.get(view.params.id); 
     //alert("package: " + package.Description + " default weight: " + package.DefaultWeightFactor + " weight: " + package.WeightFactor); 
 
     $("#editDefaultWeight").html(package.DefaultWeightFactor); 
     $("#editWeight").html(package.WeightFactor); 
     $("#editMaxCount").html(package.MaxCountPerDay); 
 
  }