Telerik Forums
Kendo UI for jQuery Forum
0 answers
99 views
I've implemented the autocomplete component successfully to search against a list of website urls. However when I submit my form i want to submit the numerical id value of the site not the text value. Is this possible?

$("#maintSiteId").kendoAutoComplete({
                minLength: 3,
                dataTextField: "site_url",
                dataValueField: "site_id", // this doesn't seem to work and is depreciated?
                filter: "contains",
                height: 320,
                dataSource: {
                    pageSize: 20,
                    transport: {
                        read: {
                            url: "/Sites/DataJsonSites.cshtml",
                            dataType: "json",
                            type: "GET"
                        },
                        parameterMap: function(options) {
                            return $.extend(options, {
                                id: '',
                                title: $("#maintSiteId").data("kendoAutoComplete").value()
                            });
                        }
                },
                placeholder: "Select site...",
                separator: ", ",
                suggest: true
                }
            });

Input field contained within standard <form>
<input class="span6" id="maintSiteId" name="maintSiteId" style="width: 320px; margin-left: 0;"/>

Sample JSON data being used;
[{"site_id":1,"site_url":"www.mysite1.com","site_name":"my site 1"},{"site_id":2,"site_url":"www.mysite2.com","site_name":"my site 2"}]
andy
Top achievements
Rank 1
 asked on 19 Apr 2012
1 answer
185 views

hi all, new to kendo, new to json. Can't seem to get any data into a kendo.data.DataSource. Am using the new 2012 q1 mobile release and ASP.NET MVC 3. Here's my code:

js:

    // create a template using the definition on the application page (the .cshtml file)
    var templateFundingSources = kendo.template($("#template-funding-sources").html());
 
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Home/GetCardFundings"// the remove service url
                dataType: "json"// JSONP (JSON with padding) is required for cross-domain AJAX
 
                data: {
                    //additional parameters sent to the remote service
                    _cardId: cardID
                }
            }
        },
 
 
        schema: {
            data: "cardFunding",
            model: {
                id: "CardID",
                fields: {
                    CardID: {
                        type: "number",
                        nullable: false
                    },
                    RemainingBalance: {
                        type: "number"
                    }
                }
            }
        },
 
 
        change: function () { // subscribe to the CHANGE event of the data source
            $("#listview-card-fundings").html(kendo.render(templateFundingSources, this.view()));
        }
    });
 
 
    dataSource.read();

    //test data source to see it's defined     dataSource.add({ cardID: 4, remainingBalance: 34 });

and MVC code:

public JsonResult GetCardFundings(int _cardId)
        {
            List<CardFunding> cfs = new List<CardFunding>();
 
            CardFunding cf = new CardFunding();
            cf.CardID = 1;
            cf.RemainingBalance = 3;
            cfs.Add(cf);
 
            CardFunding cf1 = new CardFunding();
            cf1.CardID = 1;
            cf1.RemainingBalance = 3;
            cfs.Add(cf);
            return Json(cfs, JsonRequestBehavior.AllowGet);
        }

The server-side code gets called and returned, and no execptions are tripped anywhere there or in the .js.
Any help greatly appreciated.

Kendo team: Awesome job on the project. Looking forward to mastering your framework.
Rosen
Telerik team
 answered on 19 Apr 2012
2 answers
654 views
Hi
I am trying to make a basic datasource integration and populate a grid with data.
My RST service delivers JSON in this format
{"country":[
{"codeLong":"AUT","codeShort":"AT","name":"Austria"},
{"codeLong":"BEL","codeShort":"BE","name":"Belgium"},
{"codeLong":"BGR","codeShort":"BG","name":"Bulgaria"}
]}

This is how I try to setup the datasource and Grid:
var ds = new kendo.data.DataSource({
    transport: {
        read: {
        url: "http://localhost:10040/.functions.portlets/services-rest/countriesservice/countriesuk",
        dataType: "json"
            }
        },
    schema: {
        data: "country",
        model: {   
        fields: {
            codeLong: { type: "string" },
            codeShort: { type: "string" },
            name: { type: "string" }
    }
    }
     
    }
});
 
 
                         
 $("#grid").kendoGrid({
          dataSource: ds,
           height: 280,
           scrollable: {
                       virtual: true
                     },
           columns: [
                            { field:"codeLong", title: "codeLong" },
                            { field:"codeShort", title: "codeShort" },
                            { field:"name", title: "name" },
                             
                        ]
                  });
           
            });

I can see the GET request being carried out in FireBug, but the Grid remains empty.
Any suggestions?

I have one further question:
Is it possible to omit the data parameter, and leave out the "root" element?
I would like to be able to read json like this:

[{"codeLong":"AUT","codeShort":"AT","name":"Austria"},
{"codeLong":"BEL","codeShort":"BE","name":"Belgium"},
{"codeLong":"BGR","codeShort":"BG","name":"Bulgaria"}]

/Thomas
Thomas
Top achievements
Rank 1
 answered on 19 Apr 2012
2 answers
317 views
Hi,
I have a problem in binding JSON data with Kendo Pie Chart.
I have data source where I have supplied the url of my service with method name, that is getting me the data from server. I can see the data is returning from the server when I paste that url in my firefox  browser. I am also supplying the field name to the grid but not getting my chart displayed. It works fine when i supply hard coded array to it.
Could please anyone help me? Following is the code

    <div id= "kendoChart" style="width:50%; float:right; height:450px; margin-top:-20"></div>
    <script type="text/javascript">
        //var rtData = [3, 15, 30, 45, 92];
        var chartDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/DomainService/ContactedChartDomainService.svc/json/GetContactedChartViews",
                    dataType: "json"
                },
                schema:
                        {
                            data: "GetContactedChartViewsResult.RootResults"
                        }
            }
                });

        $(function () {
            $("#kendoChart").kendoChart({
                dataSource: chartDataSource,
                title: { text: "Stats" },
                seriesDefault: {
                    type: "pie"
                },
                series: [
                {
                    field: "Occurances",
                    categoryField: "ContactedName"
                    //type: "pie"
                }],

                tooltip: {
                    visible: true
                }
            });
        });
    </script>
    </div>

