Telerik Forums
Kendo UI for jQuery Forum
5 answers
836 views
I am attempting to create wizard like view in which each page contains it's own viewmodel

I started out doing something like this to get the templates right: 
<div id="example" data-template="template" data-bind="source: locales"></div>
 
<script id="template" type="text/x-kendo-template">
   <div>
       <label data-bind="text: target"></label>
       <select data-text-field="Filename" data-value-field="Path" data-bind="value: Path, source:parent().parent().uploadedFiles" data-role="dropdownlist"></select>
   </div>
</script>
var viewModel = kendo.observable({
    uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}],
    locales: [{ target: 'German'}, { target: 'French'}, { target:  'Italian'}, { target:  'Japanese'}, { target: 'Chinese (Simplified)'}]
});
 
kendo.bind($("#example"), viewModel);
Everything works fine: http://jsfiddle.net/RyD54/

However, the subsequent pages need to have knowledge of the previous pages viewmodel's data in order to properly display options.

I have tried directly accessing the second viewmodel like this:
<div id="example" data-template="template" data-bind="source: locales"></div>
 
<script id="template" type="text/x-kendo-template">
   <div>
       <label data-bind="text: value"></label>
       <select data-text-field="Filename" data-value-field="Path" data-bind="value: Path, source:uploadedFiles" data-role="dropdownlist"></select>
   </div>
</script>
var viewModel2 = kendo.observable({
    selectedLocales: ['German', 'French', 'Italian', 'Japanese', 'Chinese (Simplified)']
});
 
var viewModel = kendo.observable({
    uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}],
    locales: viewModel2.selectedLocales
});
 
kendo.bind($("#example"), viewModel);
Which ends up producing garbage in the drop down lists. http://jsfiddle.net/LvyB3/

I have tried modifying the locales value to be a dependent observable, thinking that accessing the second viewmodel directly changes the scope:
var viewModel2 = kendo.observable({
    selectedLocales: ['German', 'French', 'Italian', 'Japanese', 'Chinese (Simplified)']
});
 
var viewModel = kendo.observable({
    uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}],
    locales: function() {
        return viewModel2.get("selectedLocales");
    }
});
 
kendo.bind($("#example"), viewModel);
But that produces the same garbage data. http://jsfiddle.net/yarut/

I'm not sure what I am doing wrong to access the uploadedFiles list properly.

Any help would be appreciated.

EDIT

The issue has become a bit more complicated: In production the list of source languages is going to be coming from a multi-select in the other viewmodel. My idea is to create a calculated field that builds a observableobject that contains the selectedLanguages, an instance of the uploadedFiles array and a selectedFile variable to hold the selection:

aspx:

<div id="example2">
    <h5>Target</h5>
    <select multiple="multiple" data-value-field="id" data-text-field="name" data-bind="source: availableLocales, value: selectedLocales"></select>
</div>
 
<div id="example">
    <div  data-template="template" data-bind="source: locales"></div>
</div>
 
<script id="template" type="text/x-kendo-template">
   <div>
       <label data-bind="text: target"></label>
       <select data-text-field="Filename" data-value-field="Path" data-bind="value: selectedFile, source:files" data-role="dropdownlist"></select>
   </div>
</script>

javascript:

var viewModel2 = kendo.observable({
    selectedLocales: [],
    availableLocales: [{id:1, name:'German'}, {id:2, name:'French'}, {id:3, name:'Italian'}, {id:4, name:'Japanese'}, {id:5, name:'Chinese (Simplified)'}]
});
 
var viewModel = kendo.observable({
    uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}],
    locales: function() {
        var selected = viewModel2.get("selectedLocales");
        var availableFiles = this.get("uploadedFiles");
        var processedLocales = [];
        for (var i = 0; i < selected.length ; i++) {
            processedLocales.push({ target: selected[i].get("name"), files: availableFiles, selectedFile: null });
        }
        return processedLocales;
    }
});
 
kendo.bind($("#example2"), viewModel2);
kendo.bind($("#example"), viewModel);

fiddle: http://jsfiddle.net/fHrVK/

Of course this doesn't work either...

cluengas
Top achievements
Rank 2
 answered on 09 Sep 2013
1 answer
129 views
The existing datasource seems to want to connect via PDO constructor with a direct path to a database file. As I do not know the direct path to my database file, how would I connect to a database using a MySQL connection string instead with a predefined server, username, password and database where the equivalent mysqli constructor would be: 

new mysqli($server, $username, $password, $myDB);


Paul
Pavel
Top achievements
Rank 1
 answered on 09 Sep 2013
7 answers
1.0K+ views
After my DS rebinds the combo boxes I need to add a couple items at index 0 on the combos.

...so now I'm pretty sure I could just jQuery them in there...is that the proper way??

**EDIT** I'm sorry, this should be in the DropDownList area!...same question though :)

Steve
Nicklas
Top achievements
Rank 1
 answered on 09 Sep 2013
2 answers
167 views
Hello,

