[stephanParticipant]

Hi Peter,

Yes, after some experimentation I also found that “columnsheight” solves my problem. Initially when reading the documentation I skipped it because I did not want to increase the height of all my columns. The documentation was not very helpful in explaining that it actually applies only to the column headers. Maybe you could add this rather useful hint ?

Regards,
Stephan

[stephanParticipant]

Hi,

Just for the sake of completeness, and also in case someone else encounters a similar problem and finds this thread: I have updated the fiddle with the helpful recommendations from Peter:

http://jsfiddle.net/_stephan_/wNEAr/1/

Now the sorting works just fine for all columns.

Regards,
Stephan

[stephanParticipant]

Hi Peter,

Thanks for the example. I will now add that to my application.

Regards,
Stephan

[stephanParticipant]

Hi Peter,

Could you please give me an example of how to correctly set “datafields” for this fiddle (which is a copy of your demo):
http://jsfiddle.net/_stephan_/wNEAr/

Since I derived my code from your Demo, which also has no “datafields”, I guess it would be good idea to add “datafields” to the Demo as well.

Regards,
Stephan

[stephanParticipant]

Hi once more,

After some searching and testing I found the example in your “Demo” section that actually uses a 2D array exactly the way I use it. As far as I remember I copied my code from that particular demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/jsarray.htm

And with the code from that demo I was also able to reproduce the bug/problem I am encountering. I copied the demo into a fiddle and just added “srtable:true” to the table:
http://jsfiddle.net/_stephan_/wNEAr/

What you should observe is: attempting to sort any column by clicking on the column header will always sort on the first column only. This is exactly the problem I also have in my own application.

Sidenote: I made a quick test where I replaced the 2D array with an array of rows where each row is an object of column values and each column value has as its key the column name (in other words: the is organized exactly as explained here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/bindingtoarray.htm). For such an array the sorting works just fine.

I’d like to add, though, that the later form of array is an extreme waste memory, especially for larger arrays (say >1000 rows with 10 to 20 columns), because it repeats the column names over and over again on each row. Also because my own source data is nto organized like that I would have to reorganize my data which would cause a huge overhead. In the end my application must be capable of dealing withtables that hold >10.000 rows, so performance and efficiency is important to me.

Regards,
Stephan

[stephanParticipant]

Hi,

What I forgot to explain above: Here is how I initialize the column definitions :

    var colDefs = [];
    for (colIdx = 0; colIdx < headerData.length; colIdx++) {
      column = {
        text : headerData[colIdx].name,
        sortable : true,
      };
      colDefs.push(column);
    }

The resulting ‘colDefs ‘ is what I give to the table as ‘columns’ property. Since my table data is just a 2D array of values the header information is supplied to me in a separate object. The expression “headerData[colIdx].name” gives the name for column “colIdx” as a string.

I’d like to add that the separation of table/grid data into header info object and actual data values array was introduced to save storage space for the data by not having to repeat the column names on every single row.

Regards,
Stephan

[stephanParticipant]

Hi,

I am already in the process of restructuring my app to comply with the peculiarities of jQWidgets.

That said I would consider it to be rather pointless to call jqWidgets initializers after creating just the HTML as one block and adding it. After all: what do the jQWidgets initializers do ? They perform more or less extensive DOM object modifications by adding in extra “div”s, setting properties, etc. In other words: calling the jQWidgets initializers again causes a larger amount of DOM modifications to occur. As stated before: each single DOM modification causes the browser to re-render the entire HTML …. which is what I attempted to prevent in the first place.

Regards,
Stephan

[stephanParticipant]

Hi Peter,

Well, I read as a “best practice” that adding elements to the DOm as late as possible is a great perfromance enhancement for web applications. If you add to the DOM early on, then modify the added element continuously, you get DOM re-rendering overhead for each single modification to the DOM.

In my case I create dynamically a very complex content for the expander. In fact an entire dialog representation goes into the expander and gets created control by control from runtime data. Thus I want to avoid modifying the DOM hundreds of time, by first constructing the expander with content, and THEN adding it to the DOM when all content is in there. Additionally if lots of small content gets added dynamically this process actually becomes visible due to the continuous re-rendering of the DOM by the browser.

Is there a chance to avoid the continuous DOM re-rendering using jqxWidgets ? Otherwise I’ll have to update my application logic and live with the overhead and the side effects.

Regards,
Stephan

[stephanParticipant]

Hi Peter,

Yes, he can choose, but this actof coosing is not stored or processed or shown as a selection.

After lots of time spent on trying to make jqxComboBox work as a “drop down list with filtering” I have given up on this as a futile effort. For a list I must have a clear concept of “selected element”, which is shown to the user clearly as “selected element”, and where only an element of the list is accepted as valid input.

Sadly the “incremental search” feature of jqxDropDownList has a horrible usability from the point of view of a user. Sinde there is no visualisation you never know how many letters you managed to chain. 9 times out of 10 the next letter you type starts a enw search instead of adding it to the current search word. With a looong timer (20 seconds) you never know what letters have already been typed and how to maybe remove a msityped letter (because nothing about the letters and the match is shown). Also there is no concept of how to advance to the next match of the search (especially bad when using ‘content’ search mode). Of course the immens advantages of having a real filtering feature are not available at all.

