jQuery UI Widgets Forums Vue Question about "jqxTooltip" of vue component

This topic contains 5 replies, has 3 voices, and was last updated by  Hristo 3 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • JenkeNg
    Participant

    How to set the “tooltip” to the button in the “toolbar” of the “jqxGrid” of the vue component


    Hristo
    Participant

    Hello JenkeNg,

    You could try this approach below:

    <template>
      <div>
        <JqxGrid
          ref="myGrid"
          :width="getWidth"
          :source="dataAdapter"
          :columns="columns"
          :columnsresize="true"
          :sortable="true"
          :showtoolbar="true"
          :rendertoolbar="createButtonsContainers"
        >
        </JqxGrid>
      </div>
    </template>
    
    <script>
    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
    import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
    import JqxTooltip from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtooltip.vue";
    import Vue from "vue";
    
    export default {
      components: {
        JqxGrid,
        JqxButton,
        JqxTooltip,
      },
      data: function () {
        return {
          getWidth: 600,
          dataAdapter: new jqx.dataAdapter(this.source),
          columns: [
            { text: "Company Name", datafield: "CompanyName", width: 200 },
            { text: "Contact Name", datafield: "ContactName", width: 150 },
            { text: "Contact Title", datafield: "Title", width: 100 },
            { text: "Address", datafield: "Address", width: 100 },
            { text: "City", datafield: "City", width: 100 },
            { text: "Country", datafield: "Country" },
          ],
        };
      },
      beforeCreate: function () {
        this.source = {
          localdata: [
            [
              "Alfreds Futterkiste",
              "Maria Anders",
              "Sales Representative",
              "Obere Str. 57",
              "Berlin",
              "Germany",
            ],
            [
              "Ana Trujillo Emparedados y helados",
              "Ana Trujillo",
              "Owner",
              "Avda. de la Constitucin 2222",
              "Mxico D.F.",
              "Mexico",
            ],
            [
              "Antonio Moreno Taquera",
              "Antonio Moreno",
              "Owner",
              "Mataderos 2312",
              "Mxico D.F.",
              "Mexico",
            ],
            [
              "Around the Horn",
              "Thomas Hardy",
              "Sales Representative",
              "120 Hanover Sq.",
              "London",
              "UK",
            ],
            [
              "Berglunds snabbkp",
              "Christina Berglund",
              "Order Administrator",
              "Berguvsvgen 8",
              "Lule",
              "Sweden",
            ],
            [
              "Blauer See Delikatessen",
              "Hanna Moos",
              "Sales Representative",
              "Forsterstr. 57",
              "Mannheim",
              "Germany",
            ],
            [
              "Blondesddsl pre et fils",
              "Frdrique Citeaux",
              "Marketing Manager",
              "24, place Klber",
              "Strasbourg",
              "France",
            ],
            [
              "Blido Comidas preparadas",
              "Martn Sommer",
              "Owner",
              "C/ Araquil, 67",
              "Madrid",
              "Spain",
            ],
            [
              "Bon app",
              "Laurence Lebihan",
              "Owner",
              "12, rue des Bouchers",
              "Marseille",
              "France",
            ],
            [
              "Bottom-Dollar Markets",
              "Elizabeth Lincoln",
              "Accounting Manager",
              "23 Tsawassen Blvd.",
              "Tsawassen",
              "Canada",
            ],
            [
              "B's Beverages",
              "Victoria Ashworth",
              "Sales Representative",
              "Fauntleroy Circus",
              "London",
              "UK",
            ],
            [
              "Cactus Comidas para llelet",
              "Patricio Simpson",
              "Sales Agent",
              "Cerrito 333",
              "Buenos Aires",
              "Argentina",
            ],
            [
              "Centro comercial Moctezuma",
              "Francisco Chang",
              "Marketing Manager",
              "Sierras de Granada 9993",
              "Mxico D.F.",
              "Mexico",
            ],
            [
              "Chop-suey Chinese",
              "Yang Wang",
              "Owner",
              "Hauptstr. 29",
              "Bern",
              "Switzerland",
            ],
            [
              "Comrcio Mineiro",
              "Pedro Afonso",
              "Sales Associate",
              "Av. dos Lusadas, 23",
              "Sao Paulo",
              "Brazil",
            ],
            [
              "Consolidated Holdings",
              "Elizabeth Brown",
              "Sales Representative",
              "Berkeley Gardens 12 Brewery",
              "London",
              "UK",
            ],
            [
              "Drachenblut Delikatessen",
              "Sven Ottlieb",
              "Order Administrator",
              "Walserweg 21",
              "Aachen",
              "Germany",
            ],
            [
              "Du monde entier",
              "Janine Labrune",
              "Owner",
              "67, rue des Cinquante Otages",
              "Nantes",
              "France",
            ],
            [
              "Eastern Connection",
              "Ann Devon",
              "Sales Agent",
              "35 King George",
              "London",
              "UK",
            ],
            [
              "Ernst Handel",
              "Roland Mendel",
              "Sales Manager",
              "Kirchgasse 6",
              "Graz",
              "Austria",
            ],
          ],
          datafields: [
            { name: "CompanyName", type: "string", map: "0" },
            { name: "ContactName", type: "string", map: "1" },
            { name: "Title", type: "string", map: "2" },
            { name: "Address", type: "string", map: "3" },
            { name: "City", type: "string", map: "4" },
            { name: "Country", type: "string", map: "5" },
          ],
          datatype: "array",
        };
      },
      mounted: function () {
        this.createButtons();
      },
      methods: {
        createButtonsContainers: function (statusbar) {
          let buttonsContainer = document.createElement("div");
          buttonsContainer.style.cssText =
            "overflow: hidden; position: relative; margin: 5px;";
          let addButtonContainer = document.createElement("div");
          let deleteButtonContainer = document.createElement("div");
          addButtonContainer.id = "addButton";
          deleteButtonContainer.id = "deleteButton";
          addButtonContainer.style.cssText = "float: left; margin-left: 5px;";
          deleteButtonContainer.style.cssText = "float: left; margin-left: 5px;";
          buttonsContainer.appendChild(addButtonContainer);
          buttonsContainer.appendChild(deleteButtonContainer);
          statusbar[0].appendChild(buttonsContainer);
        },
        createButtons: function () {
          let addButtonOptions = {
            width: 80,
            height: 25,
            value: "Add",
            imgSrc: "https://www.jqwidgets.com/angular/images/add.png",
            imgPosition: "center",
            textPosition: "center",
            textImageRelation: "imageBeforeText",
          };
          let addButton = jqwidgets.createInstance(
            "#addButton",
            "jqxButton",
            addButtonOptions
          );
          let deleteButtonOptions = {
            width: 80,
            height: 25,
            value: "Delete",
            imgSrc: "https://www.jqwidgets.com/angular/images/close.png",
            imgPosition: "center",
            textPosition: "center",
            textImageRelation: "imageBeforeText",
          };
          let deleteButton = jqwidgets.createInstance(
            "#deleteButton",
            "jqxButton",
            deleteButtonOptions
          );
    
          let deleteButtonTooltipOptions = {
            content: "Tooltip for the \"Delete\" button",
            position: "bottom"
          };
          let deleteButtonTooltip = jqwidgets.createInstance(
            "#deleteButton",
            "jqxTooltip",
            deleteButtonTooltipOptions
          );
          // add new row.
          addButton.addEventHandler("click", (event) => {
            let datarow = [{}]; // generatedata(1);
            this.$refs.myGrid.addrow(null, datarow[0]);
          });
          // delete selected row.
          deleteButton.addEventHandler("click", (event) => {
            let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
            let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
            let id = this.$refs.myGrid.getrowid(selectedrowindex);
            this.$refs.myGrid.deleterow(id);
          });
        }
      },
    };
    </script>
    
    <style>
    .jqx-checkbox {
      margin-top: 10px;
    }
    
    .custom div {
      display: inline-block;
    }
    </style>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 3 years, 8 months ago by  Hristo.

    JenkeNg
    Participant

    It works. I understand how jqwidgets creates an instance.
    It turns out that you need to import this component before you can find the method for creating the instance in jqwidgets.
    Now there is a problem.
    When creating the button instance, the image address (“../../../assets/iconfont/custom/add.png”) in the referenced project is not displayed.
    When I try to replace the image “https://www.jqwidgets.com/angular/images/add.png” address in your example, the image displays normally.
    Why is that?


    JenkeNg
    Participant

    Thanks,Hristo
    I solved the problem of the image not showing, just import it use “require”


    gy.lee
    Participant

    is it work?
    i met this error

    
    Uncaught TypeError: Cannot read property 'appendChild' of undefined
    
    • This reply was modified 3 years, 5 months ago by  gy.lee.

    Hristo
    Participant

    Hello gy.lee,

    Could you clarify your case?
    Please, provide us with one simple example that demonstrates your case.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.