Skip to content

Commit 7b0afe1

Browse files
h3trikah3trika
authored
Update Demos (#57)
1 parent 0fdc278 commit 7b0afe1

File tree

63 files changed

+684
-384
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+684
-384
lines changed

‎demos/bulletchart/settings/App.razor‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,6 @@
267267
private void valueSliderChange(IDictionary<string, object> e)
268268
{
269269
double newValue = Double.Parse(e["value"].ToString());
270-
Console.WriteLine(newValue);
271270
myBulletChart.val(newValue);
272271
}
273272

‎demos/colorpicker/settings/App.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<JqxColorPicker @ref="myColorPicker"
2+
width=250 height=250>
3+
</JqxColorPicker>
4+
5+
<div style="margin-top: 20px">
6+
<div style="margin-bottom: 5px">Color Modes</div>
7+
8+
<JqxRadioButton onChecked=onChecked isChecked=true>
9+
Saturation Color Mode
10+
</JqxRadioButton>
11+
12+
<JqxRadioButton @ref="hueModeBtn" onChecked=onChecked>
13+
Hue Color Mode
14+
</JqxRadioButton>
15+
</div>
16+
17+
@code {
18+
JqxColorPicker myColorPicker;
19+
JqxRadioButton hueModeBtn;
20+
21+
void onChecked(IDictionary<string, object> e)
22+
{
23+
if (hueModeBtn.isChecked)
24+
{
25+
myColorPicker.colorMode = "hue";
26+
}
27+
else
28+
{
29+
myColorPicker.colorMode = "saturation";
30+
}
31+
}
32+
}

‎demos/datatable/rowselectionhover/App.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88
<div style="margin-top: 10px; margin-left: 10px">
99
<div><strong>Settings</strong></div>
1010
Select Row:
11-
@* <JqxInput @ref="myInput"
11+
<JqxInput @ref="myInput"
1212
width=60 height=30 value=0>
13-
</JqxInput> *@
13+
</JqxInput>
1414
<br />
1515
<br />
1616
<JqxButton onClick="rowSelectBtnOnClick"
17-
width=105 height=20>
17+
width=105 height=30>
1818
Select
1919
</JqxButton>
2020
<JqxButton onClick="clearSelectionBtnOnClick"
21-
width=135 height=20>
21+
width=135 height=30>
2222
Clear Selection
2323
</JqxButton>
2424
<div style="clear: both"></div>
@@ -111,7 +111,7 @@
111111

112112
public void rowSelectBtnOnClick(IDictionary<string, object> e)
113113
{
114-
int index = 10; // int.Parse(myInput.value.ToString());
114+
int index = int.Parse(myInput.value.ToString());
115115
myDataTable.selectRow(index);
116116
}
117117

‎demos/dragdrop/events/App.razor‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<div class="container">
2+
<div class="draggable-parent">
3+
4+
<JqxDragDrop
5+
onDragStart=onDragStart onDragEnd=onDragEnd
6+
onDropTargetEnter=onDropTargetEnter onDropTargetLeave=onDropTargetLeave
7+
restricter=restricter dropTarget=dropTarget>
8+
9+
<div class="label">
10+
I can be dragged only inside my parent
11+
</div>
12+
</JqxDragDrop>
13+
14+
<div class="drop-target">
15+
<div class="label">
16+
I am a drop target
17+
</div>
18+
</div>
19+
20+
</div>
21+
22+
<JqxPanel @ref="myPanel" width=260 height=330></JqxPanel>
23+
</div>
24+
25+
@code {
26+
JqxPanel myPanel;
27+
28+
string dropTarget = ".drop-target";
29+
30+
IDictionary<string, int> restricter = new Dictionary<string, int>
31+
{
32+
{ "left", 10 },
33+
{ "top", 45 },
34+
{ "width", 200 },
35+
{ "height", 200 }
36+
};
37+
38+
void onDragStart(IDictionary<string, object> e)
39+
{
40+
addEvent("DragStart");
41+
}
42+
43+
void onDragEnd(IDictionary<string, object> e)
44+
{
45+
addEvent("DragEnd");
46+
}
47+
48+
void onDropTargetEnter(IDictionary<string, object> e)
49+
{
50+
addEvent("DropTargetEnter");
51+
}
52+
53+
void onDropTargetLeave(IDictionary<string, object> e)
54+
{
55+
addEvent("DropTargetLeave");
56+
}
57+
58+
void addEvent(string type)
59+
{
60+
myPanel.prepend("<div>" + type + "</div>");
61+
}
62+
}
63+
64+
<style>
65+
.container {
66+
width: 650px;
67+
height: 260px;
68+
display: flex;
69+
}
70+
71+
.draggable-parent {
72+
width: 294px;
73+
position: relative;
74+
text-align: center;
75+
background-color: #EEFFEE;
76+
border: 1px solid #eee;
77+
margin-right: 30px;
78+
}
79+
80+
.draggable-parent .label {
81+
font-size: 11px;
82+
}
83+
84+
.drop-target {
85+
width: 120px;
86+
height: 120px;
87+
position: absolute;
88+
bottom: 0;
89+
right: 0;
90+
background-color: #FBFFB5;
91+
border: 1px solid #ddd;
92+
}
93+
94+
.jqx-draggable {
95+
z-index: 1;
96+
}
97+
98+
.jqx-draggable > div {
99+
width: 100px;
100+
height: 100px;
101+
border: 1px solid #BBBBBB;
102+
background-color: #C9ECFF;
103+
}
104+
105+
.jqx-panel {
106+
height: 258px !important;
107+
}
108+
109+
.jqx-panel > div {
110+
font-size: 13px;
111+
padding: 10px;
112+
}
113+
</style>

‎demos/form/defaultfunctionality/App.razor‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<div style="width: 300px;">
2+
<JqxForm value=value template=template></JqxForm>
3+
</div>
4+
5+
@code {
6+
static IDictionary<string, string>[] columns = new Dictionary<string, string>[]
7+
{
8+
new Dictionary<string, string>
9+
{
10+
{ "type", "button" },
11+
{ "text", "Sign Up" },
12+
{ "width", "90px" },
13+
{ "columnWidth", "50%" },
14+
{ "align", "right" }
15+
},
16+
new Dictionary<string, string>
17+
{
18+
{ "type", "button" },
19+
{ "text", "Cancel" },
20+
{ "width", "90px" },
21+
{ "columnWidth", "50%" }
22+
}
23+
};
24+
25+
IDictionary<string, string> value = new Dictionary<string, string>
26+
{
27+
{ "firstName", "John" },
28+
{ "lastName", "Scott" },
29+
{ "address", "1st Ave SW" },
30+
{ "city", "San Antonio" },
31+
{ "state", "Texas" },
32+
{ "zip", "78209" }
33+
};
34+
35+
IDictionary<string, object>[] template = new Dictionary<string, object>[]
36+
{
37+
new Dictionary<string, object>
38+
{
39+
{ "bind", "firstName" },
40+
{ "type", "text" },
41+
{ "label", "First name" },
42+
{ "required", true },
43+
{ "labelWidth", "85px" },
44+
{ "width", "250px" },
45+
{ "info", "Enter first name" },
46+
{ "infoPosition", "right" }
47+
},
48+
new Dictionary<string, object>
49+
{
50+
{ "bind", "lastName" },
51+
{ "type", "text" },
52+
{ "label", "Last name" },
53+
{ "required", true },
54+
{ "labelWidth", "85px" },
55+
{ "width", "250px" },
56+
{ "info", "Enter last name" },
57+
{ "infoPosition", "right" }
58+
},
59+
new Dictionary<string, object>
60+
{
61+
{ "bind", "company" },
62+
{ "type", "text" },
63+
{ "label", "Company" },
64+
{ "required", false },
65+
{ "labelWidth", "85px" },
66+
{ "width", "250px" }
67+
},
68+
new Dictionary<string, object>
69+
{
70+
{ "bind", "address" },
71+
{ "type", "text" },
72+
{ "label", "Address" },
73+
{ "required", true },
74+
{ "labelWidth", "85px" },
75+
{ "width", "250px" }
76+
},
77+
new Dictionary<string, object>
78+
{
79+
{ "bind", "city" },
80+
{ "type", "text" },
81+
{ "label", "City" },
82+
{ "required", true },
83+
{ "labelWidth", "85px" },
84+
{ "width", "250px" }
85+
},
86+
new Dictionary<string, object>
87+
{
88+
{ "bind", "state" },
89+
{ "type", "option" },
90+
{ "label", "State" },
91+
{ "required", true },
92+
{ "labelWidth", "85px" },
93+
{ "width", "250px" },
94+
{ "component", "jqxDropDownList" },
95+
{
96+
"options",
97+
new Dictionary<string, object>[]
98+
{
99+
new Dictionary<string, object>
100+
{
101+
{ "value", "California" }
102+
},
103+
new Dictionary<string, object>
104+
{
105+
{ "value", "New York" }
106+
},
107+
new Dictionary<string, object>
108+
{
109+
{ "value", "Oregon" }
110+
},
111+
new Dictionary<string, object>
112+
{
113+
{ "value", "Illinois" }
114+
},
115+
new Dictionary<string, object>
116+
{
117+
{ "value", "Texas" }
118+
}
119+
}
120+
}
121+
},
122+
new Dictionary<string, object>
123+
{
124+
{ "bind", "zip" },
125+
{ "type", "text" },
126+
{ "label", "Zip code" },
127+
{ "required", true },
128+
{ "labelWidth", "85px" },
129+
{ "width", "250px" }
130+
},
131+
new Dictionary<string, object>
132+
{
133+
{ "rowHeight", "10px" },
134+
{ "type", "blank" }
135+
},
136+
new Dictionary<string, object>
137+
{
138+
{ "columns", columns }
139+
}
140+
};
141+
}

‎demos/formattedinput/exponentialnotation/App.razor‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
@inject IJSRuntime JSRuntime;
22

33
<JqxFormattedInput @ref="myFormattedInput"
4-
width=250 height=25 radix=radix decimalNotation=decimalNotation>
4+
width=250 height=25 value=330000 radix=radix decimalNotation=decimalNotation>
55
</JqxFormattedInput>
66

77
<div style="margin-top: 20px;">
8-
<JqxButton width=buttonWidth onClick="getDecimal">Get decimal value</JqxButton>
9-
<JqxButton width=buttonWidth onClick="getExponential">Get exponential notation</JqxButton>
8+
<JqxButton width=175 onClick=getDecimal>Get decimal value</JqxButton>
9+
<JqxButton width=175 onClick=getExponential>Get exponential notation</JqxButton>
1010
<br />
11-
<JqxButton width=buttonWidth onClick="getScientific">Get scientific notation</JqxButton>
12-
<JqxButton width=buttonWidth onClick="getEngineering">Get engineering notation</JqxButton>
11+
<JqxButton width=175 onClick=getScientific>Get scientific notation</JqxButton>
12+
<JqxButton width=175 onClick=getEngineering>Get engineering notation</JqxButton>
1313
</div>
1414

1515
@code {
1616
JqxFormattedInput myFormattedInput;
1717
string radix = "decimal";
18-
string decimalNotation = "exponential";
19-
int buttonWidth = 175;
18+
string decimalNotation = "exponential";
2019

2120
private void getDecimal(IDictionary<string, object> e)
2221
{

‎demos/formattedinput/keyboardnavigation/App.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<JqxFormattedInput
2-
width=250 height=25 radix=radix value=value spinButtons=false dropDown=true>
2+
width=250 height=25 radix=radix value=value dropDown=true>
33
</JqxFormattedInput>
44

55
<br />

‎demos/formattedinput/simpleinput/App.razor‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
@inject IJSRuntime JSRuntime;
22

3-
<JqxFormattedInput @ref="myFormattedInput" width=250 height=25 radix=radix></JqxFormattedInput>
3+
<JqxFormattedInput @ref="myFormattedInput"
4+
width=250 height=25 radix=radix
5+
value=100001 spinButtons=true>
6+
</JqxFormattedInput>
47

5-
<JqxButton width=buttonWidth onClick="getOctal">Get octal value</JqxButton>
6-
<JqxButton width=buttonWidth onClick="getDecimal">Get decimal value</JqxButton>
7-
<JqxButton width=buttonWidth onClick="getHexadecimal">Get hexadecimal value</JqxButton>
8+
<JqxButton width=175 onClick="getOctal">Get octal value</JqxButton>
9+
<JqxButton width=175 onClick="getDecimal">Get decimal value</JqxButton>
10+
<JqxButton width=175 onClick="getHexadecimal">Get hexadecimal value</JqxButton>
811

912
@code {
1013
JqxFormattedInput myFormattedInput;
14+
1115
string radix = "binary";
12-
int buttonWidth = 175;
1316

1417
private void getOctal(IDictionary<string, object> e)
1518
{

0 commit comments

Comments
 (0)