This is a migrated thread and some comments may be shown as answers.

Grid in Cordova Application: All rows in a single Line

14 Answers 98 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johann
Top achievements
Rank 1
Johann asked on 28 Oct 2015, 08:57 PM

Hi,

I try to use a Kendo UI Grid in a Cordova application. If I open the HTML file in browser it looks good. If I open the Cordova application the header and the footer of the Grid looks good too, but the body looks like all the values of the rows and columns are in a single line.

My HTML Code looks like this:

<kendo-grid options="mainGridOptions"></kendo-grid>
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#: uid #">
        <td><span>#: FirstName #</span></td>
        <td><span>#: LastName #</span></td>
        <td><span>#: Country #</span></td>
        <td><span>#: City #</span></td>
    </tr>
</script>

With regards,

Johann

14 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 30 Oct 2015, 02:23 PM
Hi Johann,

The issue that you described is not a known one. Do you use Kendo UI Mobile and AppBuilder or you developer another type of Cordova application? Can you provide screen shots which demonstrates the issue?

On a side note, it is recommended to use the AngularJS template syntax when developing AngularJS application.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Johann
Top achievements
Rank 1
answered on 02 Nov 2015, 03:09 PM
Here is the screenshot of the Grid running inside an App.
0
Alexander Valchev
Telerik team
answered on 04 Nov 2015, 03:15 PM
Hello Johann,

I am not sure what exactly goes wrong. Do you some mobile specific stylessheet which might interfere with Kendo styles? Do you have any not typical styles for <td> or <tr> elements, for example display: block?

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Johann
Top achievements
Rank 1
answered on 04 Nov 2015, 04:05 PM

This HTML Code will created at runtime for the Grid:

<div class="k-grid k-widget" data-role="grid" options="mainGridOptions" kendo-grid="">
    <table role="grid">
        <colgroup>
            <col style="width: 120px;">
                <col style="width: 120px;">
                    <col style="width: 120px;">
                        <col style="width: 120px;">
        </colgroup>
        <thead class="k-grid-header" role="rowgroup">
            <tr role="row">
                <th class="k-header ng-scope k-with-icon k-filterable" id="69535f48-2b16-4361-8789-e76926a9b994" role="columnheader" rowspan="1" data-role="columnsorter" data-index="0" data-title="First Name" data-field="FirstName"><a tabindex="-1" class="k-grid-filter" href="#"><span class="k-icon k-filter"></span></a><a class="k-link" href="#">First Name</a>
                </th>
                <th class="k-header ng-scope k-with-icon k-filterable" id="061ea52a-80c9-4ff5-94ce-cd04bca20299" role="columnheader" rowspan="1" data-role="columnsorter" data-index="1" data-title="Last Name" data-field="LastName"><a tabindex="-1" class="k-grid-filter" href="#"><span class="k-icon k-filter"></span></a><a class="k-link" href="#">Last Name</a>
                </th>
                <th class="k-header ng-scope k-with-icon k-filterable" id="b070ec5b-c42c-4027-b852-294bc2ff5a75" role="columnheader" rowspan="1" data-role="columnsorter" data-index="2" data-field="Country"><a tabindex="-1" class="k-grid-filter" href="#"><span class="k-icon k-filter"></span></a><a class="k-link" href="#">Country</a>
                </th>
                <th class="k-header ng-scope k-with-icon k-filterable" id="36f7ec08-cf1e-4f92-b3e9-28c4b7219fb6" role="columnheader" rowspan="1" data-role="columnsorter" data-index="3" data-field="City"><a tabindex="-1" class="k-grid-filter" href="#"><span class="k-icon k-filter"></span></a><a class="k-link" href="#">City</a>
                </th>
            </tr>
        </thead>
        <tbody role="rowgroup">
            <span class="ng-scope">Peter</span>
            <span class="ng-scope">Smith</span>
            <span class="ng-scope">USA</span>
            <span class="ng-scope">Los Angelos</span>
            <span class="ng-scope">John</span>
            <span class="ng-scope">Freeman</span>
            <span class="ng-scope">USA</span>
            <span class="ng-scope">New York</span>
            <span class="ng-scope">Kate</span>
            <span class="ng-scope">James</span>
            <span class="ng-scope">England</span>
            <span class="ng-scope">Dover</span>
            <span class="ng-scope">Ian</span>
            <span class="ng-scope">Johnson</span>
            <span class="ng-scope">Ireland</span>
            <span class="ng-scope">Dublin</span>
            <span class="ng-scope">Pablo</span>
            <span class="ng-scope">Rodr�guez</span>
            <span class="ng-scope">Brazil</span>
            <span class="ng-scope">S�o Paulo</span>
 
        </tbody>
    </table>
    <div class="k-pager-wrap k-grid-pager k-widget k-floatwrap" data-role="pager"><a tabindex="-1" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" href="#" data-page="1"><span class="k-icon k-i-seek-w">Go to the first page</span></a><a tabindex="-1" title="Go to the previous page" class="k-link k-pager-nav  k-state-disabled"
        href="#" data-page="1"><span class="k-icon k-i-arrow-w">Go to the previous page</span></a>
        <ul class="k-pager-numbers k-reset">
            <li class="k-current-page"><span class="k-link k-pager-nav">1</span>
            </li>
            <li><span class="k-state-selected">1</span>
            </li>
            <li><a tabindex="-1" class="k-link" href="#" data-page="2">2</a>
            </li>
        </ul><a tabindex="-1" title="Go to the next page" class="k-link k-pager-nav" href="#" data-page="2"><span class="k-icon k-i-arrow-e">Go to the next page</span></a><a tabindex="-1" title="Go to the last page" class="k-link k-pager-nav k-pager-last"
        href="#" data-page="2"><span class="k-icon k-i-seek-e">Go to the last page</span></a><span class="k-pager-info k-label">1 - 5 of 6 items</span>
    </div>
