grouplist does not display entries when using dhx.ready

Discontinued products DHTMLX Touch
#1

I have a repro example snippet of code as posted below.

When I use the dhx.ready method to load my grouplist, there are entries in the list but the are black, they have no title:

i.imgur.com/9cIlZ.png

When I switch to using the jquery $(document).ready method, my grouplist is displayed correctly:

i.imgur.com/Fvzmx.png

Attached is some code to reproduce this. Note where I have the jquery and dhx ready methods at line 17 and 18. Alternate between these to see the unusual behaviour.

[code]

<script src="codebase/touchui.js" type="text/javascript"></script>

<script src="codebase/dhxscheduler_mobile.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="codebase/dhxscheduler_mobile.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    //dhx.ready(DefineUI);
    $(document).ready(DefineUI);

     //Build up and initialise our UI
    function DefineUI() {
        dhx.ui(DefineMenuList());
     }

    /* our menu definitions */

    var studentsMenu = [{ id: "addStudentItem", type: "file", name: "Add student" },
                    { id: "searchStudentsItem", type: "file", name: "Search students"}];

    var appointmentsMenu = [{ id: "bookAppointmentItem", type: "file", name: "Book appointment" },
                    { id: "viewAppointmentsItems", type: "file", name: "View appointments"}];


    var productsMenu = [{ id: "buyProductItem", type: "file", name: "Buy Product" },
                    { id: "viewProductsItem", type: "file", name: "View Products"}];

    var menuList = [
        { id: "studentGroup", type: "folder", title: "Students", item: studentsMenu },
        { id: "appointmentGroup", type: "folder", title: "Appointments", item: appointmentsMenu },
        { id: "productsGroup", type: "folder", title: "Products", item: productsMenu }
        ];

    function DefineMenuList() {
        var menu = {
            view: "grouplist",
            id: "menuList",
            select: true, // activate the possibility to choose a data item
            datatype: "json", // the type of data
            data: menuList,
            type: {
                templateItem: "#name#",
                templateGroup: "#title#",
                templateBack: "Back"
            }
        }
        return menu;
    }
</script>
[/code]

Any ideas what is going on? I have to use the dhx.ready method because the scheduler will not initialise properly without it.

#2

Is anyone able to look at this? I’m evaluating these products for potential use in our next major project but this appears to be a showstopper for us?

#3

Anyone? :neutral_face:

#4

Have checked it locally - the same sample code work correctly ( have uncommented the dhx.ready line )

If it still occurs for you - please provide a demo link.

#5

No! Un-comment out the dhx.ready line but then also comment out the $(document).ready() one to see the problem. I’m getting this in firefox 11 and in Chrome verion 21.0.1180.89 m

#6

For example, run the below code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
    <link href="codebase/touchui.css" rel="stylesheet" type="text/css" />

    <script src="codebase/touchui.js" type="text/javascript"></script>

    <script src="codebase/dhxscheduler_mobile.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="codebase/dhxscheduler_mobile.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        dhx.ready(DefineUI);
        //$(document).ready(DefineUI);

         //Build up and initialise our UI
        function DefineUI() {
            dhx.ui(DefineMenuList());
         }

        /* our menu definitions */

        var studentsMenu = [{ id: "addStudentItem", type: "file", name: "Add student" },
                        { id: "searchStudentsItem", type: "file", name: "Search students"}];

        var appointmentsMenu = [{ id: "bookAppointmentItem", type: "file", name: "Book appointment" },
                        { id: "viewAppointmentsItems", type: "file", name: "View appointments"}];


        var productsMenu = [{ id: "buyProductItem", type: "file", name: "Buy Product" },
                        { id: "viewProductsItem", type: "file", name: "View Products"}];

        var menuList = [
            { id: "studentGroup", type: "folder", title: "Students", item: studentsMenu },
            { id: "appointmentGroup", type: "folder", title: "Appointments", item: appointmentsMenu },
            { id: "productsGroup", type: "folder", title: "Products", item: productsMenu }
            ];

        function DefineMenuList() {
            var menu = {
                view: "grouplist",
                id: "menuList",
                select: true, // activate the possibility to choose a data item
                datatype: "json", // the type of data
                data: menuList,
                type: {
                    templateItem: "#name#",
                    templateGroup: "#title#",
                    templateBack: "Back"
                }
            }
            return menu;
        }
    </script>

</head>
<body>
</body>
</html>
#7

Hello,

we managed to recreate the problem. And I have attached the fixed library. Please try it.
dhxscheduler_mobile.zip (66.8 KB)

#8

This works great! Thanks for the patch, that’s our eval done - cheers! :smiley: