jQWidgets Forums

Forum Replies Created

Viewing 11 posts - 61 through 71 (of 71 total)
  • Author
    Posts

  • stephan
    Participant

    Hi Dimitar,

    Thanks for your advice. I now understand how “disabled” is supposed to work”. Regrattably this is not what I wanted to achieve. The “disabled” functionality actually disables both panels as well as the splitter bar. I only want to disabled just the splitter bar, not the two panels. Meaning: in “Splitter Active” mode you can drag/click it and in “Splitter Inactive” mode it does not react to drag/click/hover, thus locking the size of the two panels connected to the splitter.

    I guess my requirement falls outside of the feature scope of jqxSplitter, but maybe you could consider adding this (nice and useful) extra feature to a future version of jqxSplitter ?

    Regards,
    Stephan


    stephan
    Participant

    Hi,

    I think I understand the height problem, because I also encountered a height problem when first testing out splitters. The following fiddle shows my problem and also how I fixed it:
    http://jsfiddle.net/ZUNvp/2/

    In order to have jqxWidget apply a 100% height correctly it must be located within a container div that itself has an actual height. This can be resolved as shown in my fiddle: by adding e.g. 100% to the container, orby placing the splitter into an absolutely positioned and sized container.

    Regards,
    Stephan


    stephan
    Participant

    Hi Peter,

    As always: thanks for the explanation and advice. I now managed to achieve my goal of adding menu entries by adding them to the source instead of using the (very seductivly named) “insertAt” function.

    I’d like to mention at this point that it would be great to have your insightful information in the documentation. This would probably avoid quite a few wrong turns and incorrect API usage. Sadly I was unable to determine the correct API usage based on the existing API documentation.

    Okay, so the way I understand things, in particular based on your reply, if you want to use the menu entry add/insert/remove etc functions you MUST NOT use a data source, because this is mutually exclusive and creates inconsistent situations.

    Well, I got my “home made” sidebar menu system working now, which uses a navbar for the top level items and a listbox for the actual menu entries underneath. This results in a vertical menu that operates like an accordion.

    Regards,
    Stephan


    stephan
    Participant

    Hi Peter,

    Thank you for your help. It’s the “overflow: hidden” on the body element that does the trick.

    I have one more smaller issue that you could have a look at. It seems to me like there’s a refresh missing in the listbox implementation.

    Have a look at the following fiddle and hover over the listbox entries:
    http://jsfiddle.net/H7XfM/4/

    Now click on the “refresh” button and hover again. You should observe a 2 pixel difference in the width of the hover selection. I would say that the sizing after the refresh is correct, because before the refresh the hover selection (and also click selection) actually overlap with the right side border of the listbox.

    Just something I wanted to mention. I’m planning to attach a click header to the navbar header and use that to issue a refresh to the listbox.

    Regards,
    Stephan


    stephan
    Participant

    Hi,

    If I understand the API correctly: since I want to filter for rows that match one substring I must construct one filter definition per each column and then combine them all with OR. I was hoping for something simpler because this is not such an unlikely use case, but will give it a try today.

    Thanks,
    Stephan


    stephan
    Participant

    Hi again,

    You can consider this issue closed, your suggestion works. Thanks for the help.

    Just for the sake of completeness, in case someone else might someday want to do the same thing, here is my code:

    $(‘#’ + toolbarId).jqxMenu({
    showTopLevelArrows : true
    });
    $(‘#’ + toolbarId).jqxMenu( ‘setItemOpenDirection’, itemId, ‘right’, ‘up’ );
    $(‘#’ + toolbarId).jqxMenu( ‘showTopLevelArrows’, false );

    The end result is a menu that opens upwards and has no arrows attached to the menu items.

    Regards,
    Stephan


    stephan
    Participant

    Hi,

    Ups you edited your reply while I wrote a reply to you 🙂
    I’ll test your suggestion now.

    Regards,
    Stephan


    stephan
    Participant

    Hi,

    Well, I did consider it strange that you can somehow en up with two arrows, but I posted that only to alert you to the potential problem.

    What I actually want is a menu that opens upwards but does not show an arrow. Thats how I found those issues I reported above. By using “showTopLevelArrows: false” on a normal menu I can create a menu without arrow that opens downwards. So all I’d like to achive is have it open upwards, but without getting an arrow added.

    Is there any way to do this ?

    In the documentation I only found “setItemOpenDirection”, but as you said yourself: this forces an arrow upon me.

    Regards,
    Stephan


    stephan
    Participant

    Hi Peter:

    I created a fiddle to illustrate both my points:
    http://jsfiddle.net/M58LY/32/

    The first thing you see is that the “Adr” column is shown as the smallest of the 3 columns, despite containing the largest content. That is why I assume that coumn width is calculated based on header text size. Apparently it is smallest beacuse it contains the smallest column header text. You can verify this by changing the header ext to “Address”, which will result in a larger column size ( relative to the other 2 columns).

    I observe the same effect in my application: if a column has a small header text it will become a very slim column, even though it contains rather large amounts of text, resulting in a very silly looking table (similar to the table in the fiddle where the Adr column looks rather silly).

    Now click on the button and you will see what my second point refers to. Probably I should not have said that the table becomes smaller. It is the sum of all columns that becomes smaller than the grids outer boundary. Again the result really look silly because now the columns do not fill the table anymore. Maybe my expectation is not in line with how you design or define the jqxGrid, but for a grid with 100% width i would have expected upon button click that the columns resize to ensure that all column header show without truncation, but that the columns still fill the available 100% width of the grid.

    I guess I am looking for a function to ensure that column headers do not get truncated, ie. uses that as min size for a column, but still destributes the columns appropriately across the available 100% width, so as not to waste space. The appropriate distribution of columns should take into account column content to ensure that columns with large content get allocated moe space than columns with little or no content.

    Sorry for bothering you with all this, but right now I am battling against rather weird looking grids because of the issues I outlined above. I could show you a screenshot, but cant attach it to the forum posting. My main major issues are:
    * column headers getting truncated unnecessarily event though there is enough width to show them
    * column width not properly respecting column content so that columns with larger content show up really tiny (slim) just because of their header text

    Regards,
    Stephan


    stephan
    Participant

    Hi yet again,

    I found 2 more problems with the 100% width mode of jqxGrid:

    1) Calling the function “$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’, ‘column’)” will destroy the 100% width. It will make the table larger or smaller, depending on column content.

    My expectation is that a 100% width table shall always stay at 100% width. Therefore “‘autoresizecolumns’ should recalculate the column sizes without changing the overall table width.

    2) The automatic column widthcalculation of jqxGrid producs strange results. Apparently it bases the width of a column solely on the width of the column header. In my table this means I end up with several very thin columns where the large data they contain is heavily truncated. on the other hand there are several extra wide columns which are mostly empty because they contain small (or no) data.

    My personal impression is that it would be much better to take all column content into account when calculating the width percentage for a column. I do not know in advance how much data a table cell will contain (because the user enters this data). Therefore I must rely on the table to calculate appropriate column width based on the current content of the table cells in a column.

    I do know that “autoresizecolumns” has a “cells” and “all” mode. But this absolutely maximizes the table width instead of balancing the columns within the 100% overall table width.

    I guess what point 2) is all about is that I consider the automatic column width calculation in 100% width mode to do a bad job of properly balancing out the width of all the columns. Such a balancing algorithm should always (or at least optionally) take the content of all cells in a column into account when calculating the percentage width for the column.

    Regards,
    Stephan


    stephan
    Participant

    Hi Peter,

    Thanks for your answer. As a workaround I am placing the table within an outer container that has a 2 pixel margin. This ensures that no scrollbar appears.

    However I found a second problem, which also appears to relate to the 100% width. Maybe you can also help me with this ?

    If I enable paging for a table with 100% width and start resizing the browser window, there are certain “magic” sizes where an empty horizontal scrollbar will appear. I was able to reproduce this problem is jsFiddle by noting down such a “magic” width and setting it as absolute fixed width:

    http://jsfiddle.net/M58LY/14/

    The fiddle will show this empty horizontal scrollbar, and as far as I could find out the trigger that causes it is to set “pageable: true”, and to hit one of thsoe magic width numbers.

    Regards,
    Stephan

Viewing 11 posts - 61 through 71 (of 71 total)