Merge branch 'vnext' into mdd-fix-browserlayout

IgniteUI · Nov 13, 2023 · a764a6d · a764a6d
2 parents c4eafc2 + 7e5e7ef
commit a764a6d
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 50 deletions.
diff --git a/samples/grids/grid/action-strip/App.razor b/samples/grids/grid/action-strip/App.razor
@@ -20,7 +20,8 @@
 
                 <IgbGridEditingActions
                 EditRow="true"
-                DeleteRow="false">
+                DeleteRow="true"
+                AddRow="true">
                 </IgbGridEditingActions>
 
             </IgbActionStrip>

diff --git a/samples/grids/grid/binding-composite-data/Program.cs b/samples/grids/grid/binding-composite-data/Program.cs
@@ -20,7 +20,8 @@ public static async Task Main(string[] args)
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             // registering Ignite UI modules
             builder.Services.AddIgniteUIBlazor(
-                typeof(IgbGridModule)
+                typeof(IgbGridModule),
+                typeof(IgbInputModule)
             );
             await builder.Build().RunAsync();
         }

diff --git a/samples/grids/grid/binding-composite-data/wwwroot/events.js b/samples/grids/grid/binding-composite-data/wwwroot/events.js
@@ -3,6 +3,7 @@ igRegisterScript("WebGridCompositeContactCellTemplate", (ctx) => {
     var html = window.igTemplating.html;
     return html` <div class="contact-container">
     <span><strong>Name:</strong> ${ctx.cell.row.data.ContactName}</span>
+    <br />
     <span><strong>Title:</strong> ${ctx.cell.row.data.ContactTitle}</span>
     <br />
     <span><strong>Company:</strong> ${ctx.cell.row.data.CompanyName}</span>
@@ -15,22 +16,12 @@ igRegisterScript("WebGridCompositeContactEditCellTemplate", (ctx) => {
     window.keyUpHandler = function () {
         ctx.cell.row.data[window.event.target.id] = window.event.target.value;
     }
-    return html`<div class="contact-container--edit">
-    <div style="display:flex; margin-top:3px">
-        <div>
-            <strong>Name:</strong>
-            <input id='ContactName' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.ContactName}"></input>
-        </div>
-        <div style="margin-left: 10px">
-            <strong>Title:</strong>
-            <input id='ContactTitle' onkeyup='keyUpHandler()' value='${ctx.cell.row.data.ContactTitle}'></input>
-        </div>
-    </div>
-    <div style="margin-top: 10px">
-        <strong>Company:</strong>
-        <input id='CompanyName' onkeyup='keyUpHandler()' value='${ctx.cell.row.data.CompanyName}'></input>
-    </div>
-</div>`;
+    return html`<div class="contact-container--edit" style="padding: 1rem">
+                    <igc-input id="ContactName" label='Name' type="text" name="name" value="${ctx.cell.row.data.ContactName}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="ContactTitle" label='Title' type="text" name="name" value="${ctx.cell.row.data.ContactTitle}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="CompanyName" label='Company' type="text" name="name" value="${ctx.cell.row.data.CompanyName}" onkeyup='keyUpHandler()'></igc-input>
+                </div>
+   `;
 }, false);
 
 igRegisterScript("WebGridCompositeAddressCellTemplate", (ctx) => {
@@ -56,22 +47,12 @@ igRegisterScript("WebGridCompositeAddressEditCellTemplate", (ctx) => {
         ctx.cell.row.data[window.event.target.id] = window.event.target.value;
     }
 
-    return html`<div class="address-container--edit">
-    <div>
-        <span><strong>Country:</strong></span>
-        <input id='Country' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.Country}"></input>
-        <br>
-        <span><strong>City:</strong></span>
-        <input id='City' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.City}"></input>
-    </div>
-    <div>
-        <span><strong>Postal Code:</strong></span>
-        <input id='PostalCode' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.PostalCode}"></input>
-        <br>
-        <span><strong>Selected:</strong></span>
-        <input id='Phone' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.Phone}"></input>
-    </div>
-    <br>
-</div>`;
+    return html`
+                <div class="contact-container--edit" style="padding: 1rem">
+                    <igc-input id="Country" label='Country' type="text" name="country" value="${ctx.cell.row.data.Country}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="City" label='City' type="text" name="city" value="${ctx.cell.row.data.City}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="PostalCode" label='PostalCode' type="text" name="postalcode" value="${ctx.cell.row.data.PostalCode}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="Phone" label='Phone' type="text" name="phone" value="${ctx.cell.row.data.Phone}" onkeyup='keyUpHandler()'></igc-input>
+                </div>`;
 }, false);
 
diff --git a/samples/grids/grid/binding-nested-data-1/App.razor b/samples/grids/grid/binding-nested-data-1/App.razor
@@ -32,7 +32,7 @@
             Field="Employees"
             Header="Employees"
             BodyTemplateScript="WebGridNestedDataCellTemplate"
-            Width="30%"
+            Width="20%"
             Name="column1"
             @ref="column1">
             </IgbColumn>

diff --git a/samples/grids/grid/binding-nested-data-1/Program.cs b/samples/grids/grid/binding-nested-data-1/Program.cs
@@ -20,7 +20,8 @@ public static async Task Main(string[] args)
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             // registering Ignite UI modules
             builder.Services.AddIgniteUIBlazor(
-                typeof(IgbGridModule)
+                typeof(IgbGridModule),
+                typeof(IgbInputModule)
             );
             await builder.Build().RunAsync();
         }

diff --git a/samples/grids/grid/binding-nested-data-1/wwwroot/events.js b/samples/grids/grid/binding-nested-data-1/wwwroot/events.js
@@ -14,14 +14,8 @@ igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => {
         ${person.Name}
         </div>
         <div class="description">
-            <div style="display: flex; align-items: center;">
-                <label for="title" style="width: 2rem; margin: 0rem;">Title</label>
-                <input id='Title' type="text" name="title" value="${person.Title}" style="text-overflow: ellipsis;" />
-            </div>
-            <div style="display: flex; align-items: center;">
-                <label for="age" style="width: 2rem; margin: 0rem;">Age</label>
-                <input id='Age' type="text" name="title" value="${person.Age}" style="text-overflow: ellipsis;" />
-            </div>
+            <igc-input label='Title' type="text" name="title" value="${person.Title}" style="text-overflow: ellipsis;"></igc-input>
+            <igc-input label="Age" type="text" name="title" value="${person.Age}" style="text-overflow: ellipsis;"></igc-input>
         </div>
     </igc-expansion-panel>
         `;

