jqwidgets · h3trika · Aug 31, 2020 · Aug 31, 2020
diff --git a/demos/bulletchart/settings/App.razor b/demos/bulletchart/settings/App.razor
@@ -267,7 +267,6 @@
     private void valueSliderChange(IDictionary<string, object> e)
     {
         double newValue = Double.Parse(e["value"].ToString());
-        Console.WriteLine(newValue);
         myBulletChart.val(newValue);      
     } 
 

diff --git a/demos/colorpicker/settings/App.razor b/demos/colorpicker/settings/App.razor
@@ -0,0 +1,32 @@
+<JqxColorPicker @ref="myColorPicker"
+    width=250 height=250>
+</JqxColorPicker>
+
+<div style="margin-top: 20px">
+    <div style="margin-bottom: 5px">Color Modes</div>
+
+    <JqxRadioButton onChecked=onChecked isChecked=true>
+        Saturation Color Mode
+    </JqxRadioButton>
+
+    <JqxRadioButton @ref="hueModeBtn" onChecked=onChecked>
+        Hue Color Mode
+    </JqxRadioButton>
+</div>
+
+@code {
+    JqxColorPicker myColorPicker;
+    JqxRadioButton hueModeBtn;
+
+    void onChecked(IDictionary<string, object> e)
+    {
+        if (hueModeBtn.isChecked)
+        {
+            myColorPicker.colorMode = "hue";
+        }
+        else
+        {
+            myColorPicker.colorMode = "saturation";
+        }
+    }
+}
diff --git a/demos/datatable/rowselectionhover/App.razor b/demos/datatable/rowselectionhover/App.razor
@@ -8,17 +8,17 @@
 <div style="margin-top: 10px; margin-left: 10px">
     <div><strong>Settings</strong></div>
     Select Row:
-    @* <JqxInput @ref="myInput"
+    <JqxInput @ref="myInput"
         width=60 height=30 value=0>
-    </JqxInput> *@
+    </JqxInput>
     <br />
     <br />
     <JqxButton onClick="rowSelectBtnOnClick"
-        width=105 height=20>
+        width=105 height=30>
         Select
     </JqxButton>
     <JqxButton onClick="clearSelectionBtnOnClick"
-        width=135 height=20>
+        width=135 height=30>
         Clear Selection
     </JqxButton>
     <div style="clear: both"></div>
@@ -111,7 +111,7 @@
 
     public void rowSelectBtnOnClick(IDictionary<string, object> e)
     {
-        int index = 10; // int.Parse(myInput.value.ToString());
+        int index = int.Parse(myInput.value.ToString());
         myDataTable.selectRow(index);
     }
 

