Telerik Forums
Kendo UI for jQuery Forum
9 answers
612 views
I'm trying to get a DropDownList to work in my mobile application and when I set the script reference to kendo.all.min.js, I get a blank view.  But when I change it to kendo.mobile.min.js, the view renders properly but I don't get my DropDownList.  Any thoughts?

Here is my mobile layout head section.

<link href="@Url.Content("~/Content/kendo/2013.2.801/kendo.common.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/kendo/2013.2.801/kendo.default.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/kendo/2013.2.801/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/mobile/mobile-styles.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/kendo/2013.2.801/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.801/kendo.all.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2.min.js")" type="text/javascript"></script>
Here is my loadGroups() javascript method.  It doesn't get past the "if" statement - kendo.ui.DropDownList.

01.var body = $(".km-pane");
02. 
03.function loadGroups() {
04.    console.log("trying to load the groups...");
05.    if (kendo.ui.DropDownList) {
06.        $("#group-editor").kendoDropDownList({
07.            popup: { appendTo: body },
08.            animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") || body.hasClass("km-wp") ? "slideIn:up" : "slideIn:down" } },
09.            dataSource: {
10.                transport: {
11.                    url: '/api/group/getgroupsforuser',
12.                    type: 'GET',
13.                    dataType: 'json'
14.                }
15.            },
16.            dataTextField: "GroupName",
17.            dataValueField: "Id"
18.        });
19.    }
20.}
Any ideas how I can get a DropDownList to work in my mobile application?

Thanks.
Alexander Valchev
Telerik team
 answered on 30 Sep 2013
1 answer
137 views
We are using the MVC implementation of KendoUI.

I'm trying to create a form with grids/charts that are driven by whatever value is set in the drop down menu.

For instance the page has a datagrid to display all the visitors to a site, and a graph to model all that data but I need both the grid and the graph to be limited by what site is selected inside the drop down menu.

So if KendoUI is selected in the drop down menu I just want the grid to show all the vistors to KendoUI and the chart to only model the vistors to KendoUI.

How do I link the components together?

I tried using ViewBag to link the items but the problem is each time the user changes the drop down list value I am currently having to do a post back to retrieve the value and re-render the page.

What is the correct way to do this with KendoUI? How do I make a control dependent on another control?

Here is my drop down list, grid and chart:
@(Html.Kendo().DropDownList()
        .Name("ddlClient")
        .HtmlAttributes(new { style = "width: 273px; font-size: 1.5em;"})
        .DataTextField("ClientName")
        .DataValueField("ClientName")
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("GetClientList", "Home");
            }); 
        })
        .Events(e => e.Change("changeClient"))
        .Value(ViewBag.ClientName)
    )


@(Html.Kendo().Chart<KendoWithChart.Models.ActualHedgeRatio>()
                .Theme("BlueOpal")
                .Name("chartActualHedgeRatio")
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Right)
                )
                .ChartArea(chartArea => chartArea
                    .Background("transparent")
                )
                .SeriesDefaults(seriesDefaults =>
                    seriesDefaults.Bar().Stack(true)
                )
                .DataSource(ds => ds.Read(read => read.Action("GetActualHedgeRatioData", "Home")))
                .Series(series =>
                {
                    series.Bar(model => model.Strips);
                    series.Bar(model => model.Forwards);
                    series.Bar(model => model.Futures);
                    series.Bar(model => model.Swaps);
                    series.Bar(model => model.Swaptions);
                    series.Bar(model => model.LDFI);
                })
                .CategoryAxis(axis => axis
                    .Categories("Actual Hedge Ratio")
                    .MajorGridLines(lines => lines.Visible(false))
                )
                .ValueAxis(axis => axis
                    .Numeric()
                    .Line(line => line.Visible(false))
                )
                .Tooltip(tooltip => tooltip
                    .Visible(true)
                    .Format("{0}%")
                )
            )


@(Html.Kendo().Chart<KendoWithChart.Models.ActualHedgeRatioTimeSeries>()
    .Name("chartActualHedgeRatioTimeSeries")
    .Title("Actual Hedge Ratio")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .DataSource(ds => ds.Read(read => read.Action("GetActualHedgeRatioTimeSeriesData", "Home", new { ddlClient = @ViewBag.ClientName, dpkDate = @ViewBag.Date })))
    .Series(series =>
    {
        series.Area(model => model.Value1, model => model.Date).Name("Nuclear");
        series.Area(model => model.Value2, model => model.Date).Name("Hydro");
        series.Area(model => model.Value3, model => model.Date).Name("Wind");
    })
    .CategoryAxis(axis => axis
        .Date()
        .BaseUnit(ChartAxisBaseUnit.Days)
    )
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Format("{0:N0}"))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N0}")
    )
)




Georgi Krustev
Telerik team
 answered on 30 Sep 2013