I've developed a web application that has data stored on a remote SQL*Server database. I now want to create a mobile iOS app (native feel, but using Kendo) that will allow:
1. For the user to 'log-in' and be authenticated using a username/password stored in the SQL*Server app
2. Whilst connected to the internet/SQL*Server, download a list of data elements from the database from about 5 tables. This could be down by using a 'Refresh' or 'Update' button
3. Disconnect from the database (i.e. I can't assume that access to the database it possible) and then use the data from the database that is now locally stored. This data need to be available should the user close the apps and restart it
4. Execute a sequence of updates using the app and then post certain updates back to the database once the internet connection is re-established.    

Is the above functionality possible with Kendo?

Thanks,
Nick
Dean
Top achievements
Rank 1
 answered on 08 Sep 2013
0 answers
82 views
Hello,

I am working through the dojo tutorial using asp.net MVC.  I am able to see the kendo.web.min.js file, but it still doesn't properly create the autocomplete control.  Could you look at my code and see what I am doing wrong?  Thanks!

Master Layout.cshtml page:

<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Styles/kendo.silver.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        @RenderBody()
    </div>
    <script src="@Url.Content("~/Scripts/Custom.js")" type="text/javascript"></script>
</body>
</html>
Custom.js file (where I call the auto complete wiget:

$(document).ready(function () {
    $(function () {
        $("countriesAutoComplete").kendoAutoComplete();
    });
});

.cshtml page that tries to use the autocomplete widget:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
       <p>
           Country: <input id="countriesAutoComplete" class="k-input" />
       </p>
    </div>
    <script type="text/javascript" src="~/Scripts/Custom.js"></script>
</body>
</html>
When I assign the class "k-input" it doesnt change styles like it does in the tutorial.  I checked to make sure the stylesheet is being sent to the browser.
Colin
Top achievements
Rank 1
 asked on 08 Sep 2013
7 answers
441 views
HELLO I HAVE APPLICATION MOBILE IN RAZOR ASP.NET

I HAVE HOMECONTROLLER WITH THIS ACTION

PUBLIC ACTIONRESULT HELLO()
{
RETURN VIEW()
}

I WANT TO CALL IT  IN BUTTON CLICK
HOW CAN I DO????????
<script>
FUNCTIONCLICK (e)
{
     //CALL home, hello???????????????????????????????????????????????
}
</script>

THANK YOU
E
Top achievements
Rank 1
 answered on 06 Sep 2013
2 answers
246 views
What I am trying to do is have a tooltip (floating to the right of input) that has content that can change while it is open. I have this working for the most part by calling refresh on the tooltip. The problem occurs when the text I am replacing was larger and had a larger text bubble with a callout at the center. When the text gets refreshed to something smaller, the bubble shrinks appropriately, but the location of the tooltip does not change, leaving the callout hanging far below the tooltip text bubble.

I have tried to fix this by hiding and then showing the target tooltip but that fails to open the tooltip.

Any ideas how i would solve this issue?
Paul
Top achievements
Rank 1
 answered on 06 Sep 2013
2 answers
165 views
Per the Kendo TreeView documentation for the navigate event: "Triggered when the user moves the focus on another node"

There are two ways to change focus: one by using the keyboard, and another by right clicking.  The event *does* fire for the keyboard navigation, but not if you change focus by right clicking.

This can be demonstrated pretty easily by using the Kendo TreeView "events" demo.
http://demos.kendoui.com/web/treeview/events.html
Alex Gyoshev
Telerik team
 answered on 06 Sep 2013
1 answer
93 views
Hi,

When I open a popver, I am able to drag the view underneath up and down on a IPad using phonegap. I cant repro this in the browser.
The view is not scrolling, rather the whole view including headers and footers can be shifted up and down showing black spaces. Also the popover half disappears while doing that. When I lift my finger everything is back to normal.

My apologies for the rambling explanation.

Any ideas?

Heinrich
Kiril Nikolov
Telerik team
 answered on 06 Sep 2013
1 answer
153 views
Hello,

I'm using Kendo UI MVC (the latest build as of 9/4/2013).
I have problems setting the XAxis lables to strings that represent dates in my database.
The Json that I feed to the chart has  MediaWeek as string date that is the XAxis label.
[
    {
        "Id": 1,
        "ClientCode": "JKLN",
        "ProductCode": "YYYY",
        "MediaWeek": "2012-12-31",
        "Spend": 3165,
        "Visits": 5704,
        "Orders": 422,
        "Revenue": 5774.29,
        "Cpv": 1.59,
        "Vpk": 717,
        "Mer": 0.92,
        "Conversion": 0.59
    },
....
]

The View looks like that:
        @(Html.Kendo().Chart<ContinuumData>()
              .Name("chart")
              .Legend(false)
              .HtmlAttributes(new {style = "height:235px;width:691px;"})
              .DataSource(ds => ds.Read(read => read.Action("Data_Read_Chart", "Continuum")))
              .Series(series => series.Bubble(
                  model => model.MediaWeek,
                  model => model.Revenue,
                  model => model.Mer,
                  model => model.ClientCode
                                    ))
              .XAxis(axis => axis
                                 .Date()
                                 .Labels(labels => labels
                                                        .Format("{0:MM/dd/yyyy}")))
              .YAxis(axis => axis
                                 .Numeric()
                                 .Labels(labels => labels
                                                       .Format("{0:N0}")
                                 )
                                 .Line(line => line
                                                   .Width(0)
                                 )
              )
              .Tooltip(tooltip => tooltip
                                      .Visible(true)
                                      .Format("{3}: {2:N0} MER")
                                      .Opacity(1)
              )
              .Theme("Moonlight")
              )

I also attached the screenshot of the chart with all bubbles clumped at 0 for the XAxis...

I could also change the type of the MediaWeek to DateTime if that helps....

If you guys could guide me I would be very grateful. 

Thanks,
-Arek
Hristo Germanov
Telerik team
 answered on 06 Sep 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?