[mtbvfrMember]

Hi Peter,

It was a long winded process but I eventually got there. The following is a chronological order of how I got there.

I had already tried the same idea as suggested in your last post but this is not a functional real-world example of the use of setting the “disabled” Property to false immediately after instantiating the Widget with the “disabled” Property set to “true”.

I want to be able to set the “disabled” Property via code executed from another widget.

I created a “test page” using the example you gave in your last post.

When I comment out the 2 lines that set the “disabled” property and I add “disabled:true” to the line that instantiates the DropDownButton Widget, the button is not disabled. I have tested this on Firefox 12 and Mobile Safari (iOS 6.1.3).

However, if I include the line that sets the “disabled” property to “true” or I enter ‘$(“#dropDownButton”).jqxDropDownButton({ disabled: true });’ via the Web Console Command Line (Firefox – Tools/Web Developer/Web Console), or the Console Command Line of Firebug, the DropDownButton becomes disabled.

On “my own page“, if I don’t use the “disabled” property when instantiating the DropDownButton (divSiteAddDropDown), I can toggle the “disabled” property Off and On with the buttons, you can see, or via either of the Console Command Lines.

So, the manipulation of the “disabled” property is not working correctly 100% of the time.

After a break, which gave me a bit of time to think, I decided to see what was happening with the other DropDownButtons on the page.

After various modifications, I eventually determined that there is a conflict with the DropDownButton named divItemDropDown BUT I don’t know what, exactly, is causing the conflict.

If I comment out (//) the following 2 lines, then, the DropDownButton named divSiteAddDropDown becomes enabled when a Client is Selected.

$(‘#divItemDropDown’).jqxDropDownButton({height:28,width:165});
$(‘#divItemDropDown’).jqxDropDownButton(‘setContent’, ‘Selected Item’);

Well, with a little more thought, I wondered if it was because the “theme” Property was not being set for the divItemDropDown DropDownButton.

BINGO!!

So, it seems that all DropDownButtons have to be set to the same Theme.

However, is that the way it should function? If so, it needs to be clearly documented somewhere.

As the other Properties are independent of each other for a DropDownButton, why is the Theme property not independent?

What about the other widgets?

What if you wanted to use a different theme for some widgets of the same type?

By the time you read this, my own page may have changed a little but you will still be able to download it for experimentation/debugging locally.

The issue I raised in the Topic “DropDownButton Pop-Up does not close when Menu is activated” still needs to be addressed.

Thank you and hasta pronto, Michael.

[mtbvfrMember]

On further analysis, I have determined that $(‘#divSiteAddDropDown’).jqxDropDownButton({disabled:false});
is only removing the Class “jqx-fill-state-disabled” from the Element “divSiteAddDropDown”. It should also be removing the Class “jqx-fill-state-disabled-ui-darkness”.

Yes, I could add the following line of code to my script but it shouldn’t be necessary.

document.getElementById(“divSiteAddDropDown”).classList.remove(“jqx-fill-state-disabled-ui-darkness”);

I don’t have the time to play around with jsFiddle.

Why can’t one of you use Firefox with Firebug to see for yourselves what I am referring to?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

The DropDown of the DropDownButton is NOT closing automatically when I click or tap on the Menu which is clicking outside of the DropDown of the DropDownButton.

Also, what happened to the other 2 Topics I posted yesterday? I posted another topic in this forum and another in the ComboBox forum.

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

I was not referring to the Content (Pop-Up), of the DropDownButton, being clicked.

If you click or tap on the Menu element after clicking or tapping on the DropDownButton, then, the Pop-Up, of the DropDownButton, is not closed.

If you click or tap on another Element such as a Tab or DropDownList, then, the Pop-Up, of the DropDownButton, is closed.

Why is there a difference in behaviour?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

I will ask the question another way.

Why is a 1px Transparent Border used for the Div containing the Menu?

It must have been put there for a reason because removing it causes the Menu to open on Mobile Safari.

Also, the Div containing the Menu is given a “tabindex” of 1 which would cause it to receive the focus when the page opens.

If another Element, which was given a “tabindex” of 1, was positioned before/above the Menu’s Div, then, the Menu did not open.

Does a similar situation occur on browsers used on Android and Windows SmartPhones?

For the benefit of others, the best way, I found, to solve this problem was to set the “autoOpen” and “enableHover” Properties to false. Then, to allow the Hover feature to function on the Desktop Browser, I queried the “userAgent” Property of the Navigator Object to determine if a Mobile device was being used. If it is determined that a Mobile device is being used, then, “enableHover” is set to “false”, otherwise, “enableHover” is set to “true”.

In the future if you do not know the answer to a question, please ask someone who will know the answer. In this way we all can benefit.

Thank you, Michael.

[mtbvfrMember]

Why does setting the Border to “none”, for the Parent Div (id=”jqxMenu”), cause the menu to open (drop down) when using Mobile Safari?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

The problem is the same when running in Offline mode.

Do you have an iPhone 3GS to test this on?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

I do not understand your last reply.

Can you post an example please?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

What needs to be done, I think, is to move, or copy, the MouseDown function from the dropdownlistArrowjqxWidget Div to its Child Div that does not have an “id” attribute.

I’ve tried adding code, such as the following before the end of the head Tag, to do that but it hasn’t been successful.

document.addEventListener(‘DOMContentLoaded’,
function () {
var events,source,destination;
//copying from one to one or more
source = $(“#dropdownlistArrowjqxWidget”);
destination = $(“#dropdownlistArrowjqxWidget div”);

//get all the events from the source
events = $(source).data(‘events’);
if (!events) return;

//make copies of all events for each destination
$.each(events, function(index, event) {
$.each(event, function(i, v) {
destination.bind(index, v.handler);
});
});
},
false
);

Afterwards, when I enter “$._data( $(“#dropdownlistArrowjqxWidget div”)[0], ‘events’ );” into the Console, I get an “undefined” response.

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

Is there anything I can do, NOW, to achieve the improvements I am seeking?

Thank you, Michael.

[mtbvfrMember]

Hi Peter,

For the project I am working on there is currently no need for the use of a Grid.

Can the synchronization of a Local Storage array (JSON Object) with an SQL Server Table be achieved with the Data Adapter?

If so, would the “data” Property of the “source” Object be used for this purpose?

Please post an example.

Thank you, Michael.

[mtbvfrMember]

P.S.

More specifically, can data, stored in Local (Web) Storage, be sent to SQL Server without using the jqxGrid widget?

Thanks, Michael

[mtbvfrMember]

Hi Peter et al,

I would appreciate a detailed answer to the above post please.

Thank you, Michael

[mtbvfrMember]

Hi dbs,

In your case you should try adding the following within the <head> tag of your page.

<style type=”text/css”>
#jqxWidgethorizontalScrollBar {display:none;}
</style>

Regards, Michael.

[mtbvfrMember]

Hi Dimitar, Peter et al,

I’m having the same problem with Firefox 12 and Mobile Safari (iOS6.1.3).

It looks like a miscalculation is happening in deciding whether the Horizontal Scroll Bar should be shown or not.

You can see my problem in the Top Panel of the 2nd Tab.

Panel Horizontal Scroll Bar Problem Page

I can overcome the problem by adding the following Style Rule to the page.

#jqxPnlItemhorizontalScrollBar {display:none;}

However, it looks like some debugging is required by you guys. Have fun!

Looking forward to know how you have solved the problem.

Thank you, Michael.

[Author]

Posts