diff --git a/demos/dragdrop/events/App.razor b/demos/dragdrop/events/App.razor
@@ -0,0 +1,113 @@
+<div class="container">
+    <div class="draggable-parent">
+
+        <JqxDragDrop
+            onDragStart=onDragStart onDragEnd=onDragEnd
+            onDropTargetEnter=onDropTargetEnter onDropTargetLeave=onDropTargetLeave
+            restricter=restricter dropTarget=dropTarget>
+
+            <div class="label">
+                I can be dragged only inside my parent
+            </div>
+        </JqxDragDrop>
+
+        <div class="drop-target">
+            <div class="label">
+                I am a drop target
+            </div>
+        </div>
+
+    </div>
+
+    <JqxPanel @ref="myPanel" width=260 height=330></JqxPanel>
+</div>
+
+@code {
+    JqxPanel myPanel;
+
+    string dropTarget = ".drop-target";
+
+    IDictionary<string, int> restricter = new Dictionary<string, int>
+    {
+        { "left", 10 },
+        { "top", 45 },
+        { "width", 200 },
+        { "height", 200 }
+    };
+
+    void onDragStart(IDictionary<string, object> e)
+    {
+        addEvent("DragStart");
+    }
+
+    void onDragEnd(IDictionary<string, object> e)
+    {
+        addEvent("DragEnd");
+    }
+
+    void onDropTargetEnter(IDictionary<string, object> e)
+    {
+        addEvent("DropTargetEnter");
+    }
+
+    void onDropTargetLeave(IDictionary<string, object> e)
+    {
+        addEvent("DropTargetLeave");
+    }
+
+    void addEvent(string type)
+    {
+        myPanel.prepend("<div>" + type + "</div>");
+    }
+}
+
+<style>
+    .container {
+        width: 650px;
+        height: 260px;
+        display: flex;
+    }
+
+    .draggable-parent {
+        width: 294px;
+        position: relative;
+        text-align: center;
+        background-color: #EEFFEE;
+        border: 1px solid #eee;
+        margin-right: 30px;
+    }
+
+    .draggable-parent .label {
+        font-size: 11px;
+    }
+
+    .drop-target {
+        width: 120px;
+        height: 120px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: #FBFFB5;
+        border: 1px solid #ddd;
+    }
+
+    .jqx-draggable {
+        z-index: 1;
+    }
+
+    .jqx-draggable > div {
+        width: 100px;
+        height: 100px;
+        border: 1px solid #BBBBBB;
+        background-color: #C9ECFF;
+    }
+
+    .jqx-panel {
+        height: 258px !important;
+    }
+
+    .jqx-panel > div {
+        font-size: 13px;
+        padding: 10px;
+    }
+</style>
diff --git a/demos/form/defaultfunctionality/App.razor b/demos/form/defaultfunctionality/App.razor
@@ -0,0 +1,141 @@
+<div style="width: 300px;">
+    <JqxForm value=value template=template></JqxForm>
+</div>
+
+@code {
+    static IDictionary<string, string>[] columns = new Dictionary<string, string>[]
+    {
+        new Dictionary<string, string>
+        {
+            { "type", "button" },
+            { "text", "Sign Up" },
+            { "width", "90px" },
+            { "columnWidth", "50%" },
+            { "align", "right" }
+        },
+        new Dictionary<string, string>
+        {
+            { "type", "button" },
+            { "text", "Cancel" },
+            { "width", "90px" },
+            { "columnWidth", "50%" }
+        }
+    };
+
+    IDictionary<string, string> value = new Dictionary<string, string>
+    {
+        { "firstName", "John" },
+        { "lastName", "Scott" },
+        { "address", "1st Ave SW" },
+        { "city", "San Antonio" },
+        { "state", "Texas" },
+        { "zip", "78209" }
+    };
+
+    IDictionary<string, object>[] template = new Dictionary<string, object>[]
+    {
+        new Dictionary<string, object>
+        {
+            { "bind", "firstName" },
+            { "type", "text" },
+            { "label", "First name" },
+            { "required", true },
+            { "labelWidth", "85px" },
+            { "width", "250px" },
+            { "info", "Enter first name" },
+            { "infoPosition", "right" }
+        },
+        new Dictionary<string, object>
+        {
+            { "bind", "lastName" },
+            { "type", "text" },
+            { "label", "Last  name" },
+            { "required", true },
+            { "labelWidth", "85px" },
+            { "width", "250px" },
+            { "info", "Enter last name" },
+            { "infoPosition", "right" }
+        },
+        new Dictionary<string, object>
+        {
+            { "bind", "company" },
+            { "type", "text" },
+            { "label", "Company" },
+            { "required", false },
+            { "labelWidth", "85px" },
+            { "width", "250px" }
+        },
+        new Dictionary<string, object>
+        {
+            { "bind", "address" },
+            { "type", "text" },
+            { "label", "Address" },
+            { "required", true },
+            { "labelWidth", "85px" },
+            { "width", "250px" }
+        },
+        new Dictionary<string, object>
+        {
+            { "bind", "city" },
+            { "type", "text" },
+            { "label", "City" },
+            { "required", true },
+            { "labelWidth", "85px" },
+            { "width", "250px" }
+        },
+        new Dictionary<string, object>
+        {
+            { "bind", "state" },
+            { "type", "option" },
+            { "label", "State" },
+            { "required", true },
+            { "labelWidth", "85px" },
+            { "width", "250px" },
+            { "component", "jqxDropDownList" },
+            { 
+                "options",
+                new Dictionary<string, object>[]
+                {
+                    new Dictionary<string, object>
+                    {
+                        { "value", "California" }
+                    },
+                    new Dictionary<string, object>
+                    {
+                        { "value", "New York" }
+                    },
+                    new Dictionary<string, object>
+                    {
+                        { "value", "Oregon" }
+                    },
+                    new Dictionary<string, object>
+                    {
+                        { "value", "Illinois" }
+                    },
+                    new Dictionary<string, object>
+                    {
+                        { "value", "Texas" }
+                    }
+                }
+            }
+        },
+        new Dictionary<string, object>
+        {
+            { "bind", "zip" },
+            { "type", "text" },
+            { "label", "Zip code" },
+            { "required", true },
+            { "labelWidth", "85px" },
+            { "width", "250px" }
+        },
+        new Dictionary<string, object>
+        {
+            { "rowHeight", "10px" },
+            { "type", "blank" }
+        },
+        new Dictionary<string, object>
+        {
+            { "columns", columns }
+        }
+    };
+}
diff --git a/demos/formattedinput/exponentialnotation/App.razor b/demos/formattedinput/exponentialnotation/App.razor
@@ -1,22 +1,21 @@
 @inject IJSRuntime JSRuntime;
 
 <JqxFormattedInput @ref="myFormattedInput"
