Internal Link from Database

[James]

Hi!

I have a link that Kendo Mobile can't render. I wonder how can I activate an internal link that is saved in my database which is generated by data-show? 

Here in an example code:

<div data-role="view" id="page-skade" data-title="" data-show="pageShow" data-model="pageViewModel">
    
        <header data-role="header">
            <div data-role="navbar">
                <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                <span data-role="view-title"></span>
            </div>
        </header>
        
        <h1 data-bind="text: title"></h1>
        <p data-bind="html: content"></p> <!-- THIS CONTENT IS QUERIED FROM SQLITE: CONTENT CONTAINS INTERNAL LINK -->
        
    </div>

Best regards,
James

[Stefan Dobrev]

Hi James,

In order to help you can you please create a small JSBin example with dummy data that illustrates your exact scenario. Using it we will be able to collaborate and point you in the right direction.

All the best,
Stefan Dobrev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[James]

Hi Stefan!  

Here is my JSBin example http://jsbin.com/unubec/2/

1. Click the list-view link
2. Scroll down and you will see a link called "LUFTVEI". That link should render as Kendo mobile button.

Pointers:
-  I am using Wordpress as CMS and I created a shotcode for button links (data-role="button") but kendo mobile cannot render the look of the button
- The Wp data is synced into the mobile's WebSQL (SQLite)
- The link works but it will not render the button links. (This is the issue)

Is there any special thing that I need to do? I hope there is a solution for this.

best regards,
James

[Stefan Dobrev]

Hello James,

The trick to make this work is to initialize Kendo mobile for your dynamic content. You can do so by calling kendo.mobile.init() function. Here is an updated snippet from your code:

db.transaction(function(tx) {
    tx.executeSql('SELECT * from forstehjelp WHERE id = ' + id, [],
        function(tx, result) {

            for (var i = 0; i < result.rows.length; i++) {
                data[i] = result.rows.item(i);
            }
            forstehjelpViewModel.setValues.call(forstehjelpViewModel, id, data);
           kendo.mobile.init($("#content", arguments.view));
    });
});

Please note that I have added an id="content" for the element that is bound to the content field.

You can find more about data attribute initialization in Kendo's documentation here.

Hope this helps,
Stefan Dobrev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[James]

Big big help! Thanks! 

[James]

Hi Stefan!

I am running into an issue. I hope you have a solution for this. I am dynamically loading data into one page (#page-forstehjelp).

The issue:
Loading the first time will render the buttons correctly but if I will load another content, the buttons will not render anymore.

Check my previous JsBin. I added a second listview-link the uses the same page(#page-forstehjelp). Seems like it works in JsBin.The buttons are rendering on the second page view.  Do you know what the problem is causing in the Icenium simulator and into the actual phones?

best regards,
James

[Stefan Dobrev]

Hello James,

I'm not sure what might cause this behavior. Maybe it is a timing issue and you have to use setTimeout for the init. Have you tried to debug your code using the debug tools in the Simulator?

 

Regards,
Stefan Dobrev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[James]

Hi Stefan!

Thanks! 

Tried this but no luck
setTimeout(kendo.mobile.init($("#page-forstehjelp", arguments.view)),5000);

James

[Steve]

Hi James,

Your JsBin example no longer seems to work, so please either update it or provide us with a project that exhibits the issue, so we can advise you accordingly. Have you tried to debug your code via the simulator tools as my colleague asked?

Kind regards,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[James]

Hey Steve!

Here is the new link. http://jsbin.com/ugovov/3/edit

James

[Steve]

Hi James,

Thank you for the new link, however we're not sure we understand what is supposed to happen and we can no longer find a "Falsk krupp" button, which was what you referred to in your original post. Can you post a short video or step by step instructions how to replicate the issue?

In general, since your inquiry seems to be more related to Kendo UI than Icenium, we believe that you should find more relevant information and help from the community or Kendo support in the Kendo forums.

Thank you for the understanding.

All the best,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[James]

Sorry for misleading you. Anyway, I can address this issue directly to Kendo UI.

James