Grid in Cordova Application: All rows in a single Line

[Johann]

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

[Alexander Valchev]

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

 

 

[Johann]

Here is the screenshot of the Grid running inside an App.

[Alexander Valchev]

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

 

 

[Johann]

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.

[Alexander Valchev]

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

 

 

[Johann]

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

But on iPhone, the same app, works correctly.

[Alexander Valchev]

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

 

 

[Johann]

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

[Johann]

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

[Johann]

Hi,

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

With best regards

Johann

 

[Alexander Valchev]

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

 

 

[Alexander Valchev]

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

 

 

[Johann]

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

[Alexander Valchev]

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