Questions on Kendo UI for jQuery Forum

1 answer

465 views

Issue with grid group headers- doesn't Collapse after grouping

Hi,

I am using below code for the grid. I am getting below two issue

1) When grouping the columns, the group headers are expanded by default. I want to make them collapsed as soon as I do grouping on any column. Could someone help on this.
2) Also how can I find out the groupable column name, as I need to pass that column name to a different function for chart population.

Please help.

Here is code
---------------

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
              <script src="Scripts/kendo.web.min.js" type="text/javascript"></script>
                <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
      <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
</head>
<body>

        <div id="example" class="k-content">
            <div id="grid"> </div>
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            serverPaging: false,
                            serverSorting: false,
                            pageSize: 1000,
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                            },
                            group: {
                                field: "ShipCity", aggregates: [
                                        { field: "OrderID", aggregate: "count" },
                                        { field: "CustomerID", aggregate: "count" },
                                        { field: "ShipName", aggregate: "count" },
                                        { field: "ShipCity", aggregate: "count" }
                                     ]
                            },

                            aggregate: [{ field: "OrderID", aggregate: "count" },
                                         { field: "CustomerID", aggregate: "count" },
                                         { field: "ShipName", aggregate: "count" },
                            ]
                        },
                        height: 280,
                        scrollable: {
                            virtual: false
                        },
                        sortable: true,
                        groupable: true,
                        columns: [
                           { field: "OrderID", aggregates: "count", groupHeaderTemplate: "OrderID: #= value # (Count: #= count#)" },
                            { field: "CustomerID", aggregates: "count", groupHeaderTemplate: "CustomerID: #= value # (Count: #= count#)", footerTemplate: "Total Count: #=count#" },
                            { field: "ShipName", title: "Ship Name", aggregates: "count", groupHeaderTemplate: "ShipName: #= value # (Count: #= count#)" },
                            { field: "ShipCity", title: "Ship City", aggregates: "count", groupHeaderTemplate: "ShipCity: #= value # (Count: #= count#)" }
                        ],
                        databound: function () {
                            $("#grid").find(".k-icon.k-collapse").trigger("click");
                        }
                    });

                });

</script>
</div>

</body>
</html>

Grid

answered on 04 May 2012

1 answer

97 views

Rendering differences between IE and Chrome

I have created several drop downs and grids in a page, but notice that there is a significant difference between IE and Chrome. Namely, the filters do not show in IE, adn the drop downs don't look rounded like they do in Chrome.

When I look at the demos that you have on your site, it looks more like what I would expect. It seems as if it is only with my grids.

Am I doing something wrong?

General Discussions

answered on 04 May 2012

1 answer

473 views

Image zoom and pinch

Hello.

I show a report image in my application; this report is a png image. My problem is that as auser I wan't to scroll that image to view some part of the report. How can I zoom it? there is any js function that allow me that?

For reference here goes my code:

<div data-role="view" id="doc-Image" data-layout="default-layout" data-title="Report" >

<img id="doc-Image-DocumentImage" alt="Document Type" src="../Report/1" style="width: 100%;"/>

</div>

Thanks.
Arturo

Application

answered on 04 May 2012

1 answer

111 views

Grid edit mode on iOS issue

Hello,

I just had a look at the grid batch editing example on your demo page here: http://demos.kendoui.com/web/grid/editing.html and the editing doesn't seem to work on my iOS device - (iPad2 and iPhone 4 more specifically).

If you click on an editable cell, the iOS keyboard starts to popup (expected), then it quickly disappears again and resets the grid cell back to non-edit mode.

Is this a known issue?

Thanks
Marko

Grid

answered on 04 May 2012

2 answers

512 views

Issue with showing menu inside grid cell

I want to show menu inside one of the grid column, for all the rows.
Please see below my code (modified kendo row template example). This is displaying menu inside cell,
but when i expand it, it is not completely visible. Onlu the part of menu which fits in row height is visible
Please see attached screen shot

<!DOCTYPE html>
<html>
<head>
<title>Row template</title>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div id="example" class="k-content">
<table id="netflixTable">
<thead>
<tr>
<th>
Cover
</th>
<th>
Title
</th>
<th>
Rating
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
</td>
<td>
${ Name }
</td>
<td>
${ AverageRating }
</td>
<td>
<ul id="menu">
<li>Actions
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
</ul>
</li>
</ul>
</td>
</tr>
</script>
<script>
$(document).ready(function() {
$("#netflixTable").kendoGrid({
dataSource: {
type: "odata",
serverFiltering: true,
filter: [{
field: "Name",
operator: "contains",
value: "Star Wars"
},{
field: "BoxArt.SmallUrl",
operator: "neq",
value: null
}],
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
},
rowTemplate: kendo.template($("#rowTemplate").html()),
height: 600,
dataBound: function(e) {
// handle event
$("#menu").kendoMenu();
}
});
});
</script>
</div>

</body>
</html>

Grid

answered on 04 May 2012

3 answers

154 views

jQuery code not loaded when navigating to html file?

I have a very straightforward setup at the moment.
index.html has 2 links. Using jQuery I handle the .click event of the links and call app.navigate to load either "test.html" or "about.html". They both load correctly as far as static HTML goes, however anything inside of a jQuery block does not work.
For example on about.html I have a link with id="test". with the jQuery of :

$("#test").click(function(e){

alert('inside click');

});

it does not show an Alert. If I move the Alert as regular JS code it works or if I move the jQuery code and "test" link to the main view (index.html) it works.

So it seems pretty obvious that any jQuery code (or at least events) not in the index.html and referencing HTML elements that exist in the DOM at the moment won't work correctly.

Is this a known bug? It seems like an incredibly large oversight.

General Discussions

answered on 04 May 2012

1 answer

121 views

Specifying the "items" element name

For the TreeView control, is it possible to have a data structure where the sub-items belong to an element other than one called "items"? For example, if I have the following structure:

$("#treeView").kendoTreeView({

dataSource: [ { category: "A", nodes: [{name:"Node 1"}, {name:"Node 2"}]} ]

});

I know I can use a template for the "category" element at the top level, but I'm not sure how I can specify that the sub-items are in the "nodes" element.

<script id="treeview-template" type="text/kendo-ui-template">

# if (item.category) { #

#= item.category #

# } #

// How do I now tell it to render the "nodes" element as children to the category element?

</script>

TreeView

answered on 04 May 2012

0 answers

73 views

live() events ?

Is there a way for the observable to bind to a newly created dom element like live() does?

MVVM

asked on 04 May 2012

1 answer

134 views

Apply Paging in Template?

Hi,

How to apply paging in Template?

Thanks,
Mangesh

Templates

answered on 03 May 2012

3 answers

133 views

php, pdo, tpl and kendo

well I can successfully use php, pdo and kendo together but when I try to put kendo web widgets into TPL I get a Smarty compile error on something that works perfectly well in a php file.

should Kendo work in Smarty tpl files?

thanks,
Richard

General Discussions

answered on 03 May 2012