my JSON out put is as follow
{"GetContactedChartViewsResult":{"TotalCount":3,"RootResults":[
{"ContactedID":1,"ContactedName":"No","Occurances":5},
{"ContactedID":2,"ContactedName":"Under Consideration","Occurances":1},
{"ContactedID":3,"ContactedName":"Follow Up","Occurances":11}]}}

Kind Regards,
Waseem

Eloy
Top achievements
Rank 1
 answered on 19 Apr 2012
0 answers
98 views
Hi,

I'm just wondering on the best way of doing this. I have a scenario where I need to go back into a screen and edit details in which a file has been uploaded using a Kendo Uploader. Now, obviously upon editing this, the file needs to be displayed (and the remove icon showed) when the user goes back to the screen.

Is there a way of telling the Uploader to pre-load files (I'm guessing using file name + id) so I can achieve my goal here?

Any help would be greatly appreciated.
Chris
Top achievements
Rank 1
 asked on 19 Apr 2012
0 answers
106 views
What I want to achieve is, while having a grid with one of the columns named "Priority" set to integer, is whenever I change that row value to update all the "priority" values in the other rows to match the new change. Can this be done on key press or loose focus?

example:
having:

3,
1,
2,

If i change the value 1 to 2: the values should update to:

3,
2,
1

Thanks

Mircea
Top achievements
Rank 1
 asked on 19 Apr 2012
6 answers
123 views
If you take a look at the following jsfiddle (using KendoUI 2011.3.1129)
http://jsfiddle.net/xjLYs/3/

If you drag the right splitter then it lines up properly with your mouse.

A second jsfiddle (using 2012.1.322)
http://jsfiddle.net/JfwNk/2/

If you drag the right splitter it does NOT line up with your mouse (it is offset to the left).

I have tried both Chrome and IE9.

Could I get any help with a fix for this?
Dimo
Telerik team
 answered on 19 Apr 2012
7 answers
806 views
Hi,

I'm trying to bridge 2 samples from your demo library:

http://demos.kendoui.com/web/mvvm/source.html

and

http://demos.kendoui.com/web/mvvm/remote-binding.html

Basically, I want to use source binding on a template (as in the source and template binding sample), but instead of using static data I want to use a DataSource (as in the Remote binding sample).

So, following your code, I came up with this:
<ul id="list" data-template="ul-template" data-bind="source: theView"></ul>
   <script id="ul-template" type="text/x-kendo-template">
   <li>
       id: <span data-bind="text: ID"></span>
       name: <span data-bind="text: Name"></span>
   </li>
   </script>

var a = kendo.observable({
    theList: new kendo.data.DataSource({
        transport: {
            read: "/api/building"
        },
        change: function () {
            a.theView = this.view();
            kendo.bind($("#list"), a);
        },
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: false
                    },
                    Name: {
                        editable: true,
                        nullable: true
                    }
                }
            }
        }
    }),
    theView: {}
});
 
var app = Sammy('#main', function () {
    // define a 'get' route that will be triggered at '#/path'
    this.get('#/path', function () {
        a.theList.read();
    });
 
    //default route, routes back to #/path
    this.get('', function () { this.app.runRoute('get', '#/path') });
 
});
 
$(document).ready(function () {
    //starts sammy
    app.run();
});

This will only work if I set the "source" binding on the template to "theView", but not if I set it to "theList", so this leads me to ask if I should be able to bind directly to a DataSource object with the source binding ?

In the Remote binding sample, you set the source binding of the select element directly to the modeview's DataSource, but this doesn't seem to work for list elements.

Am I doing something wrong, or maybe missing something ?

Thanks

Rhys
Top achievements
Rank 1
 answered on 19 Apr 2012
0 answers
177 views
Hi, 

   I had a 4 panels in 2 of the panels i had kendo grid. I had a maximise and minimise functionality for the panels.So i had to give the width in percentages (some thing like 48%). and the width and the height calculation is based upon the window height and the width. So can i give the width of the kendo grid in percentages as well as the column widths in percentages...
Swetha
Top achievements
Rank 1
 asked on 19 Apr 2012
5 answers
246 views

Hello,

I am trying to implement a scenario of swapping values between the list boxes using the drag & drop feature. A snap shot of what's to be done is displayed in the attachment "Task.jpg" 

The Drag & Drop feature works perfectly fine in Firefox, but doesn’t works at all in Chrome & IE (7 & 8). 

The key aspects here are:

  1. In Chrome and IE9, Items in ListBox1 and ListBox2 are not getting selected by mouse, but can be selected using the tab keys. In this case even the swapping works the items are selected
  2. Also observed a weird behavior in IE 7 & 8. It works first in IE & then stops working. Once we minimize & restore the IE browser it again starts working.
  3. The written code works perfectly fine in Firefox.

To further provide you the details on the implementation, the created code is added to jsFiddle at the location http://jsfiddle.net/ravisingh/5B6mq/1/ . Also attached with the post are the images of Chrome & Firefox while debugging the issue.

Thanks & Regards,

Manoj Kapoor


Manoj Kapoor
Top achievements
Rank 2
 answered on 19 Apr 2012
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?