Telerik Forums
Kendo UI for jQuery Forum
3 answers
500 views
I have the following screen shot of a grid with a popup and cannot figure out how I place the label to the top of the grid rather than at the bottom. See attachment.

My popup has the following editor template:-

var textEditorInitialize = function (container, options) {
    $('<textarea style="width:200px;height:100px;" />')
        .appendTo(container);
};
Dimo
Telerik team
 answered on 11 Jul 2012
0 answers
181 views
How to achieve the alert or messagebox  function of.
Does not seem to find the alert control at kendo UI.
Do use the window to achieve 
Zhou
Top achievements
Rank 1
 asked on 11 Jul 2012
2 answers
218 views
http://jsfiddle.net/dvrvT/2/ 

In the JsFiddle example provided, when I specify the 'kendo.mobile.ui' parameter in the bind method, I do not see the templated items in my ListView.
Iliana Dyankova
Telerik team
 answered on 11 Jul 2012
1 answer
158 views
So I'll start by saying I'm brand new to Kendo UI Mobile, and I was walking through the Kendo Mobile UI tutorial and trying to get the datasource to load data from my local RailsApp. I'm running the mobile app on an Android Simulator and the data never returns...I just get a spinning circle at the bottom of the application. I'm not sure where I'm going wrong as I've copied and pasted the code from the Android version of the tutorial and changed it to match my local URLS ( I built it myself originally, but then decided to copy and paste when I ran into issues). Any help is greatly appreciated..Thanks

Here's my code:

<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">
 
 
 
 
    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e)
    {
      e.preventDefault();
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
 
 
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    for more details -jm */
    /*
    function handleOpenURL(url)
    {
        // TODO: do something with the url passed in.
    }
    */
 
 
    function onBodyLoad()
    {      
        document.addEventListener("deviceready", onDeviceReady, false);
    }
 
 
    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    for more details -jm */
    function onDeviceReady()
    {
        // do your thing!
    }
     
    </script>
</head>
<body onload= "onBodyLoad()">
<div data-role="view" data-init="getInfo" data-layout="app" data-title="info" id="info">
    <div id="news">News Goes Here</div>
</div>
<div data-role="view" data-layout="app" data-init="getSessions" data-title="scheudle" id="scheudle">
    Schedule Goes Here
    <ul id="sessions"></ul>
</div>
 
 
<div data-role="layout" data-id="app">
    <header data-role="header">
        <div data-role="navbar">Conference Tracker</div>
    </header>
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a href="#info" data-icon="info">Info</a>
            <a href="#scheudle" data-icon="recents">Schedule</a>
        </div>
    </footer>
</div>
 
 
<script type="text/x-kendo-template" id="sessionsTemplate">
    <div class="left">
            <div class="time"> ${formatted_time }</div>
            <div class="speaker">${speaker}</div>
    </div>
 
 
    <div class="title">${title}</div>
 
 
</script>
 
 
 <script>
 
 
        // creates the application UI
        var application = new kendo.mobile.Application($(document).body, { transition: "slide" });
 
 
        var infosUrl = "/infos.json"; //also tried full path here as well.
        var sessionsUrl = "/sessions.json";
 
 
        var getInfo = function() {
            // read from the remote data source
            $.get(infosUrl, function(data) {
                $.each(data, function() {
                    $("#news").append("<p class='info'>" + this.content + "</p>");
                });
            });
        }
 
 
        var getSessions = function() {
            $("#sessions").kendoMobileListView({
                dataSource: kendo.data.DataSource.create({
                    transport: {
                        read: sessionsUrl
                    },
                    group: "day"
                }),
                template: $("#sessionsTemplate").html()
            });
        }
 
 
    </script>
</body>
</html>
Georgi Krustev
Telerik team
 answered on 11 Jul 2012
3 answers
345 views
Hello,

I want to pass a RecordID to a child Window and then I want that child window to use this RecordID in the document ready function to load the rest of the form.

This is how I call the child window:
window.kendoWindow({
    content: {
        url: "order.aspx",
        data: {
            RecordID: 1234
        }
    }
});

On the server side, I'm able to set the RecordID in a Textbox (let's call it tbRecordID).  This is where it gets more complicated.

