Questions on Kendo UI for jQuery Forum

4 answers

258 views

Databound Event

Hi everyone, I would like to make a request to the team.
Is it possible to have a databound event for the drop down list, just like the grid?
It would be really useful when you have more 2 dropdowns, such as country/state, and state refreshes based on the country. Usually you need to reset the selection after the dropdown has been repopulated, and so that event would be great.

Hope you consider it!

Cheers,
Andrés

DropDownList

answered on 21 Jan 2013

6 answers

382 views

[Solved] Binding to computed property

Hi,

i have something like this

var data = kendo.data.DataSource.create({ data: result.Products })
var viewModel = kendo.observable({dataSource: data});
kendo.bind($("#listview-templates"), viewModel, kendo.mobile.ui);

where result is the result of a service call, which has a list of Products , if i want to bind a property in my list view template , to say Price * Qty which are two properties in the product object , what is the best way to do it ? Whenever the qty or price changes the total should update

Thanks
.

MVVM

answered on 21 Jan 2013

4 answers

460 views

Getting space between KendoGrid toolbar and header

Team,

I want to create kendogrid with popup editing.

I was able to generate grid and when added toolbar: ["Create"] , I am getting huge gap between toolbar and header.

Am I missing something.

Help me in this regard.

Prasanna

Grid

answered on 21 Jan 2013

2 answers

356 views

[Solved] Grid Paging not properly

Hi,

I am rebinding datasource to Grid on click event of button but paging doesn't work properly.
My code is like this.

<!DOCTYPE html>
<html>
<head>
    <title>YouTube</title>
    <link href="Kendo/kendo.common.css" rel="stylesheet" type="text/css" />
    <link href="Kendo/kendo.default.css" rel="stylesheet" type="text/css" />
    <script src="Kendo/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Kendo/kendo.web.js" type="text/javascript"></script>
    <script src="Kendo/console.js" type="text/javascript"></script>
    <style scoped type="text/css">
        #clientsDb
        {
            width: 692px;
            height: 413px;
            margin: 30px auto;
            padding: 51px 4px 0 4px;
        }
    </style>
</head>
<body>
    <input id="txtSearch" type="text" />
    <input id="btnView" type="button" value="view" onclick="GetVideos(); return false;" />
    <div id="example" class="k-content">
        <div id="clientsDb">
            <div>
            </div>
            <table id="grid" style="height: 380px;">
                <thead>
                    <tr>
                        <th colspan="3">
                            Videos
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script id="rowTemplate" type="text/x-kendo-tmpl">
                <tr class="k-alt">
                    <td colspan="3">
                        <img src="${ media$group.media$thumbnail[1].url }" alt="${ title.$t }" />
                    <span> <a onclick="" href="${link[0].href}">Play</a>  </span>
                         
                    <br />
                        ${ title.$t }
                    </td>
                </tr>
        </script>
        <script type="text/javascript">
            function GetVideos() {
 
                var grid = $("#grid").data("kendoGrid");
               
                var template = kendo.template($("#rowTemplate").html());
                var dataSource = new kendo.data.DataSource({
 
                    transport: {
                        read: {
                            // the remote service url
                            url: "https://gdata.youtube.com/feeds/api/videos?alt=json&q=" + $("#txtSearch").val() + "&orderby=relevance",
                            // JSONP is required for cross-domain AJAX
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        data: "feed.entry"
                    },
                    change: function () { // subscribe to the CHANGE event of the data source
                        $("#grid tbody").html(kendo.render(template, this.view())); // populate the table
                    }
                , pageSize: 5,
                    pageable: true, serverPaging: true
                });
 
                dataSource.read();
                grid.refresh();
                return false;
 
            }
 
            $("#txtSearch").keydown(function (e) {
                if (e.keyCode === kendo.keys.ENTER) {
                    GetVideos();
                }
                if (e.keyCode === kendo.keys.TAB) {
                    GetVideos();
                }
            });
 
            $(document).ready(function () {
                $("#grid").kendoGrid({
                pageable: true, serverPaging: true,
                    dataSource: {
 
                        pageSize: 5
                    },
 
                    height: 500,
                    pageSize: 5,
                    groupable: false,
                    sortable: true,
                    filterable: true,
                    columnMenu: true,
                    reorderable: false,
                    resizable: true,
                    pageable: true,
                    pageable: {
                        pageSizes: [5, 10, 25, 50, 100]
                    },
                    scrollable: true
                });
 
                $("#txtSearch").focus();
            });
        </script>
    </div>
</body>
</html>

Please give solution for this problem.

Grid

answered on 21 Jan 2013

1 answer

118 views

Tab strip reset view scroll

I've got a pretty standard app layout with a tab strip at the bottom, and headers at the top. However the content of a lot of it is generated depending on an option on my home screen. When this option is changed and the screens re-populated, I'd like to reset the scroll of each view back to the top. However even though I've seen lots of threads about app.scroller and reset() etc. I can't seem to get the desired effect, it does seem to go back to the top, but then Iose my headers and tab strip etc...

General Discussions

answered on 21 Jan 2013

1 answer

803 views

How to change font size of tree nodes?

Hi,

I am trying to figure out the CSS that needs to be overriden to modify the font size of the nodes inside tree view component, Can you please let me know the CSS associated with it?

Thanks,
Barani

TreeView

answered on 21 Jan 2013

1 answer

104 views

Multiple clicks required for Input tag

I am using a input tag with file type.
Requires multiple click while choosing a file (minimum 5 to 6 clicks).
Is this the problem with css ?
Can someone please provide solution for this ?

General Discussions

answered on 21 Jan 2013

2 answers

432 views

Programmatic selection and change

For the case of user based selection of an item, the change event is fired.

For the case of programmatic selection by way of select(), value() or search() it appears that the change event is not fired.
Q: Is this a design feature ?
Q: If yes, would there be any reason not to use a programmatic _change() after the selection?

DropDownList

answered on 21 Jan 2013

1 answer

422 views

How to access custom data attributes in a Switch's data-change function

I've seen various comments on best practice for doing this, but nothing definitive (that I've found) on the proper way to do this.

Given this:

<input data-role="switch" data-change="switchChangedHandler" data-subscriptionId="10" id="switch1"/>

<input data-role="switch" data-change="switchChangedHandler" data-subscriptionId="9" id="switch2"/>

<input data-role="switch" data-change="switchChangedHandler" data-subscriptionId="8" id="switch3"/>

How best to access subscriptionId in the handler function?

function switchChangedHandler(e) {

// I've seen this in a forum example but is it really the best way?

var subscriptionId = e.sender.element.context.dataset.subscriptionId;

// How to best get it?

}

somehow the solution shown doesn't seem like the "Kendo" way.

Switch (Mobile)

answered on 21 Jan 2013

2 answers

158 views

Kendo vs Vs2012 and intellisense

Hi, I've searched much for this topic but I din't find a solution that works for me..

I'm developing a web site with html5/css 3/jquery and Kendo web.

I have a main page (aspx) that references all the global js like kendo, jquery and the vsdoc files.
than I have some userControl page (ashx) that does not reference the same file but just their own js (ex users.ashx with user.js)

now, the intellisense works fine in the main page (in a script tag) and just there...
any other js referenced from the main page does not have the intellisense on kendo (or jquery)...

do you have any idea on how to set vs to use kendo intellisense on every js page? (without referencing again the vsdoc file in every page)?

thanks to all!

General Discussions

answered on 21 Jan 2013