jQuery UI Widgets Forums Layouts Kanban tooltip on kanban card hover

This topic contains 5 replies, has 2 voices, and was last updated by  banzine 2 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • tooltip on kanban card hover #123851

    banzine
    Participant

    Hi,

    Is it possible to use jqxtooltip with a jqxkanban populated from json values? I already have the tooltip text value in the json.
    Best regards 🙂

    • This topic was modified 2 months, 3 weeks ago by  banzine.
    tooltip on kanban card hover #123853

    Hi,

    Please see this example made for you: http://jsfiddle.net/gbdsze0m/1/
    I hope this helps!

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

    tooltip on kanban card hover #123854

    banzine
    Participant

    Thx a lot! Am i doing something wrong?

    $(document).ready(function () { 
        var url = "temperament.php";           
        var fields = [
            { name: 'id', map:'question_user_id', type: 'string' },
            { name: 'status', map: 'etat', type: 'string' },
            { name: 'hover', map: 'question_title', type: 'string'},
            { name: 'text', map: 'given_answer', type: 'string' },
            { name: 'resourceId', map: 'user_id', type: 'string' },
    
        ];
    
                 var source =
            {
                url: url,
                id: 'id',
                dataType: "json",
                dataFields: fields
            };    
    
            var dataAdapter = new $.jqx.dataAdapter(source, {
                LoadComplete: function(record){
                var record = dataAdapter.record;
                var data=[];
                var newDataItem={};
                //on récupere la longueur du tableau
                var recordLength = record.length;
                for(var i=0; i<recordLength; i++){
                    newDataItem.id = Math.floor(Math.random()*10000);
                    newDataItem.status = record[i].status;
                    newDataItem.content = record[i].resourceId;
                    newDataItem.hover = record[i].hover;                
                    newDataItem.text = record[i].text;
                    data.push(newDataItem);
                }
    
            return data;
            
           },
           loadError: function(jqXHR, status, error) {},
       });
       window.dataAdapter = dataAdapter;  
    
       var resourcesAdapterFunc = function () {
        var resourcesSource =
        {
            localData: [
                  { id: 0, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
                  { id: 1, name: "Andrew Fuller", image: "../../images/andrew.png" },
                  { id: 2, name: "Janet Leverling", image: "../../images/janet.png" },
                  { id: 3, name: "Steven Buchanan", image: "../../images/steven.png" },
                  { id: 4, name: "Nancy Davolio", image: "../../images/nancy.png" },
                  { id: 5, name: "Michael Buchanan", image: "../../images/Michael.png" },
                  { id: 6, name: "Margaret Buchanan", image: "../../images/margaret.png" },
                  { id: 7, name: "Robert Buchanan", image: "../../images/robert.png" },
                  { id: 8, name: "Laura Buchanan", image: "../../images/Laura.png" },
                  { id: 9, name: "Laura Buchanan", image: "../../images/Anne.png" }
            ],
            dataType: "array",
            dataFields: [
                 { name: "id", type: "number" },
                 { name: "name", type: "string" },
                 { name: "image", type: "string" },
                 { name: "common", type: "boolean" }
            ]
        };
    
        var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
        return resourcesDataAdapter;
    }
       
       var getIconClassName = function () {
        return "jqx-icon-plus-alt";
    }
    
       $('#table').jqxKanban({
            width: '100%',
            height: 800,
            template: "<div class='jqx-kanban-item' id=''>"
            + "<div class='jqx-icon jqx-icon-close-white jqx-kanban-item-template-content jqx-kanban-template-icon'></div>"
            + "<div class='jqx-kanban-item-text'></div>"
            + "<div style='display: none;' class='jqx-kanban-item-footer'></div>"
    + "</div>",
    
    resources: resourcesAdapterFunc(),
    source: dataAdapter,
    
              // editer un element a la volée
              itemRenderer: function (item,data) {
                //$(item).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px;'>" + resource.id + data.name + "</span>");
                //$(item).find(".jqx-kanban-item-text").css('background', item.id);
                item.on('dblclick', function (event) {
                    var contenu = $(event.target).text();
                    console.log(contenu);
                    var input = $("<textarea style='border: none; width: 100%; height:auto;' class='jqx-input' placeholder='" + contenu + "'>" + contenu  + "</textarea>");
                    var addToHeader = false;
                    var header = null;             
                    if (event.target.nodeName == "SPAN" && $(event.target).parent().hasClass('jqx-kanban-item-color-status')) {
                        var input = $("<input placeholder='test2' style='border: none; background: transparent; width: 80%; height:auto;' class='jqx-input'/>");
                        // add to header
                        header = event.target;
                        header.innerHTML = "";
                        input.val($(event.target).text());
                        $(header).append(input);
                        addToHeader = true;
                    }
                    if (!addToHeader) {
                        var textElement = item.find(".jqx-kanban-item-text");
                        input.val(textElement.text());
                        textElement[0].innerHTML = "";
                        textElement.append(input);
                    }
    
                    input.mousedown(function (event) {
    
                        event.stopPropagation();
                    });
                    input.mouseup(function (event) {
                        event.stopPropagation();
                    });   
    /*                 input.blur(function () {
                        var value = input.val();
                        if (!addToHeader) {
                            $("<span>" + value + "</span>").appendTo(textElement);
                        }
                        else {
                            header.innerHTML = value;
                        }
                        input.remove();
                    }); */
                    input.keydown(function (event) {
                        if (event.keyCode == 13) {
                            var texte = input.val()
                                $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                                $(event.target).remove();                     
                                $.ajax({
                                    url: "stage7edit.php",
                                    type: 'POST',
                                    cache: false,
                                    data: {
                                        itemid: data.id,
                                        content: texte		
                                    }
                                })
                        }
                    });
                    input.mousedown(function (event) {
                        if (event.keyCode == 13) {
                            var texte = input.val()
                                $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                                $(event.target).remove();                     
                                $.ajax({
                                    url: "stage7edit.php",
                                    type: 'POST',
                                    cache: false,
                                    data: {
                                        itemid: data.id,
                                        content: texte		
                                    }
                                })
                        }
                    });
                    input.focus();        
                });
            },
    
           columns: [
               { text: "A trier", iconClassName: getIconClassName(),  dataField:  "new", collapsible: false },
               { text: "Catégorie1", iconClassName: getIconClassName(),  dataField: "cat1", collapsible: false },
               { text: "Catégorie2", iconClassName: getIconClassName(),  dataField: "cat2", collapsible: false },
               { text: "Catégorie3", iconClassName: getIconClassName(),  dataField: "cat3", collapsible: false },
               { text: "Catégorie4", iconClassName: getIconClassName(),  dataField: "cat4", collapsible: false },
               { text: "Catégorie5", iconClassName: getIconClassName(),  dataField: "cat5", collapsible: false },
               { text: "Catégorie6", iconClassName: getIconClassName(),  dataField: "cat6", collapsible: false },
               { text: "Catégorie7", iconClassName: getIconClassName(),  dataField: "cat7", collapsible: false }                   
           ]
       });
    
       document.querySelectorAll('.jqx-kanban-item')
       .forEach(el => {
         const itemId = el.id.replace('table_', ''); //id=table_1_407 par exemple
         const tooltipContent = data
         .filter(item => item.id == itemId)[0]
         .hover;
         console.log(itemId);
         $(<code>#${el.id}</code>).jqxTooltip({
           content: <code>${tooltipContent}</code>,
           position: 'mouse',
           name: 'itemTooltip'
         });
       })
    
        $('#table').on('itemMoved', function (event) {
            var args = event.args;
            $.ajax({
                url: "stage7update.php",
                type: 'POST',
                cache: false,
                data: {
                    itemid: args.itemData.id,
                    column: args.newColumn.dataField,
                    userid: args.itemData.resourceId		
                }
            })
        });
    
    /*             // supprimer des cartes (non utilisé)
                $('#table').on("itemAttrClicked", function (event) {
                    var args = event.args;
                    if (args.attribute == "template") {
                        $('#table').jqxKanban('removeItem', args.item.id);
                    }
                });  */
    
                // ajouter un element
                var itemIndex = 0;
                $('#table').on('columnAttrClicked', function (event) {
                    var args = event.args;
                    if (args.attribute == "button") {
                        args.cancelToggle = true;
                        if (!args.column.collapsed) {
                            $('#table').jqxKanban('addItem', { status: 'new',
                                                               text: "<input placeholder='(Element)' style='width: 96%; margin-top:2px; border-radius: 3px; border-color: #ddd; line-height:20px; height: 20px;' class='jqx-input' id='newItem" + itemIndex + "' value=''/>",
                                                               resourceId: '1' });
                            var input = $("#newItem" + itemIndex);
                            input.mousedown(function (event) {
                                event.stopPropagation();
                            });
                            input.mouseup(function (event) {
                                event.stopPropagation();
                            });
                            input.keydown(function (event) {
                                if (event.keyCode == 13) {
                                    var texte = input.val();
                                    $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                                    $(event.target).remove();
                                   
                                    $.ajax({
                                        url: "stage7add.php",
                                        type: 'POST',
                                        cache: false,
                                        data: {
                                            itemid: "newItem" + itemIndex + Math.floor(Math.random()*10000),
                                            content: texte,
                                            column: args.column.dataField,
                                            indice: "temperament"	
                                        }
                                    })
                                }
                            });
                            input.focus();
                            itemIndex++;
    
                        }
    
                    }
    
                }); 
    
    });
    tooltip on kanban card hover #123855

    banzine
    Participant

    Seems i always get an empty nodelist while targeting ‘.jqx-kanban-item’ or while targeting every jqxclass ^^’

    Best regards

    tooltip on kanban card hover #123860

    Hi,

    May you try putting the tooltip initialization in the itemRenderer as shown here: http://jsfiddle.net/ox7q38at/
    I am waiting for you feedback!

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

    tooltip on kanban card hover #123863

    banzine
    Participant

    Yeah great idea! I made it work 🙂
    Here is the itemRenderer with Editelement & json element on hover 🙂 if it can help someone 🙂

          itemRenderer: function (item,data) {     
    
                    // editer un element a la volée
                    item.on('dblclick', function (event) {
                    var contenu = $(event.target).text();
                    console.log(contenu);
                    var input = $("<textarea style='border: none; width: 100%; height:auto;' class='jqx-input' placeholder='" + contenu + "'>" + contenu  + "</textarea>");
                    var addToHeader = false;
                    var header = null;             
                    if (event.target.nodeName == "SPAN" && $(event.target).parent().hasClass('jqx-kanban-item-color-status')) {
                        var input = $("<input placeholder='test2' style='border: none; background: transparent; width: 80%; height:auto;' class='jqx-input'/>");
                        // add to header
                        header = event.target;
                        header.innerHTML = "";
                        input.val($(event.target).text());
                        $(header).append(input);
                        addToHeader = true;
                    }
                    if (!addToHeader) {
                        var textElement = item.find(".jqx-kanban-item-text");
                        input.val(textElement.text());
                        textElement[0].innerHTML = "";
                        textElement.append(input);
                    }
    
                    input.mousedown(function (event) {
    
                        event.stopPropagation();
                    });
                    input.mouseup(function (event) {
                        event.stopPropagation();
                    });   
                    input.keydown(function (event) {
                        if (event.keyCode == 13) {
                            var texte = input.val()
                                $("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
                                $(event.target).remove();                     
                                $.ajax({
                                    url: "stage7edit.php",
                                    type: 'POST',
                                    cache: false,
                                    data: {
                                        itemid: data.id,
                                        content: texte		
                                    }
                                })
                        }
                    });
                    input.focus();        
                }); 
    
                //question au survol
                let itemId = item[0].id;
                itemId = itemId.replace('table_', '');
                const visu = dataAdapter.records;
                const tooltipContent = visu
                    .filter(item => item.id == itemId)[0]
                    .hover;   
                item.jqxTooltip({
                    content: <code>${tooltipContent}</code>,
                    position: 'mouse',
                    name: 'itemTooltip'
        });   
                
                        },

    Thx 😀

    • This reply was modified 2 months, 3 weeks ago by  banzine.
    • This reply was modified 2 months, 3 weeks ago by  banzine.
    • This reply was modified 2 months, 3 weeks ago by  banzine.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.