Rollbase Portal CSS conflicts cause Kendo UI to behave stran

Posted by Husam Ceceli on 20-Oct-2015 03:03

I am trying to include a Kendo UI Grid into a portal in Rollbase.

I have tried removing all conflicting css files and js files in the header of the application.

I did that as follows:

$('head script[src*="prod1/css/bootstrap/js/bootstrap.min.js"]').remove();
$('head script[src*="prod1/js/select2.min.js"]').remove();
$('head script[src*="prod1/js/jquery-1.7.1.min.js"]').remove();
$('head script[src*="prod1/js/jquery-ui-1.8.18.custom.min.js"]').remove();

$('head link[href*="css/common/css/pacific-common.css?v=4.0.2.1"]').remove();
$('head link[href*="prod1/css/portaltheme.css?v=4.0.2.1"]').remove();
$('head link[href*="prod1/css/select2/select2.css"]').remove();
$('head link[href*="prod1/css/bootstrap/css/bootstrap.min.css"]').remove();
$('head link[href*="prod1/css/jquery-ui-1.8.18.custom.css"]').remove();

I still get css conflicts no matter what css and js I remove in the header file.

For example, I can't get Kendo Grid to show the caret icon which is meant filtering or sorting.

Edit: With the current state I face the following issues:

- Kendo Grid Icons not appearing

- Kendo UI Mobile scrolling bounce effect not working

- Half of the page is empty preventing me from making things full screen.

Rollbase - Forum

Posted by Sri Harsha on 29-Oct-2015 02:51

Hi Husam Ceceli,

Rollbase portal pages does not use the kendo framework yet. So, those pages do not have the references for the necessary JS/CSS resources that are used to by the kendo widgets. If those are properly added, you need not manually remove the other JS/CSS files like you said above.

So, with workarounds you were able to render a kendo grid in a portal page and seeing some issue or you were not able to see the grid at all ?

Below is what i have quickly tried.

1. Create a portal

2. Add the below content to the Header-And-Footer of the portal.

this will add the necessary CSS and JS files that are used by the kendo widgets

3. Create a generic page.

4. Add a HTML component and write a simple div element. <div id='testPortalGrid'></div>

5. Add a script component and write a script that executes on document.ready ($(document).ready(function () { ... }))

inside the document ready function, initialzie the kendo grid.

With the above steps i was able to create a kendo grid inside a Rollbase portal page. (screenshot below)

Does this help you. Please let us know if you need anything.

Regards,

Harsha.

All Replies

Posted by Thierry Ciot on 28-Oct-2015 15:53

We will investigate this soon.

Bear with us. thanks.