Questions on Kendo UI for jQuery Forum

2 answers

354 views

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

799 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

103 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

431 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

418 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

157 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

3 answers

322 views

Splitter panes defined with data attributes

I'm just getting started with a Kendo UI evaluation and am trying to define a splitter using data attributes (vs. the jquery .kendoSplitter() approach), but can't find examples of how to define the panes this way. I'm trying to set up simple 2-panes, 50/50 split.

Thanks in advance.

Splitter

answered on 21 Jan 2013

4 answers

214 views

Dublicate Node Delete

Hi all,

So I'm adding some duplicate nodes on my tree like this:

var fatherNode_DataItem = treeview.dataItem(treeview.select());

var nodeText = prompt("Please enter desired Node Name to be copied:","default");

var dataItem_toBeCopied = treeview.dataItem(treeview.findByText(nodeText));

fatherNode_DataItem.append(dataItem_toBeCopied);

So I get a copy of the node I inputed on the prompt.
Which means when I select one of the copies,all the node copies and the original are selected.
And if I change the dataItem attributes of one of the copies,all the dataItems are changed even though separate copies for each one of the copies is kept on the data Source.
I am ok with that,it's what I wanted.

The problem is that I want to delete one of the copies later,but If I try

var dataItem = treeview.dataItem(treeview.select());

treeview.remove(dataItem);

all the copies and the original are deleted alltogether!
I also tried:

$("#treeview").find(".k-state-selected").each(function() {

if(confirm("Delete: " + $(this).text() + " with Father: " + treeview.text(treeview.parent($(this).closest(".k-item"))))) {

treeview.remove($(this).closest(".k-item"));

}

});

But on the first "ok" of a confirm, every node copy along with the original gets deleted again...not only the copy that I clicked ok for...

Is there a way I can delete only one of the copies based on it's parent?? (the copies will never have the same parent that's why I want to select which one to delete based on their parents)

TreeView