[mtbvfrAgainBlocked]

Peter,

I do not believe that setting filterstringcomparisonoperators to a different order will work because the result is the same as using “.sort()” and the options will still not be aligned with the array in jqxData.js as shown below.

["EMPTY","NOT_EMPTY","CONTAINS","CONTAINS_CASE_SENSITIVE","DOES_NOT_CONTAIN","DOES_NOT_CONTAIN_CASE_SENSITIVE","STARTS_WITH","STARTS_WITH_CASE_SENSITIVE","ENDS_WITH","ENDS_WITH_CASE_SENSITIVE","EQUAL","EQUAL_CASE_SENSITIVE","NULL","NOT_NULL"]

When an option is selected from the DropDownList the “selectedIndex” value is used to search and make a selection from the above array in jqxData.js. This selection is then used by the jQWidgets code to create and apply a filter.

So, it appears to me that the design needs to be changed to make it more flexible.

Hasta pronto, Michael.

[mtbvfrAgainBlocked]

Hi Peter,

I’m referring to the DropDownLists, for the Grid Menu, for which the options are as follows.

filterstringcomparisonoperators:[“empty”,”not empty”,”contains”,”contains(match case)”,”does not contain”,”does not contain(match case)”,”starts with”,”starts with(match case)”,”ends with”,”ends with(match case)”,”equal”,”equal(match case)”,”null”,”not null”]

Also, Why can I not access the Dashboard?

Hasta pronto, Michael.

[mtbvfrAgainBlocked]

P.S. Why can I not access the Dashboard. :/

[mtbvfrAgainBlocked]

P.S.

Too tired to notice the date. I am hoping this problem is fixed in version 3.0.3 ?

Thank you, Michael

[mtbvfrAgainBlocked]

Hi Dimitar,

I have a similar issue on Mobile Safari. When the Content Div (e.g. panelContentNameOfPanelDiv) is editable and ALL of the text is selected, the Content Div and the Vertical Scrollbar are moved vertically upwards an equal amount such that the last of the text in the Content Div is viewable.

Thank you, Michael.

[mtbvfrAgainBlocked]

If the Window is Modal then it should be logical to expect the DropDownButton’s Popup to remain open because nothing else should be able to receive the focus except the Window and any elements within the Window.

When clicking anywhere else except the Window, the DropDownButton’s Popup remains open.

It is only when clicking inside the Window that the DropDownButton’s Popup closes.

How can I have the Tree DropDown Popup remain open when the Window or any of its elements is clicked?

Thank you, Michael

[mtbvfrAgainBlocked]

Hi Peter,

So, what is the solution to the problem of the Tree DropDownButton being closed that I described in my first post?

Thank you, Michael.

[mtbvfrAgainBlocked]

P.S.

On checking the DOM, I couldn’t find any element with a z-index of 20050 nor 20025.

Hasta pronto, Michael.

[mtbvfrAgainBlocked]

P.S.

The problem exists in 2.9.3 and 3.0.1.

I haven’t had time to download 3.0.2 to see if it still exists with that version.

Hasta pronto, Michael.

[mtbvfrAgainBlocked]

Good afternoon/morning,

I am also looking forward to this bug being fixed.

It appears, to me, that the Div with a Class of “overlay” may need to have event.stopPropagation added to its Click Event Handler. When and where this is inserted into the DOM, I haven’t had the time to debug any further.

However, I did capture the following events that occurred after the Opening of a DropDownList.

//open/touchend:<div style="background-color: transparent;border: none;float: left;width: 251px;height: 28px"><span style="color: inherit;border: none;background-color: transparent;padding-top: 0px;padding-bottom: 0px">contains</span></div>/click:<div style="background-color: transparent;border: none;float: left;width: 251px;height: 28px"><span style="color: inherit;border: none;background-color: transparent;padding-top: 0px;padding-bottom: 0px">contains</span></div>/touchstart:<div style="border: none;background-color: black;padding: 0px;overflow: hidden;margin: 0px;width: 275px;height: 178px"></div>/touchend:<div style="border: none;background-color: black;padding: 0px;overflow: hidden;margin: 0px;width: 275px;height: 178px"></div>/click:<div style="border: none;background-color: black;padding: 0px;overflow: hidden;margin: 0px;width: 275px;height: 178px"></div>/focus:<span style="padding: 0px 4px 4px 3px;margin: 0px 0px 0px 20px;height: 30px;font-size: 24px">Clear</span>/click:<span style="padding: 0px 4px 4px 3px;margin: 0px 0px 0px 20px;height: 30px;font-size: 24px">Clear</span>/