diff --git a/samples/grids/tree-grid/multi-column-headers-overview/App.razor b/samples/grids/tree-grid/multi-column-headers-overview/App.razor
@@ -5,23 +5,22 @@
         <IgbPropertyEditorPanel
         Name="PropertyEditor"
         @ref="propertyEditor"
-
         Target="treeGrid"
         DescriptionType="WebTreeGrid"
         IsHorizontal="true"
         IsWrappingEnabled="true">
             <IgbPropertyEditorPropertyDescription
             ValueType="PropertyEditorValueType.Button"
             PrimitiveValue="@("Toggle First Group Pinned")"
-            ButtonClicked="WebGridPinFirstGroupToggle"
+            ButtonClicked="WebTreeGridPinFirstGroupToggle"
             Name="propertyEditorPropertyDescription1"
             @ref="propertyEditorPropertyDescription1">
             </IgbPropertyEditorPropertyDescription>
 
             <IgbPropertyEditorPropertyDescription
             ValueType="PropertyEditorValueType.Button"
             PrimitiveValue="@("Toggle First Group Hidden")"
-            ButtonClicked="WebGridHideFirstGroupToggle"
+            ButtonClicked="WebTreeGridHideFirstGroupToggle"
             Name="propertyEditorPropertyDescription2"
             @ref="propertyEditorPropertyDescription2">
             </IgbPropertyEditorPropertyDescription>
@@ -130,27 +129,34 @@
 
 @code {
 
+    private Action BindElements { get; set; }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         var propertyEditor = this.propertyEditor;
         var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1;
         var propertyEditorPropertyDescription2 = this.propertyEditorPropertyDescription2;
         var treeGrid = this.treeGrid;
 
+        this.BindElements = () => {
+            propertyEditor.Target = this.treeGrid;
+        };
+        this.BindElements();
+
     }
 
     private IgbPropertyEditorPanel propertyEditor;
     private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription1;
     private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription2;
     private IgbTreeGrid treeGrid;
 
-    public void WebGridPinFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+    public void WebTreeGridPinFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
     {
         var columnGroup = this.treeGrid.ActualColumns[1];
         columnGroup.Pinned = !columnGroup.Pinned;
     }
 
-    public void WebGridHideFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+    public void WebTreeGridHideFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
     {
         var columnGroup = this.treeGrid.ActualColumns[1];
         columnGroup.Hidden = !columnGroup.Hidden;