mobile grid "ellipsis" field option

[JasonBev]

With deployment and testing of LiveApp 5.0 release we have noticed the ellipsis style has been removed for certain fields on mobile view, meaning they can take up a large amount of space visually. See notes column below (left image is prior to update).

If possible can we have 'Ellipsis' as a field option we can pass in.

[paulfisher53]

Done. Added a new field option "ellipsis"

Fix-48.zip

[JasonBev]

This field options works as intended.

It does create a side issue with the way qtip works as the tooltip will also have the character reduced info showing when we want the entire note to show. It uses jquery to just grab the html, thoughts?

[paulfisher53]

Can you send me the code your using? Maybe the qtip can lookup the grid's datasource and get the correct Note data

[JasonBev]

Code used is the same as you tested in https://github.com/LiveappSolutions/Liveapp/issues/25

[paulfisher53]

Hi Jason,

Try this code:

viewer.GetPageGrid().OnBindRow = function(rowid,data,element){
    $(element).children().each( function( index, e ){
      var cell = $(e);
      var name = cell[0].className.replace(viewer.GetPageGrid().ID(),'');
      var opts = { 
        position: { at: 'bottom left' },
        style: { tip: { corner: false}, classes: "app-tooltip-text" },
        content: {text: (Application.IsInMobile() ? data[name] : cell.html())}
      };
      if(Application.IsInMobile()){
        opts.show =  {event: 'taphold'};
      }
      cell.qtip(opts);
    });    
  };

[JasonBev]

Thanks for the workaround. I just added a check for the field option otherwise it would try and return ID's instead of the flowfield value and date objects etc for the tooltip.

 viewer.GetPageGrid().OnBindRow = function(rowid,data,element){
    $(element).children().each( function( index, e ){
      var cell = $(e);
      var name = cell[0].className.replace(viewer.GetPageGrid().ID(),'');
      var fieldOptions = "";
      if(Application.IsInMobile()) fieldOptions = viewer.Page().Fields[index+1].Options;
      var opts = { 
        position: { at: 'bottom left' },
        style: { tip: { corner: false}, classes: "app-tooltip-text" },
        content: {text: (Application.IsInMobile() && fieldOptions.includes("ellipsis") ? data[name] : cell.html())}
      };
      if(Application.IsInMobile()){
        opts.show =  {event: 'click'};
      }
      cell.qtip(opts);
    });    
  };

[paulfisher53]

Ahhh of course. No worries