My solution, for the time being, is as follows.

Declare a Global variable – lastTouchStartEvent – and add the following code to your Javascript file.

document.documentElement.addEventListener('touchstart',
                                          function(event){
                                            lastTouchStartEvent=event;
                                          },
                                          true
);

For input[type=”text”] Elements, use the following code example.

var i,objEl = new Object();
objEl=$('input[type="text"]');
for(i=0;i<objEl.length;i++){
  objEl[i].addEventListener('focus',
                            function(event){
                              if (lastTouchStartEvent != null) {
                                if (lastTouchStartEvent.touches.length != 1 || (this != lastTouchStartEvent.touches[0].target && this != lastTouchStartEvent.target)){
                                  this.blur();
                                  lastTouchStartEvent=null;
                                }
                              }
                            },
                            false
  );
}

For other Elements, it appears that the use of blur() has no effect.

Therefore, for elements such as the Filter and Clear “buttons” (Spans) of the Grid Menu, use the following code examples.

$('#filter1divItemsGridCrit,#filter3divItemsGridCrit').on('open',function(event){
                                                                   $('#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css({'display':'none','top':'0px','position':'absolute'});
                                                                 }
);
$('#filter1divItemsGridCrit,#filter3divItemsGridCrit').on('close',function(event){
                                                                    setTimeout(function(){$('#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css({'display':'','top':'','position':''});},450);
                                                                  }
);

Hasta pronto, Michael.

[mtbvfrAgainBlocked]

Hi again Peter,

As confirmation that the problem is related to the Mobile Safari Touch Interface, I just ran a small test.

I placed an Input (type = text) below one of the other DropDownLists and when I opened the DropDownList and selected an Item that was Above (on top of) the Input element, the Input element received the Focus.

Hasta pronto, Michael.

[mtbvfrAgainBlocked]

Hi Peter,

But if a User selects “empty”, for example, then they would not be wanting to enter any filter value.

Also, your answer is not correct because on the desktop, for example, the Input elements (class=”filtertext1divItemsGridCrit” & class=”filtertext2divItemsGridCrit”) do not receive the Focus after making a selection from the DropDownLists.

After making a selection from the first DropDownList, the element that becomes the Active Element (document.activeElement) is the following.

<div style="background-color: transparent; -webkit-appearance: none; outline: none; width:100%; height: 100%; padding: 0px; margin: 0px; border: 0px; position: relative;" tabindex="0">

In the DOM this element comes after the following element.

<input type="hidden" name="filter1divItemsGridCrit" value="empty">

Again, this is a Touch Interface problem.

If the the Input elements (class=”filtertext1divItemsGridCrit” & class=”filtertext2divItemsGridCrit”) are under an Item selected from one of the DropDownLists, then, these Input elements receive the Focus.

The best I can come up with is the following but it is not consistent and 400 milliseconds is too long.

For the Open event:

$('#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(3)>input,#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(6)>input,#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css('display','none');

For the Close event:

setTimeout(function(){$('#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(3)>input,#gridmenudivItemsGridCrit li.filter>div>div>div:nth-child(6)>input,#filterbuttondivItemsGridCrit,#filterclearbuttondivItemsGridCrit').css('display','');},400);
$('#filter1divItemsGridCrit>div').focus();

Thank you, Michael.

[mtbvfrAgainBlocked]

Hi Peter,

In addition to the problems I raised in the first post; when you Select an Item from the DropDownList and that Item is positioned over either of the Input elements or the Filter or Clear buttons (Spans), the Input element or Button receives the Focus, after the DropDownList closes, which causes the associated event handler to be activated.

Again, this is a problem with Mobile Safari. On the Desktop there isn’t a problem.

How can this be prevented?

Thank you, Michael.

[mtbvfrAgainBlocked]

Peter,

You need to address the problem at hand.

To simply say that the API for the Grid should be used is NOT sufficient.

You should have told me about the ‘cellsrenderer’ Property of the ‘columns’ Property which would have saved time for both of us in communicating about the Styling problem I was trying to solve.

Hasta luego, Michael.

[mtbvfrAgainBlocked]

Hi Peter,

Which Grid Event can be used to modifiy the style of the Cells when the ScrollBars are used?

Thank you, Michael.

[Author]

Posts