NSB App Studio - User contributions [en]

JqxMenu

2015-04-24T15:09:58Z

Kaplanerkan: /* Font Size (Menus) */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size (Menu) ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Font Size (Sub Menu Items) ===
You can change the font size from sub menu items with your own STYLE defination ''(smfs = Sub Menu font size Style)'' into the SOURCE.

<pre>
...............
...............
{label: "<style>smfs {font-size: 20px;} </style> <smfs> Product A </smfs>" }

...............
...............

</pre>

[[file:Jqxmenu fontsize sub menu items.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images (16x16). You must define your '''img src ''' attribute into SOURCE like below:

<pre>

..........
..........
source = [ _
{label: "<img src=images/mail.png /> Home" }, _
{label: "<img src=images/folder.png /> Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "<img src=images/notepad.png /> Buy" }, _
{label: "<img src=images/smiley.png /> Contact" }, _
{label: "<img src=images/settings.png /> About"}]
...........
...........
</pre>

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T15:06:37Z

Kaplanerkan: /* Font Size (Sub Menu Items) */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size (Menus) ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Font Size (Sub Menu Items) ===
You can change the font size from sub menu items with your own STYLE defination ''(smfs = Sub Menu font size Style)'' into the SOURCE.

<pre>
...............
...............
{label: "<style>smfs {font-size: 20px;} </style> <smfs> Product A </smfs>" }

...............
...............

</pre>

[[file:Jqxmenu fontsize sub menu items.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images (16x16). You must define your '''img src ''' attribute into SOURCE like below:

<pre>

..........
..........
source = [ _
{label: "<img src=images/mail.png /> Home" }, _
{label: "<img src=images/folder.png /> Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "<img src=images/notepad.png /> Buy" }, _
{label: "<img src=images/smiley.png /> Contact" }, _
{label: "<img src=images/settings.png /> About"}]
...........
...........
</pre>

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T15:03:18Z

Kaplanerkan: /* Styling and Appearance */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size (Menus) ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Font Size (Sub Menu Items) ===
You can change the font size from sub menu items with your own STYLE defination into the SOURCE.

[[file:Jqxmenu fontsize sub menu items.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images (16x16). You must define your '''img src ''' attribute into SOURCE like below:

<pre>

..........
..........
source = [ _
{label: "<img src=images/mail.png /> Home" }, _
{label: "<img src=images/folder.png /> Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "<img src=images/notepad.png /> Buy" }, _
{label: "<img src=images/smiley.png /> Contact" }, _
{label: "<img src=images/settings.png /> About"}]
...........
...........
</pre>

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

File:Jqxmenu fontsize sub menu items.jpg

2015-04-24T15:02:28Z

Kaplanerkan:

JqxMenu

2015-04-24T15:00:09Z

Kaplanerkan: /* Styling and Appearance */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size (Menus) ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Font Size (Sub Menu Items) ===
You can change the font size from sub menu items with your own STYLE defination into the SOURCE.

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images (16x16). You must define your '''img src ''' attribute into SOURCE like below:

<pre>

..........
..........
source = [ _
{label: "<img src=images/mail.png /> Home" }, _
{label: "<img src=images/folder.png /> Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "<img src=images/notepad.png /> Buy" }, _
{label: "<img src=images/smiley.png /> Contact" }, _
{label: "<img src=images/settings.png /> About"}]
...........
...........
</pre>

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T14:42:50Z

Kaplanerkan: /* Images */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images (16x16). You must define your '''img src ''' attribute into SOURCE like below:

<pre>

..........
..........
source = [ _
{label: "<img src=images/mail.png /> Home" }, _
{label: "<img src=images/folder.png /> Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "<img src=images/notepad.png /> Buy" }, _
{label: "<img src=images/smiley.png /> Contact" }, _
{label: "<img src=images/settings.png /> About"}]
...........
...........
</pre>

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T14:42:33Z

Kaplanerkan: /* Images */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images (16x16). You must define your '''img src ''' attribute into SOURCE like below:

<pre>

..........
..........
source = [ _
{label: "<img src=images/mail.png /> Home" }, _
{label: "<img src=images/folder.png /> Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "<img src=images/notepad.png /> Buy" }, _
{label: "<img src=images/smiley.png /> Contact" }, _
{label: "<img src=images/settings.png /> About"}]

</pre>

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T14:40:51Z

Kaplanerkan: /* Styling and Appearance */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images like 16x16. You must define your '''img src ''' attribute into SOURCE like below:

[[file:Jqxmenu images.jpg]]

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

File:Jqxmenu images.jpg

2015-04-24T14:40:01Z

Kaplanerkan:

JqxMenu

2015-04-24T14:33:53Z

Kaplanerkan: /* Images */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images like 16x16. You must define your '''img src ''' attribute into SOURCE like below:

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T14:33:23Z

Kaplanerkan: /* Images */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images like 16x16. You must define your '''img src ''' atributte into SOURCE like below:

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T14:31:44Z

Kaplanerkan: /* Styling and Appearance */

[[file:jqxMenu.png]]

== Description ==
jqxMenu represents a jQuery menu widget that makes it easy to add menus to your app. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. Submenus are not supported on mobile devices.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-getting-started.htm

== Styling and Appearance ==
=== Font Size ===
You can change the font size with the LI or UL attribute.

<pre>
$("#Menu2").find("li").css("font-size","30px")
or
$("#Menu2").find("ul").css("font-size","30px")
</pre>

[[file:Jqxmenu fontsize.jpg]]

=== Minimized ===

You can show the jqxmenu as minimized.

<pre>
$("#Menu1").jqxMenu("minimize");

</pre>

[[file:Jqxmenu minimized.jpg]]

=== Images ===
You can show your jqxmenu with small images like 16x16

== Example (Basic) ==

<pre>
Sub Main()
$("#Menu1").jqxMenu(Menu1_settings)
$("#Menu2").jqxMenu(Menu2_settings)
End Sub

Function Menu1_onitemclick(event)
menuItemText=$(event.target).text()
console.log(menuItemText)
End Function

source = [ _
{label: "Home" }, _
{label: "Products", items: [ _
{label: "Product A" }, _
{label: "Product B" } ] _
}, _
{label: "Purchase" }, _
{label: "Contact Us" }, _
{label: "About Us"}]

Menu1_settings.source=source
Menu2_settings.source=source
</pre>

== Example (JavaScript) ==
<pre>
function Main() {
$("#Menu1").jqxMenu(Menu1_settings);
$("#Menu2").jqxMenu(Menu2_settings);
}

Menu1.onitemclick = function(event) {
menuItemText=$(event.target).text();
console.log(menuItemText);
}

source = [ {label: "Home" }, {label: "Products" , items: [ {label: "Product A" }, {label: "Product B" } ] }, {label: "Purchase" }, {label: "Contact Us" }, {label: "About Us"}];

Menu1_settings.source=source;
Menu2_settings.source=source;
</pre>

== Output ==

See above.

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxMenu

2015-04-24T14:15:47Z

Kaplanerkan: /* Minimized */

JqxMenu

2015-04-24T14:14:59Z

Kaplanerkan: /* Styling and Appearance */

File:Jqxmenu minimized.jpg

2015-04-24T14:14:41Z

Kaplanerkan:

JqxMenu

2015-04-24T07:56:37Z

Kaplanerkan:

JqxMenu

2015-04-24T07:54:30Z

Kaplanerkan:

File:Jqxmenu fontsize.jpg

2015-04-24T07:52:00Z

Kaplanerkan:

SETTINGS Plugins

2014-12-30T17:06:06Z

Kaplanerkan: /* Settings Plugins */

== Settings Plugins==
[[File:Settings plugins.jpg]]

===SettingsTitel===

Text for Settings titel. Please wrote or leave blank any Settings Titel with or without HTML syntax.
* Default: <pre><h3>Settings Titel</h3></pre>

===SectionName===

===smallSectionName===

===SettingsControlCount===

===SettingsLabelTexte===

===SettingsControlTypeList===
A List for Settings controls, that you want use in your Settings. Which controls want you use in your settings?
* 0=Switch-Button
* 1=dropdownlist
* 2=EditBox

default
<pre>0,1,2,0,0,0</pre>
thats mean:
* 1. controls is a Switch Button
* 2. controls is a dropdownlist
* 3. controls is a Editbox
* 4. controls is a Switch Button
* 5. controls is a Switch Button
* 6. controls is a Switch Button

===Switch-Button-Height===

===Switch-Button-Width===

===SourceArrays-for-DropDownList===

== Add a new Settings Section ==

SETTINGS Plugins

2014-12-30T15:49:48Z

Kaplanerkan: /* SettingsControlTypeList */

SETTINGS Plugins

2014-12-30T15:39:55Z

Kaplanerkan: /* SettingsTitel */

SETTINGS Plugins

2014-12-30T15:38:54Z

Kaplanerkan: /* SettingsTitel */

SETTINGS Plugins

2014-12-30T15:37:37Z

Kaplanerkan: /* SectionTitel */

== Settings Plugins==
[[File:Settings plugins.jpg]]

===SettingsTitel===

Text for Settings titel. Please wrote or leave blank any Settings Titel with or without HTML syntax

===SectionName===

===smallSectionName===

===SettingsControlCount===

===SettingsLabelTexte===

===SettingsControlTypeList===

===Switch-Button-Height===

===Switch-Button-Width===

===SourceArrays-for-DropDownList===

SETTINGS Plugins

2014-12-30T12:34:38Z

Kaplanerkan:

== Settings Plugins==
[[File:Settings plugins.jpg]]

===SectionTitel===

===SectionName===

===smallSectionName===

===SettingsControlCount===

===SettingsLabelTexte===

===SettingsControlTypeList===

===Switch-Button-Height===

===Switch-Button-Width===

===SourceArrays-for-DropDownList===

SETTINGS Plugins

2014-12-30T12:31:30Z

Kaplanerkan:

SETTINGS Plugins

2014-12-30T03:57:25Z

Kaplanerkan: /* Settings Plugins */

== Settings Plugins==
[[File:Settings plugins.jpg]]

File:Settings plugins.jpg

2014-12-30T03:56:56Z

Kaplanerkan:

SETTINGS Plugins

2014-12-30T03:56:28Z

Kaplanerkan: Created page with "== Settings Plugins=="

== Settings Plugins==

User:Kaplanerkan

2014-12-30T03:54:28Z

Kaplanerkan:

== Plugins ==
* [[jQuery uLED plugin]]
* [[Parsing_XML_files_and_saving_in_a_database]]
* [[Privat_erkan_kaplan Eval Funktion]]
* [[Privat_erkan_kaplan Radiobutton Enable Disable]]
* [[Privat erkan_kaplan Saving as Md5 for later reuse]]
* [[Send Datas From Ipad and save over Apache+PHP on a Windows-Folder as INI-File]]
* [[How to Get Button Pressed Effect on IPad with Stock or Jqwigets buttons.]]
* [[Hide Show animate with Jquery]]
* [[Export MySQL to Json]]
* [[JqxGrid mit EURO (€) Zeichnen]]
* [[Jqxgrid Select the Last Inserted Row]]
* [[MYSQL 2 JSON with PHP Saved as JSON-File]]
* [[SUM with JqxGrid]]
* [[JqxGrid Settings Manipulation with Grid1_settings]]
* [[jqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)]]
* [[SETTINGS Plugins]]

JqxGrid

2014-12-29T14:33:22Z

Kaplanerkan: /* Example */

[[file:jqxGrid.png]]

== Description ==
The Grid is a powerful jQuery widget that displays tabular data. It offers rich support for interacting with data, including paging, grouping, sorting, filtering and editing.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

== Properties and Methods ==

See the complete documentation at jqWidget's site:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm

== Example ==

<pre>
Dim data, source, dataAdapter
data = generatedata(50) 'generatedata is a function which returns grid data
source = {localdata: data, datatype: "array"}
dataAdapter = new $.jqx.dataAdapter(source)

Grid1_settings.source = dataAdapter
Grid1_settings.columns = [ _
{ text: "First Name", dataField: "firstname", width: 100 }, _
{ text: "Last Name", dataField: "lastname", width: 100 }, _
{ text: "Product", dataField: "productname", width: 180 }, _
{ text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
{ text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
{ text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
]
</pre>

===Change the font size of a grid===
<pre>
$("#Grid1 .jqx-widget-content").css("font-size","30px");
</pre>

===Add a row===
<pre>
data={firstname: "Eric", _
lastname: "Cartman", _
name: "Eric Cartman", _
productname: "Double Double", _
quantity: 1, _
price: 1.95, _
total: 1.95 _
}
value=$("#Grid1").jqxGrid("addrow",null,data)
</pre>

===Select a row===
<pre>
$("#Grid1").jqxGrid({selectedrowindex: 3})
</pre>

===Delete SelectedRow===
requirement: Grid1 must have '''selectionmode=singlerow''' set.

<pre>

Function Button1_onclick()
Dim SelectedRowIndex
SelectedRowIndex = $("#Grid1").jqxGrid("getselectedrowindex")
Dim RowsCount
RowsCount = $("#Grid1").jqxGrid("getdatainformation").rowscount

If (SelectedRowIndex >= 0 && SelectedRowIndex < RowsCount) Then
Dim Id, Commit
Id = $("#Grid1").jqxGrid("getrowid", SelectedRowIndex)
Commit = $("#Grid1").jqxGrid("deleterow", Id)
End If

End Function
</pre>

===Respond to a cell getting selected===
<pre>
Function Grid1_oncellselect(event)
Dim Headername, HeaderIndex
Headername = $("#Grid1").jqxGrid("getcolumn", event.args.datafield).text
Label1.textContent = "Row: " & event.args.rowindex &", Column: " & Headername
HeaderIndex = $("#Grid1").jqxGrid("getcolumnindex", Headername )
'Result -> Index from Headername
Label2.textContent = "Header Index: " + HeaderIndex
End Function
</pre>

===Value from Selected Row and Result in JSON Format===
<pre>
Function Grid1_oncellselect(event)
Dim SelectedRow, dataFromSelectedRow
SelectedRow = event.args.rowindex

// Result in JSON-Format
dataFromSelectedRow = $("#Grid1").jqxGrid("getrowdata", SelectedRow);

MsgBox dataFromSelectedRow["firstname"]
MsgBox dataFromSelectedRow["lastname"]
MsgBox dataFromSelectedRow["productname"]
MsgBox dataFromSelectedRow["quantity"]
MsgBox dataFromSelectedRow["price"]
MsgBox dataFromSelectedRow["total"]

End Function
</pre>
===Double Select on Row/Cell ===

<pre>
Function Grid2_oncelldoubleclick(event)
Dim SelectedRow
SelectedRow = event.args.rowindex
dataFromSelectedRow = $("#Grid2").jqxGrid("getrowdata", SelectedRow);
................
................
................
End Function

or

JavaScript
Grid2.oncelldoubleclick=function(event) { var savethefunction_rvar="";
var SelectedRow;
SelectedRow = event.args.rowindex;
dataFromSelectedRow = $("#Grid2").jqxGrid("getrowdata" , SelectedRow);
.............
.............
.............
End JavaScript

or

Function Grid2_onrowclick(event)
Dim SelectedRow
SelectedRow = event.args.rowindex
dataFromSelectedRow = $("#Grid2").jqxGrid("getrowdata", SelectedRow);
...........
...........
End Function

or

JavaScript
Grid2.onrowclick=function(event) { var savethefunction_rvar="";
var SelectedRow;
SelectedRow = event.args.rowindex;
dataFromSelectedRow = $("#Grid2").jqxGrid("getrowdata" , SelectedRow);
.............
.............
.............
End JavaScript
</pre>

==Sample Code (Read from XML to JqxGrid)==

<pre>
Dim gedata, source, dataAdapter, row, req, err, data
gedata=[]
source=[]

Function Form1_onshow()

xmlDatei = "ipadSpeisekarte.xml"
req = Ajax("http://www.erkankaplan.de/ipad.php/?urlToGet=" & xmlDatei, "", "", xmlLesen)

End Function

Function xmlLesen

If !req Then Exit Function
If req.readyState<>4 Then Exit Function 'ignore progress reports
If req.status<>200 Then 'failure
Exit Function
End If
If Left(req.responseText,5)<>"<?xml" Then
console.log("XML not received" & req.responseText)
Exit Function
End If

data = $.xml2json(req.responseText)
Call fillListFirstSpeisekarte
End Function

Function fillListFirstSpeisekarte
Dim M1, M2, M3, M4, M5, M6, M7, M8, M9, M10, M11, M12, M13
gedata=[]

For i=0 To UBound(data.row)
activity=data.row[i]
M1 = activity.Menue
M2 = activity.Scout
M3 = activity.Text_D
M4 = activity.Text_C
M5 = activity.Beschreibung_D
M6 = activity.Beschreibung_C
M7 = activity.Preis3
M8 = activity.Sort
M9 = activity.Gruppe
M10 = M1 & ".png"
M11 = activity.WarenGruppe
M12 = activity.SabuSabu
M13 = activity.IpadZeitZone
row=[]
row["menue"] = M1
row["textd"] = M3
row["beschreibung"] = M5
row["eksi"] = "-"
row["anz"] = 1
row["arti"] = "+"
'row["preis"] = M7
' row["epreis"] = tmpPreis3;
' row["summe"] = tmpSumme;
' row["status"] = tmpStatus;
' 'row["bild"] = "<img width='50' height='41' src='speisenimg/1.png' >";
' row["bild"] = "" ;
gedata[i] = row

Next

source={localdata: gedata, datatype:"array"};
dataAdapter=new $.jqx.dataAdapter(source);

Grid1_settings.source = dataAdapter
Grid1_settings.columns = [ _
{ text: "Nummer", dataField: "menue", cellsalign: "right", width: 30 }, _
{ text: "Artikel", dataField: "textd", cellsalign: "left", width: 165 }, _
{ text: "-", dataField: "eksi", cellsalign: "center", width: 70 }, _
{ text: "Anz", dataField: "anz", cellsalign: "center", width: 50, columntype: "textbox" }, _
{ text: "+", dataField: "arti", cellsalign: "center", width: 70 }_
]

$("#Grid1").jqxGrid(Grid1_settings);
// Editable or not
$("#Grid1").jqxGrid("setcolumnproperty", "menue", "editable", False)
$("#Grid1").jqxGrid("setcolumnproperty", "textd", "editable", False)
$("#Grid1").jqxGrid("setcolumnproperty", "eksi", "editable", False)
$("#Grid1").jqxGrid("setcolumnproperty", "anz", "editable", True)
$("#Grid1").jqxGrid("setcolumnproperty", "arti", "editable", False)

End Function

Function Grid1_oncellselect(event)
Dim Header , SelectedRow
Header = $("#Grid1").jqxGrid("getcolumn", event.args.datafield).text
Label1.textContent = "Row: " + event.args.rowindex + ", Column: " + Header

SelectedRow = event.args.rowindex

If Header = "+" Then
Label2.textContent= "Plus Cell clicked..."
'MsgBox ("Row: " + ( event.args.rowindex) + ", Value: " + event.args.value)
End If

If Header = "-" Then
Label2.textContent = "Minus Cell clicked"
End If

Rem ColummIndex
' var index = $("#Grid1").jqxGrid("getcolumnindex", "arti") 'Result -> 4 (4. Colummn)

Dim args
args = event.args
Dim dataFromSelectedRow
Rem Result is in JSON-Format
dataFromSelectedRow = $("#Grid1").jqxGrid("getrowdata", SelectedRow);

Label3.textContent = "Readed Datas from selected Row : " + dataFromSelectedRow ["menue"] + " / " + dataFromSelectedRow ["textd"] + " / " + dataFromSelectedRow ["eksi"] + " / " + dataFromSelectedRow ["anz"] + " / " + dataFromSelectedRow ["arti"]

End Function
</pre>

== Output ==
[[File:Grid_sample_01.png]]

See above.

== Export JqxGrid and Parse exported Data ==

You can export a JqxGrid as Excel, XML, CSV, TSV, HTML, PDF or JSON

<pre>
$("#jqxgrid").jqxGrid('exportdata', 'json');
</pre>

or

you can export the data to a local variable:

<pre>
Dim ExportedData
Function Button5_ontouchstart()
Rem Data in Variable as JSON-Format
ExportedData = $("#Grid1").jqxGrid("exportdata", "json");

'ExportedData = $("#Grid1").jqxGrid("exportdata", "json", "Filename.json");

End Function
</pre>

* exportdata : Modulename
* json: Export methods ( 'xls', 'xml', 'html', 'json', 'tsv' or 'csv')
* Filename.json : Filename for exported data

More Information:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

=== Parsing the Exported data ===
Here is the complete code to parse and save into a local variable as an object
<pre>
Dim ExportedXML
Dim BestellungArray

Function Button5_ontouchstart()
Dim i
ExportedXML=[]
BestellungArray=[]

Rem Grid Data export as JSON
ExportedXML = JSON.parse($("#Grid1").jqxGrid("exportdata", "json"));

Rem Save exported Data as Object Variable
For i=0 To UBound(ExportedXML)
BestellungArray[i] = {Numarasi: ExportedXML[i].Nu, Artikel: ExportedXML[i].Artikel, Anzahl: ExportedXML[i].Anz }
Next

End Function
</pre>

== Enable / Disable JqxGrid Altrows ==
Change a Grid to set altrows at runtime. It can also be set at design time.

<pre>
$('#grid').jqxGrid({ altrows: True});
or
$('#grid').jqxGrid({ altrows: False});

</pre>

'''Result:'''

[[File:Jqxgrid altrows.png]]

[[Category:Language Reference]]

[[Category:jqWidgets]]

[[Category:Controls]]

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T23:47:29Z

Kaplanerkan:

My target app is, that the customer must choose and define your "ZeitZone" yourself
and save automatically the new values in mysql-tables.

== My MySQL Sturucture ==
<pre>
CREATE TABLE `waren_gruppen` (
`Number` INT(3) NOT NULL,
`Text` VARCHAR(50) NULL DEFAULT NULL,
`ZeitZone` INT(2) NULL DEFAULT '0',
PRIMARY KEY (`Firma`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
ROW_FORMAT=COMPACT;

</pre>

== PHP File Settings (mysql4.php)==

File saved into :
http://localhost/Kasse/mysql4.php

<pre>

<?php
header('Access-Control-Allow-Origin: *');

$host = "localhost";
$databasename = "kasse_sql";
$username ="root";
$password = "MY_MYSQL_PASSWORT";

// If You want, you can send PASS, QUERY as POST and parser later here in this php
// $x = $_GET['t'];
// $tmp = explode(";",$x);
// $password = $tmp[0];
// $query = $tmp[1] ;
// $filename = $tmp[2];

$con = mysql_connect($host,$username,$password) or die(mysql_error());
mysql_query('SET CHARACTER SET utf8');
mysql_select_db($databasename) or die(mysql_error());

$query = "Select * from waren_gruppen;";

if (isset($_GET['update']))
{
// UPDATE COMMAND in my MySQL
// UPDATE `waren_gruppen` SET Text ="Deneme" where SpkNummer= 11

$update_query = "UPDATE kasse_sql.waren_gruppen SET waren_gruppen.SpkNumber='".$_GET['Number']."',
waren_gruppen.Text='".$_GET['Text']."', waren_gruppen.ZeitZone='".$_GET['ZeitZone']."' WHERE waren_gruppen.SpkNumber='".$_GET['Number']."'";
$result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error());
echo $result;
}
else
{
// SELECT COMMAND
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$employees[] = array(
'SpkNumber' => $row['SpkNumber'],
'Text' => $row['Text'],
'ZeitZone' => $row['ZeitZone']
);
}

echo json_encode($employees);
}

</pre>

== Settings in NSB/APPStudio ==

* Start NSB/AppStudio
* Create a new Project (like IPAD)
* Add a JqxGrid in new project
* Create a new JavaScript Area

<pRE>
Function gridready()
console.log("Grid load complete")
End Function

JavaScript

$(document).ready(function () {
// prepare the data
var data = {};
var theme = 'classic';
var source =
{
datatype: "json",
datafields: [
{ name: 'Firma' },
{ name: 'Text' },
{ name: 'ZeitZone'}
],
id: 'Firma',
url: 'http://localhost/Kasse/mysql4.php',
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command

var data = "update=true&Firma=" + rowdata.Firma + "&Text=" + rowdata.Text + "&ZeitZone=" + rowdata.ZeitZone ;

$.ajax({
dataType: 'json',
url: 'http://localhost/Kasse/mysql4.php',
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
//alert ("Succes");
Label1.textContent = "ROW ID: " + rowid + " STATUS: Saved -> TRUE";
},
error: function () {
// cancel changes.
commit(false);
Label1.textContent = "ROW ID: " + rowid + " STATUS: Saved -> FALSE";
}
});
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$("#Grid1").jqxGrid(
{
width: 700,
height: 350,
selectionmode: 'singlecell',
source: source,
theme: theme,
editable: true,
columns:
[
{ text: 'Firma', editable: false, datafield: 'Firma', width: 100 },
{ text: 'Text', datafield: 'Text', width: 140 },
{ text: 'ZeitZone', datafield: 'ZeitZone', width: 150, columntype: 'dropdownlist',

createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = ['0', '1', '2'];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
},
// update the editor's value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == "") return oldvalue;
}

}
]
});
});

$('#Grid1 .jqx-widget-content').css('font-size','20px');

End JavaScript

</pre>

==Result==
[[File:Jqxgrid direkt mysql edit.jpg]]

File:Jqxgrid direkt mysql edit.jpg

2014-12-26T23:44:29Z

Kaplanerkan:

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T01:46:09Z

Kaplanerkan: /* Settings in NSB/APPStudio */

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T01:22:34Z

Kaplanerkan: /* PHP File Settings */

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T01:03:13Z

Kaplanerkan: /* PHP File Settings */

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T00:57:28Z

Kaplanerkan:

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T00:51:52Z

Kaplanerkan:

== My MySQL Sturucture ==
<pre>
CREATE TABLE `waren_gruppen` (
`Firma` INT(3) NOT NULL,
`Text` VARCHAR(50) NULL DEFAULT NULL,
`Farbe` INT(2) NULL DEFAULT '0',
PRIMARY KEY (`Firma`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
ROW_FORMAT=COMPACT;

My target app is, that the customer must choose and define your color (farbe) yourself
and save automatically the new values in mysql-tables.

</pre>

== PHP File Settings ==
<pre>

<?php
header('Access-Control-Allow-Origin: *');

$host = "localhost";
$databasename = "kasse_sql";
$username ="root";
$password = "MY_MYSQL_PASSWORT";

// If You want, you can send PASS, QUERY as POST and parser later here in this php
// $x = $_GET['t'];
// $tmp = explode(";",$x);
// $password = $tmp[0];
// $query = $tmp[1] ;
// $filename = $tmp[2];

$con = mysql_connect($host,$username,$password) or die(mysql_error());
mysql_query('SET CHARACTER SET utf8');
mysql_select_db($databasename) or die(mysql_error());
$query = "Select Firma, Text from waren_gruppen;";

if (isset($_GET['update']))
{
// UPDATE COMMAND in my MySQL
// UPDATE `waren_gruppen` SET Text ="Deneme" where firma = 11

$update_query = "UPDATE kasse_sql.waren_gruppen SET waren_gruppen.Firma='".$_GET['Firma']."',
waren_gruppen.Text='".$_GET['Text']."' WHERE waren_gruppen.Firma='".$_GET['Firma']."'";
$result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error());
echo $result;
}
else
{
// SELECT COMMAND
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$employees[] = array(
'Firma' => $row['Firma'],
'Text' => $row['Text']
);
}

echo json_encode($employees);
}

</pre>

== Settings in NSB/APPStudio ==

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T00:41:28Z

Kaplanerkan: /* PHP File Settings */

== PHP File Settings ==
<pre>

<?php
header('Access-Control-Allow-Origin: *');

$host = "localhost";
$databasename = "kasse_sql";
$username ="root";
$password = "MY_MYSQL_PASSWORT";

// If You want, you can send PASS, QUERY as POST and parser later here in this php
// $x = $_GET['t'];
// $tmp = explode(";",$x);
// $password = $tmp[0];
// $query = $tmp[1] ;
// $filename = $tmp[2];

$con = mysql_connect($host,$username,$password) or die(mysql_error());
mysql_query('SET CHARACTER SET utf8');
mysql_select_db($databasename) or die(mysql_error());
$query = "Select Firma, Text from waren_gruppen;";

if (isset($_GET['update']))
{
// UPDATE COMMAND in my MySQL
// UPDATE `waren_gruppen` SET Text ="Deneme" where firma = 11

$update_query = "UPDATE kasse_sql.waren_gruppen SET waren_gruppen.Firma='".$_GET['Firma']."',
waren_gruppen.Text='".$_GET['Text']."' WHERE waren_gruppen.Firma='".$_GET['Firma']."'";
$result = mysql_query($update_query) or die("SQL Error 1: " . mysql_error());
echo $result;
}
else
{
// SELECT COMMAND
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$employees[] = array(
'Firma' => $row['Firma'],
'Text' => $row['Text']
);
}

echo json_encode($employees);
}

</pre>

== Settings in NSB/APPStudio ==

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T00:34:35Z

Kaplanerkan:

== PHP File Settings ==

== Settings in NSB/APPStudio ==

JqxGrid Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist + using createeditor)

2014-12-26T00:33:30Z

Kaplanerkan: Created page with "== PHP File Settings =="

== PHP File Settings ==

User:Kaplanerkan

2014-12-26T00:29:19Z

Kaplanerkan:

User:Kaplanerkan

2014-12-26T00:28:36Z

Kaplanerkan:

User:Kaplanerkan

2014-12-26T00:28:06Z

Kaplanerkan:

== Plugins ==
* [[jQuery uLED plugin]]
* [[Parsing_XML_files_and_saving_in_a_database]]
* [[Privat_erkan_kaplan Eval Funktion]]
* [[Privat_erkan_kaplan Radiobutton Enable Disable]]
* [[Privat erkan_kaplan Saving as Md5 for later reuse]]
* [[Send Datas From Ipad and save over Apache+PHP on a Windows-Folder as INI-File]]
* [[How to Get Button Pressed Effect on IPad with Stock or Jqwigets buttons.]]
* [[Hide Show animate with Jquery]]
* [[Export MySQL to Json]]
* [[JqxGrid mit EURO (€) Zeichnen]]
* [[Jqxgrid Select the Last Inserted Row]]
* [[MYSQL 2 JSON with PHP Saved as JSON-File]]
* [[SUM with JqxGrid]]
* [[JqxGrid Settings Manipulation with Grid1_settings]]
* [[jqxGrid -> Server Side Editing / Update using PHP and MySQL (columntype:dropdownlist using createeditor)]]

User:Kaplanerkan

2014-12-26T00:27:30Z

Kaplanerkan:

== Plugins ==
* [[jQuery uLED plugin]]
* [[Parsing_XML_files_and_saving_in_a_database]]
* [[Privat_erkan_kaplan Eval Funktion]]
* [[Privat_erkan_kaplan Radiobutton Enable Disable]]
* [[Privat erkan_kaplan Saving as Md5 for later reuse]]
* [[Send Datas From Ipad and save over Apache+PHP on a Windows-Folder as INI-File]]
* [[How to Get Button Pressed Effect on IPad with Stock or Jqwigets buttons.]]
* [[Hide Show animate with Jquery]]
* [[Export MySQL to Json]]
* [[JqxGrid mit EURO (€) Zeichnen]]
* [[Jqxgrid Select the Last Inserted Row]]
* [[MYSQL 2 JSON with PHP Saved as JSON-File]]
* [[SUM with JqxGrid]]
* [[JqxGrid Settings Manipulation with Grid1_settings]]
* [[jqxGrid -> Server Side Editing / Update using PHP and MySQL (+ columntype: 'dropdownlist' using createeditor)]]

JqxGrid Settings Manipulation with Grid1 settings

2014-12-25T14:07:44Z

Kaplanerkan:

== Settings with Grid1_settings Parameter ==

<pre>
var source = {datatype: "json", _
datafields:[{name:"SPKNummer", type:"number"}, _
{name:"Text_D", type:"string"}, _
{name:"WGruppenText", type:"string"}, _
{name:"Preis3", type:"number"}], _
url:"http://localhost/Kasse/jsonparser.php/?urlToGet=ipadspeisekarte.json" _
};

dataAdapter=new $.jqx.dataAdapter(source);

Grid1_settings.source = dataAdapter

Grid1_settings.columns = [ _
{text:"Menue",datafield:"SPKNummer",width:100,cellsalign:"left",align: "left"}, _
{text:"Beschreibung",datafield:"Text_D", width:400,cellsalign:"left",align: "left",columntype:"textbox", filtertype:"textbox",filtercondition:"starts_with"}, _
{text:"Gruppen",filtertype: "list", datafield: "WGruppenText",filtertype: "list",width:150},_
{text:"Preis", datafield: "Preis3", width:100, cellsalign:"right", align: "right", cellsformat: "c2"}]

'
Rem Now you can use another SETTINGS for Grid1-Object
Grid1_settings.groups =["WGruppenText"]
Grid1_settings.pagermode=["simple"]

$("#Grid1").jqxGrid(Grid1_settings);
..................
..................
..................
</pre>

==Result==
[[File:Jqxgrid grupped.jpg]]

File:Jqxgrid grupped.jpg

2014-12-25T14:05:31Z

Kaplanerkan:

JqxGrid Settings Manipulation with Grid1 settings

2014-12-25T14:02:53Z

Kaplanerkan:

JqxGrid Settings Manipulation with Grid1 settings

2014-12-25T13:59:37Z

Kaplanerkan: Created page with "== Settings with Grid1_settings Parameter == var source = {datatype: "json", _ datafields:[{name:"SPKNummer", type:"number"}, _ {name:"Text_D", type..."

== Settings with Grid1_settings Parameter ==

var source = {datatype: "json", _
datafields:[{name:"SPKNummer", type:"number"}, _
{name:"Text_D", type:"string"}, _
{name:"WGruppenText", type:"string"}, _
{name:"Preis3", type:"number"}], _
url:"http://localhost/Kasse/jsonparser.php/?urlToGet=ipadspeisekarte.json" _
};

dataAdapter=new $.jqx.dataAdapter(source);

Grid1_settings.source = dataAdapter

Grid1_settings.columns = [ _
{text:"Menue",datafield:"SPKNummer",width:100,cellsalign:"left",align: "left"}, _
{text:"Beschreibung",datafield:"Text_D", width:400,cellsalign:"left",align: "left",columntype:"textbox", filtertype:"textbox",filtercondition:"starts_with"}, _
{text:"Gruppen",filtertype: "list", datafield: "WGruppenText",filtertype: "list",width:150},_
{text:"Preis", datafield: "Preis3", width:100, cellsalign:"right", align: "right", cellsformat: "c2"}]

'
Rem Now you can use another SETTINGS for Grid1-Object
Grid1_settings.groups =["WGruppenText"]
Grid1_settings.pagermode=["simple"]

$("#Grid1").jqxGrid(Grid1_settings);
..................
..................
..................
</pre>

User:Kaplanerkan

2014-12-25T13:54:04Z

Kaplanerkan:

MYSQL 2 JSON with PHP Saved as JSON-File

2014-12-25T00:35:06Z

Kaplanerkan: /* Mysql2Json.php */

=Mysql2Json.php =
PHP File save into APACHE-Server

<pre>
<?php
header('Access-Control-Allow-Origin: *');

$host = "localhost";
$databasename = "kasse_sql";
$username ="root";
$x = $_GET['t'];

$tmp = explode(";",$x);
$password = $tmp[0];
$query = $tmp[1] ;
$filename = $tmp[2];

$con = mysql_connect($host,$username,$password) or die(mysql_error());

// SOLUTION FOR UTF8 GERMAN-CHARACTERS ( ü Ü ß ä Ä .....)
// Without this Parameter show the JqxGrid another Characters
mysql_query('SET CHARACTER SET utf8');

mysql_select_db($databasename) or die(mysql_error());

$results = mysql_query($query);

$records = array();
while($obj = mysql_fetch_object($results)) {
$records []= $obj;
}
//echo json_encode($records);
//file_put_contents("data.json", json_encode($records));
switch ($filename){
case 1:
file_put_contents("Kellnerdaten.json", json_encode($records));
break;
case 2:
file_put_contents("ipadSpeisekarte.json", json_encode($records));
break;
case 3:
file_put_contents("ipadWarenGruppen.json", json_encode($records));
break;
case 4:
file_put_contents("ipadBelegung.json", json_encode($records));
break;
default:
echo "Filename was not 1-4";
break;
}
?>

</pre>

= Call From NSB-APPStudio =

<pre>
..............
..............
..............
Rem dont forget ";" otherwiese php-file can'nt parse your command
cmdMYSQL = "MY MYSQL_PASSWORT;"

Rem MySql SELECT Command
cmdMYSQL += "Select Kellner, Passwort from Kellner;"

Rem Filename to Save (look in mysql2json.php )
cmdMYSQL += "1;"

Rem Ajax CMD
req=Ajax("http://localhost/Kasse/mysql2json.php?t=" & cmdMYSQL )

Rem RESULT
If req.status=200 Then
console.log(req.responseText)
................
................
................
................
................

</pre>