-    width=250 height=25 radix=radix decimalNotation=decimalNotation>
+    width=250 height=25 value=330000 radix=radix decimalNotation=decimalNotation>
 </JqxFormattedInput>
 
 <div style="margin-top: 20px;">
-    <JqxButton width=buttonWidth onClick="getDecimal">Get decimal value</JqxButton>
-    <JqxButton width=buttonWidth onClick="getExponential">Get exponential notation</JqxButton>
+    <JqxButton width=175 onClick=getDecimal>Get decimal value</JqxButton>
+    <JqxButton width=175 onClick=getExponential>Get exponential notation</JqxButton>
     <br />
-    <JqxButton width=buttonWidth onClick="getScientific">Get scientific notation</JqxButton>
-    <JqxButton width=buttonWidth onClick="getEngineering">Get engineering notation</JqxButton>
+    <JqxButton width=175 onClick=getScientific>Get scientific notation</JqxButton>
+    <JqxButton width=175 onClick=getEngineering>Get engineering notation</JqxButton>
 </div>
 
 @code {
     JqxFormattedInput myFormattedInput;
     string radix = "decimal";
-    string decimalNotation = "exponential";   
-    int buttonWidth = 175;
+    string decimalNotation = "exponential"; 
 
     private void getDecimal(IDictionary<string, object> e) 
     {

diff --git a/demos/formattedinput/keyboardnavigation/App.razor b/demos/formattedinput/keyboardnavigation/App.razor
@@ -1,5 +1,5 @@
 <JqxFormattedInput
-    width=250 height=25 radix=radix value=value spinButtons=false dropDown=true>
+    width=250 height=25 radix=radix value=value dropDown=true>
 </JqxFormattedInput>
 
 <br />

diff --git a/demos/formattedinput/simpleinput/App.razor b/demos/formattedinput/simpleinput/App.razor
@@ -1,15 +1,18 @@
 @inject IJSRuntime JSRuntime;
 
-<JqxFormattedInput @ref="myFormattedInput" width=250 height=25 radix=radix></JqxFormattedInput>
+<JqxFormattedInput @ref="myFormattedInput"
+    width=250 height=25 radix=radix
+    value=100001 spinButtons=true>
+</JqxFormattedInput>
 
-<JqxButton width=buttonWidth onClick="getOctal">Get octal value</JqxButton>
-<JqxButton width=buttonWidth onClick="getDecimal">Get decimal value</JqxButton>
-<JqxButton width=buttonWidth onClick="getHexadecimal">Get hexadecimal value</JqxButton>
+<JqxButton width=175 onClick="getOctal">Get octal value</JqxButton>
+<JqxButton width=175 onClick="getDecimal">Get decimal value</JqxButton>
+<JqxButton width=175 onClick="getHexadecimal">Get hexadecimal value</JqxButton>
 
 @code {
     JqxFormattedInput myFormattedInput;
+
     string radix = "binary";
-    int buttonWidth = 175;
 
     private void getOctal(IDictionary<string, object> e)
     {