11 answers
1.4K+ views
Jquery client validation  on "blur" and "keyup" and so on works only after the first submit attempt. Try the following scenario in attached application:
1.  Type correct number into field "Count2"
2. Click outside the numericbox to loose focus
3. Clear the numericbox. Validation message "Field is required" does not appear.
3. Click outside the numericbox to loose focus. Validation message "Field is required" does not appear.
4. Click submit button. Validation message "Field is required" appears. From this moment validation begins working as expected.
5. Start to type correct number. Validation message disappears.
6. Clear the numeric box. Validation message appears again

Why  validation message does not appear at steps 3 and 4? It appears correctly at step 3 for simple HTML text input and even for Kendo datepciker, but not for Kendo numericbox.


Alexander Valchev
Telerik team
 answered on 30 Sep 2013
3 answers
157 views
Hi, 

I've got the following code for my tabs trip, and the icons appear properly when loaded into Safari or Firefox, but when using an iOS 7 device they are not appearing correctly.  The attached screenshot shows how they appear on the iOS 7 device. 

The code for the tabs trip is embedded in a layout.  
Here's the gist showing the relevant code:
  https://gist.github.com/johncclayton/54ba76aa355d8ea74475

I'm using KendoUI mob version: 2013.2.923

Thanks!











Kamen Bundev
Telerik team
 answered on 30 Sep 2013
7 answers
142 views
Hi,

1. "cancel changes" also deletes saved records.
2. dirty flags disappear on "add new record" click without saving the edits

Kind regards
Axel

Nikolay Rusev
Telerik team
 answered on 30 Sep 2013
1 answer
844 views
Hi,

I would like to trigger a function on lost focus for ComboBox separately from change event. Meaning I would like to call one function on change event, but another on lost focus.

Is that possible?

Best regards
Kiril Nikolov
Telerik team
 answered on 30 Sep 2013
16 answers
706 views
My javascript code was working fine before I upgraded my kendo.mobile.js to v2013.1.514.

Now, when I attempt to use the app object to navigate to a remote view, I get a javascript error "Cannot call method 'navigate' of undefined".  I debugged the issue and found that the error is being thrown from kendo.mobile.js "this.pane.navigate(url, transition);"  this.pane is undefined.

Is there anything I need to change to get this to work with the new version of kendo.mobile?

<script>
    var isLoggedIn = false;
    var app = new kendo.mobile.Application($(document.body), {
         initial: "rootView"
     });
     
    function verifyLogin() {
        app.navigate("http://192.168.1.129/Mobile/Account/Login");
    }
</script>

Kiril Nikolov
Telerik team
 answered on 30 Sep 2013
3 answers
1.3K+ views
At the moment, a detail tempate expands when clicking the little arrow to the left of the row.

I've look at the events/config/methods available for a grid and had a tinker but cannot work out how I would expand the detail template when clicking on a row and not necessarily the arrow. Calling the method that contains the logic for the 'detailInit' works, but you can't attach the events required like 'detailRow' for example.

Any ideas?
Rene
Top achievements
Rank 1
 answered on 29 Sep 2013
1 answer
312 views
I have tried this a couple of ways but the styling of the switch is not right.  First with the "Blank" template and manually adding my own kendo files, and then with the Kendo Mobile template.  The result is the same with both templates and also with the flat skin.

http://jsfiddle.net/jeangentile/nnXQm/

Kendo UI Mobile 2013.2.918
Jquery 1.9.1
Cordova 3.0

In all cases, the "on" position of the switch seems to be too far to the right, leaving some of the "off" background visible.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="kendo/kendo.icenium.min.css" />
        <title>Hello World</title>
    </head>
    <body>
        
        <div class="app">
            <ul>
                <li>Password never expires <input id="wink-switch" /></li>
            </ul>
        </div>

        <script type="text/javascript" src="cordova.js"></script>
        <script src="kendo/jquery.min.js"></script>
        <script src="kendo/kendo.mobile.min.js"></script>

        <script type="text/javascript">

            var mobileApp = new kendo.mobile.Application(document.body, { 
                skin: "flat"
            });
            
            $("#wink-switch").kendoMobileSwitch();
        
        </script>
    </body>
</html>






Jean
Top achievements
Rank 1
 answered on 29 Sep 2013
8 answers
678 views
Hello,

I have a data set similar to this:

Name:Joe Smith,  Rank:Captain, RankNum: 3
Name:Jane Doe,  Rank:Chief,     RankNum: 1
Name:Paul Smith,Rank:FF,         RankNum:4

I have a datasource that pulls into a MobileUI ListView.  What I am having an issue is that I am grouping the data based on Rank, but I want the ListView to be sorted by RankNum.  If I just apply the sort with no grouping the ListView displays sorted by RankNum, but if I add a group then I loose my sort.  Is there a way to solve this? 
Ralph
Top achievements
Rank 1
 answered on 28 Sep 2013
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
Drag and Drop
Map
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Rakhee
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?