</div>

It looks like there are no <td> anymore.
0
Alexander Valchev
Telerik team
answered on 06 Nov 2015, 09:02 AM
Hi Johann,

The problem is that there are no <tr> and <td> elements in the table's tbody. This is not a standard Kendo Grid rendering, I suspect that some other directive modifies the HTML.

I suggest to exclude all 3rd party libraries that you use and trim the page source as much as possible to find out what causes the unusual rendering. There is no logic in the Kendo framework that will force rendering spans instead of <tr> with <td>. The only option is a user defined rowTemplate.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Johann
Top achievements
Rank 1
answered on 23 Nov 2015, 05:01 PM

I could not find any Problems with other libraries. It looks still broken.

But on iPhone, the same app, works correctly.

0
Alexander Valchev
Telerik team
answered on 25 Nov 2015, 09:13 AM
Hello Johann,

Is it possible for you to isolate the Grid in a separate project that uses only AngularJS and Kendo UI? Does in this case the problem still persists? If yes, please provide the sample project so I can examine it on my side.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Johann
Top achievements
Rank 1
answered on 25 Nov 2015, 05:20 PM

Hello,

here is my isolated Cordova-Grid Sample.

You Need Visual Studio 2015 (with Cordova Tools) to open it. If you start the Project as any Windows platform Project you will see the described behavior.

With best regards,

Johann

0
Johann
Top achievements
Rank 1
answered on 25 Nov 2015, 05:29 PM
Oh, there is a Problem with uploading the file. The max allowed size to upload is 2 MB, The min zipped file size is 4.5 MB
0
Johann
Top achievements
Rank 1
answered on 26 Nov 2015, 08:01 PM

Hi,

you can download the extracted cordova application here: KendoUIGrid.zip

With best regards

Johann

 

0
Alexander Valchev
Telerik team
answered on 30 Nov 2015, 02:21 PM
Hello Johann,

I am writing to inform you that we have troubles to run the project. We are currently creating a Windows 8 + Visual Studio 2015 machine because the project cannot be ran on a PC with Windows 7.

I will write back to your as soon as we are able to check and examine the provided sample project.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alexander Valchev
Telerik team
answered on 01 Dec 2015, 03:51 PM
Hello Johann,

It turned out that in order to run the project you need a windows developer license.
Is it possible for you to isolate the scenario outside of a cordova application? If the problem is related to Kendo UI it will reproduce in a Dojo test page. This will also make the test process easier which will lead to faster resolving of the problem.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Johann
Top achievements
Rank 1
answered on 01 Dec 2015, 04:10 PM

Hi,

No that is not possible to reproduce this outside of a Cordova application. It works in a Website, it works in the same Cordova application on iOS but it doesn't work as a Cordova application on Windows.

With best regards

Johann

0
Alexander Valchev
Telerik team
answered on 03 Dec 2015, 10:07 AM
Hello Johann,

I was able to run and examine the sample project.

It seems that the behaviour is caused by the winstore-jscompat.js library. I removed everything else from the project and narrowed down the HTML markup to minimum.

<!DOCTYPE html>
<html>
   <head>
       <title></title>
 
       <link href="css/kendo.common.min.css" rel="stylesheet" />
       <link href="css/kendo.default.min.css" rel="stylesheet" />
 
       <script src="lib/winstore-jscompat.js"></script>
       <script src="lib/jquery.min.js"></script>
       <script src="lib/kendo.all.min.js"></script>
 
   </head>
   <body>
 
       <div id="grid"></div>
 
       <script>
           var data = [
               {
                   ID: 1,
                   FirstName: "Peter",
                   LastName: "Smith",
                   Country: "USA",
                   City: "Los Angelos"
               }
           ];
 
           $("#grid").kendoGrid({
               dataSource: {
                   data: data
               }
           });
       </script>
   </body>
</html>


Even with that minimal set-up the Grid table <tr> elements are not appended to the DOM. The same code, without winstore-jscompat.js will work in every modern browser.

My suggestion is to contact winstore-jscompat.js authors. Probably they will be able to give you insights why the <tr> and <td> elements are removed from the DOM.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Johann
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Johann
Top achievements
Rank 1
Share this question
or