Usually, in order to get the tbRecordID value, you whould just get it directly using it's id in the order.aspx document ready function: 
$(document).ready(function () {
     myRecordID =$("#tbRecordID").val();
     //load components for myRecordID...
    
});

However, this won't work if you allow users to open more than one instance of the same window  (ex: lets say the the user want to see order 1, 17 and 53 side by side) because this would create an id conflict.

So the only option I can see for now is to add a class to the tbRecordID and the refer to it from the "loaded" window with a jQuery search.
$(document).ready(function () {
      var targetWindow = //I need a way to get a reference to the target window
 
      var myRecordID = targetWindow.find(".RecordIDClass").val();
 
      //load with myRecordID
 
 
});

So, is there a way to get a reference to the window that is behing loaded?

Or maybe there is an other way to achieve what I'm trying to do in the document .ready function?

Best regards,

Simon

Alex Gyoshev
Telerik team
 answered on 11 Jul 2012
0 answers
70 views
For someone building their first mobile app from scratch, does anyone have a recommendation on what type of app that is doable but will be a great learning experience?  Is Kendo UI the place to do this, or are there other recommendations?  Thanks in advance.

Chris
Top achievements
Rank 1
 asked on 11 Jul 2012
2 answers
71 views
Hi All,

I am new to this tool. Please let me know, Where I will find the tutorials for this tool?
Craig
Top achievements
Rank 1
 answered on 11 Jul 2012
0 answers
124 views
I am trying to entirely format a grid based on static HTML (i.e. no data binding). 

I have found it hard to find info on how to handle this scenario elegantly and how to properly set configuration attributes.

1 - One particular issue I have been struggling with is that I want to enable filtering on the grid, including for a date column, but do not want Kendo to touch the date format in the cells (or at least be able to control it).

So far I have been able to go to the <th> tag and add a data-type="date" attribute, which causes the filtering to behave properly, but have not been able to set the "format" of the data.  I was hoping that "data-format" on the th tag would work but did not. 

Due to the use case involved, I cannot roll this into defining the schema of the columns in JS/JSON, it needs to have the formatting defined within the HTML itself (i.e. data-format)

2 - I am also having to add dummy data-field attributes to every th to get them to sort and filter...I don't feel I should need to do this since the data rows are already there (perhaps if no data-field attr is specified there should be "dummy" values automatically?  that's all I'm doing)

3 - When trying to define paging, there is a gap left between the last row of a page and the footer paging bar.  Basically, it appears that the height of the grid without paging is applied (with all rows visible), and then it adds the paging in but does not shrink the grid to fit...


any help?
Paul
Top achievements
Rank 1
 asked on 10 Jul 2012
0 answers
143 views
Hello,

All the samples on MVVM show that, we fetch a datasource assign it to select list. The selected object in select list is then bound to view model.

e.g. in viewmodel we initailly set selectedProduct = null
the controls are then bound as 
<label>UnitPrice</label> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" />

Note the value field, it is bound to selectedProduct

Now, i dont have a dropdown on my form, i want to fetch data from server on readrequest and directly bind that to all controls.
So my transport has read method but i dont have a selectedProduct. I want to assign values from read transport directly to controls.

Is there a way to do this?

Please let me know if this is not clear, i'll attach code blocks.

Thanks,
Sushant
Sushant
Top achievements
Rank 1
 asked on 10 Jul 2012
0 answers
190 views
I just wanted to share an elegant solution I found for passing the group value to a button that handles picking the entire group:

"Group: #= value #, Count: #= count # <div data-val='#= value #' class='button black' onclick='GridPickGroup(this)'>Select Group</div>";

function GridPickGroup(button) {
    var value = $(button).data("val");
    var currentGroupRow = $(button).closest(".k-grouping-row");
    GridData.grid.select(currentGroupRow.nextUntil(".k-grouping-row"));
}
Dr.YSG
Top achievements
Rank 2
 asked on 10 Jul 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?