grouplist does not display entries when using dhx.ready

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.

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?

Anyone? :neutral_face:

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.

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

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>

Hello,

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

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