Telerik Forums
Kendo UI for jQuery Forum
0 answers
100 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
198 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
661 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
322 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
103 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
109 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
128 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
835 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
182 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
248 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
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?