I am now at a loss about how to implement a “drop down list with filtering” using jQWidgets …. My current way forward is to use “select2” instead and stick to themes where a light grey/white colored control does not look wrong. Basically what missing is an optional filtering input for the jqxDropDownList, which when opening the list starts out empty and has the focus, so that initially when opening the list you see all entries.

Regards,
Stephan

[stephanParticipant]

Hi,
After some further experimentation it seems like the combo bxo totally looses the concept of a selected index when using the mode “autoComplete: true”. If I change the mdoe to “autoComplete: false” the “selectedIndex” will work just fine.

Actually even though the mode “autoComplete: true” is quite nice it does have some considerable drawbacks when trying to use it in an application where the combo box is used for representing a list:
* if you select something in the list it will not get shown as “selected element” in the list
* if you select something the list closes, next time you open it it show only one entry, ie. the one that you have selected (without marking it as selected)
* because of my second point it becomes difficult to actually open the list for the purpose of selecting a different element because you do not see your list of choices, you must first remove the text from the text input, which actually destroys your current selection
* opening the list to look for a choice, but then closing it again because you did not see it is near to impossible without loosing the current list selection

My conclusion: the way I see it the combo box with “autoComplete: true” can not be used for representing a dropdown list with a search field. Using the search field will kill your list selection which should not happen. I am now investigating the use of combo box in mode “autoComplete: false” and see how far this gets me. Sadly the VERY useful “filtering down” effect is now lost to me.

What I am wondering: if in a list of 100 entries I have 8 matches how do I get the the next match if I am using mode “autoComplete: false” ?

Regards,
Stephan

[stephanParticipant]

Hi admin,

What you say makes sense as a general concept … but why is renderer being called repeatedly, ie. at each char input, but with the return value being ignored ? That is inconsistent with what you have explained. Also: ‘renderer’ gets called 3 times for each list item when the ComboBox gets created. This makes me wonder which of the 3 invocation return value is the one that actually gets used and shows up in the list ?

QUESTION:
Does jqxComboBox support in any way a ‘content changed’ event for the text input field ?

I could not find anything along these lines in the documentation. I am thinking of actually updating the list entries (using ‘updateItem’ API function) each time the user enters something into the text input field …

Regards,
Stephan

[stephanParticipant]

Hi,

Ahhh yes … bu what do you mean by “includes drag and drop too” ? Because drag and drop is what I want so if I could hook into that it would be great. What I dont need is this rectangular selection frame that appears when you hold down your mouse button in “multiplerowsextended”, so if that could be disabled it would also be great.

All I really need is standard Windows like Click + Shift-Click + Control-Click multiple row selection selection with the ability to drag the current selected rows onto a different panel.

Ok, another way you could implement it is to mimik more closely the way that for instance Windows does it: If the mouse-drag operation begins on top of something that is already selected it becomes a real drag&drop operation. If the mouse-drag begins outside of anything that is selected it becomes a selection frame operation. Yet it never becomes both at the same time.

That said I am now looking into coding my own selection algorithm for the grid. Sadly, for my application and the requirements I must fullfill, the grids built in selection behaviour is an absolute no go.

Regards,
Stephan

[stephanParticipant]

Hi Peter,

The issue which concerns me is: the user sets a desired size, by dragging the column divider, but the grid implementation rejects this when calling “loadstate”. I actually checked the data that the grid returns when calling “savestate”. It contains the correct clumn size as set by the user. It is the “loadstate” function which refuses to restore this size. Isn’t it a bit strange to have a function “loadstate” that actually does not load the state as it is represented in the “savestate” data ?

So maybe you can help me with coding this correctly ? Because I do not know how to wrap this concept around the jqxGrid API … The columns should indeed have an initial size of “automatic” (I autogenerate them from database content where I do not have or know a suitable initial width). But whenever the user decides to change a column size manually I want this size to be saved and also restored.

I mean: the first solution that comes to my mind is to have some sort of “force width” flag for “loadstate”, where I can explicitly request that YES, I want exactly the width as represented in the saved state, without the software deciding to ignore some of the width values. Yet the way I see it this would requrie a grid API change. So I am wondering: is there something I can do with the grid as it is right now ? Some workaround ?

My second idea is to totally ignore “loadstate” and attempt to code a similar function myself based on the data returned by “savestate”. Barring other API problems this might actually work. Yet it begs the question of why “loadstate” exists in the first place. Ok, it would also mean a lot of extra work for me … thats why I am asking for an alternative

Regards,
Stephan

[stephanParticipant]

Hi Peter,

The problem I’m having is that the mode ‘docking’ does not appear to work correctly. I want to drag windows, but only between the docking points. I thought that’s what ‘docking ‘ is meant to do. Maybe I misunderstood the meaning of the “docking” mode? My fiddle above demonstrates that you can drag a window to any position, even outside the docking points, when mode “Docking” is set.

Regards,
Stephan

[stephanParticipant]

Hi Dimitar,

Ok, thanks, I understand now. So I can not get this dynamic “remove” effect and animation for the horizontal direction ?

You know: when I drag something out of a panel the elements below slide upwards to fill the space vacated by the window that is being dragged away. I wanted to get this effect horizontally: so the remaining horizontal windows slide to the left side.

Regards,
Stephan

[Author]

Posts