1 Reply Latest reply on Jul 2, 2009 10:08 AM by Ryan Yoder

    Disable loading icon when filtering extendedDataTable



      is it possible to disable processing icon when we type a key in filter column in extendedDataTable?

        • 1. Re: Disable loading icon when filtering extendedDataTable
          Ryan Yoder Newbie

          I have done this but its a little invasive.
          The loading icon is there to hide the fact that the datatable is resizing its innerDiv with javascript calculations. If you were to override the css and always hide that icon you'd see the inner div go to 50 pixels and then resize to the appropriate size.

          My solution was to remove the need to resize the inner div and not show the processing icon. With the layout of the table this means you have to add a new attribute, innerHeight which the server side renderer uses instead of defaulting to 50px and then js resizing it.

          I did the following.

          Get the extendedDataTable to build in the cdk. Edit the template.jspx page and change innerDiv from 50xp to getAttribute("innerHeight"). Rebuild and copy the resulting renderer into your source tree as org.richfaces. etc. It now uses your renderer. There are other more elegant ways to attache the renderer than this by the way.

          Then disable the js reloading by including this js file.
          Put this in your header so it always gets included.

          window.ExtendedDataTable.DataTable.prototype.updateLayout = function()
          // do nothing, the updateLayout method is supposed to resize the inner div but we are taking care of this now by specifying it prior to rendering

          Add this to you global css file to disable the icon.

          .extdt-ss-vsbl {

          Then when you put the table on a page, specify innerHeight="150px" height="180px". Play with innerHeight until it looks right.

          I can send you the renderer code if you want it but its nice to be able to build from src. That way when new versions come out you can rebuild.

          I changed line 85 of htmlExtendedDataTable.jspx to the following.

          <div id="#{clientId}:sd" class="extdt-content" style="height:#{component.attributes['innerHeight']};width:100%;">

          We also disabled the context menu since it is very detrimental to performance.