Show tooltip/help text on querybuilder dropdown

Question

Hello,Some of the values in the dropdown on my querybuilder columns exceeds the width of column and not displayed properly.As you can see below complete label is not displayed.Can we display some tooltip  with complete name or any other solution for this.Please advise. Thanks,Sanjay

YuvanShankar Arunagiri · Answer

Hi
Sanjay,We
have validated your reported query and prepared the sample based on your
requirement. We can achieve your requirement by using the fieldModel
property of the query builder. Using the fieldModel property you can the width
or set the default tooltip using the open event of the dropdown list.Please
refer the below code snippet and sample link.[app.component.ts]:

fieldModel:
  DropDownListModel = { width: '300px', open: this.onOpen }
  ………………….
         
  onOpen(args) {
             var elem =
  document.getElementsByClassName('e-dropdownbase')[0].querySelectorAll('.e-list-item');
             for (var i = 0; i <
  elem.length; i++) {
                 elem[i].title =
  elem[i].textContent;
             }
          }

Sample
link: https://stackblitz.com/edit/angular-ltpkfb?file=app.component.tsCould you please check the above
code and get back to us, if you need any further assistance on this. Regards,YuvanShankar
A

Sanjay Singh · Answer

Hello,Thanks for the reply.Above solution has partially solved my issue.can we make the width of the column dynamic as per the length of the text.

YuvanShankar Arunagiri · Answer

Hi
Sanjay,We
have validated your reported query and prepared the sample based on your
requirement. Please refer the below code snippet.[app.component.ts]:

onOpen(args) {
            
  var widthArray = [];
             var data = this.listData;
            
  for (var i = 0; i < data.length; i++) {
                  let font: string = "15px
  Roboto";
                  let canvas: HTMLCanvasElement
  = document.createElement('canvas');
                  let ctx: any = canvas.getContext("2d");
                  ctx.font = font;
                  var width =
  ctx.measureText(data[i].label).width; 
                  widthArray.push(width);
            
  }
            
  this.width =
  (Math.max(...widthArray) + 20) + 'px';
         
  }

Sample
link: https://stackblitz.com/edit/angular-ltpkfb-uttenh?file=app.component.tsCould you please check the above
code and get back to us, if you need any further assistance on this. Regards,YuvanShankar
A

Sravan Kumar Moravaneni · Answer

Hi

YuvanShankar, in the above mentioned code, you had used "this.width" property, But its not present in the .ts file or the .html file and so the width is not getting increased. So, can you please update the above code snippet and in the stackblitz also, so that it will be helpful. And also, if there is any solution for, to display a tooltip for that selected value in the input field like in the dropdown values, will also be helpful.

Regards,
Sravan Kumar

YuvanShankar Arunagiri · Answer

Hi
Sravan,We
have validated your reported query and prepared the sample based on your requirement.
please refer the below code snippet and sample link. we can achieve your requirement
by using the target property of the tooltip component. And regards “this.width”
was property of the dropdown list component and in onOpen method we get
only dropdown list instance(this) only. Please check/debug the onOpen method
once again.[app.component.ts]:

this.tooltip = new Tooltip({
            // default content of tooltip
            content: 'Loading...',
            // set target element to tooltip
            target: '.e-list-item, .e-rule-filter .e-input-group',
            // set position of tooltip
            position: 'TopCenter',
            // bind beforeRender event
            beforeRender: this.onBeforeRender.bind(this)
        });
        this.tooltip.appendTo('body');

Sample link: https://stackblitz.com/edit/angular-ltpkfb-uttenh?file=app.component.tsCould you please check
with the above code and get back to us, if you need any further assistance on
this.Regards,YuvanShankar
A