Blazor 그리드 편집
Blazor Grid의 Ignite UI for Blazor 레코드 생성, 업데이트 및 삭제와 같은 데이터 조작 작업을 수행하는 간편한 방법을 제공합니다. IgbGrid 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.
설정
활성화해야 하는 편집 모드를 지정하기 위해 IgbGrid Editable 및 RowEditable과 같은 부울 속성을 노출합니다.
Editable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 열의 편집이 비활성화됩니다. 이것이 기본값입니다.
- true- 해당 열에 대한 편집이 활성화됩니다.
열을 편집할 수 없는 경우에도
IgbGrid에서 노출하는 공개 API를 통해 해당 값을 수정할 수 있습니다.
RowEditable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 그리드의 행 편집이 비활성화됩니다. 이것이 기본값입니다.
- true- 해당 그리드의 행 편집이 활성화됩니다.
IgbGrid에서 RowEditable 속성을 true로 설정하고 Editable 속성을 어떤 열에도 명시적으로 정의하지 않은 경우 기본 키를 제외한 모든 열에 대해 편집이 활성화됩니다.
- 셀 및 일괄 편집- 이 시나리오에서는 각 셀의 모든 단일 수정 사항이 별도로 보존되며 실행 취소/다시 실행 작업이 셀 수준에서 가능합니다.
- 행 및 일괄 편집- 이 시나리오에서는 수정 사항이 행 수준에서 유지되므로 실행 취소/다시 실행 작업은 수정된 각 셀에 대해 작동하지 않고 각 행의 여러 셀에 대해 작동합니다.
템플릿 편집
데이터 유형별 편집 템플릿을 사용하려면 열의 DataType 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴보겠습니다.
-
string데이터 유형의 경우 기본 템플릿은IgbInput사용합니다. -
number데이터 유형의 경우 기본 템플릿은IgbInputtype="number"를 사용하므로 숫자로 구문 분석할 수 없는 값으로 셀을 업데이트하려고 하면 변경 사항이 삭제되고 셀의 값은 0으로 설정합니다. -
date데이터 유형의 경우 기본 템플릿은IgbDatePicker사용합니다. -
dateTime데이터 유형의 경우 기본 템플릿은DateTimeEditor사용합니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다. -
time데이터 유형의 경우 기본 템플릿은TimePicker사용합니다. -
boolean데이터 유형의 경우 기본 템플릿은IgbCheckbox사용합니다. -
currency데이터 유형의 경우 기본 템플릿은 애플리케이션 또는 그리드 로케일 설정을 기반으로 하는 접두사/접미사 구성과 함께InputGroup사용합니다. -
percent데이터 유형의 경우 기본 템플릿은 편집된 값의 미리 보기를 백분율로 표시하는 접미사 요소와 함께InputGroup사용합니다.
- 사용자 정의 템플릿의 경우 셀 편집 항목을 참조하세요.
사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.
이벤트 인수 및 순서
그리드는 편집 경험을 더 효과적으로 제어할 수 있는 다양한 이벤트를 표시합니다. 이러한 이벤트는 행 편집 및 셀 편집 수명 주기 동안(편집 작업을 시작, 커밋 또는 취소할 때) 발생합니다.
| 이벤트 | 설명 | 인수 | 취소 가능 |
|---|---|---|---|
RowEditEnter |
만약에RowEditing 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다. |
IgbGridEditEventArgs |
진실 |
CellEditEnter |
셀이 편집 모드로 들어갈 때 발생합니다(이후RowEditEnter) |
IgbGridEditEventArgs |
진실 |
CellEdit |
값이 변경되면 셀 값이 커밋되기 직전에 실행 됩니다(예:Enter) |
IgbGridEditEventArgs |
진실 |
CellEditDone |
값이 변경되면 셀이 편집되고 셀 값이 커밋 된 후에 실행됩니다. | IgbGridEditDoneEventArgs |
거짓 |
CellEditExit |
셀이 편집 모드를 종료할 때 발생합니다. | IgbGridEditDoneEventArgs |
거짓 |
RowEdit |
만약에RowEditing 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:Done 행 편집 오버레이의 버튼) |
IgbGridEditEventArgs |
진실 |
RowEditDone |
만약에RowEditing 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에 실행 됩니다. |
IgbGridEditDoneEventArgs |
거짓 |
RowEditExit |
만약에RowEditing 활성화되면 행이 편집 모드를 종료할 때 실행됩니다. |
IgbGridEditDoneEventArgs |
거짓 |
이벤트 취소
RowEditEnter- 둘 다 편집 모드로 들어가지 않습니다Row Cell.CellEditEnter- 셀 편집 입력을 방지합니다.RowEditable활성화되면 행 편집이 트리거되지만 셀 편집은 금지된 상태로 유지됩니다.CellEdit- 허용Cell및/또는Row편집, 완료 버튼 또는 Enter 키를 누르면 값 또는 행 트랜잭션이 커밋되지 않습니다. 셀 편집 및 행 편집은 취소 버튼을 클릭할 때까지 닫히지 않습니다.RowEdit- 셀 커밋이 가능하지만 전체 행은 불가능합니다. 행은 편집 모드로 유지되며 행 트랜잭션은 열린 것으로 간주됩니다. 완료를 누르면 행이 커밋되거나 닫히지 않습니다. 취소 버튼은 변경 사항을 적용하지 않고 편집 프로세스와 트랜잭션을 닫습니다.
다음 샘플은 실제 편집 실행 순서를 보여줍니다.
using System;
using System.Collections.Generic;
public class NwindDataItem
{
public double ProductID { get; set; }
public string ProductName { get; set; }
public double SupplierID { get; set; }
public double CategoryID { get; set; }
public string QuantityPerUnit { get; set; }
public double UnitPrice { get; set; }
public double UnitsInStock { get; set; }
public double UnitsOnOrder { get; set; }
public double ReorderLevel { get; set; }
public bool Discontinued { get; set; }
public string OrderDate { get; set; }
public double Rating { get; set; }
public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
public string Shop { get; set; }
public string LastInventory { get; set; }
}
public class NwindData
: List<NwindDataItem>
{
public NwindData()
{
this.Add(new NwindDataItem()
{
ProductID = 1,
ProductName = @"Chai",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"10 boxes x 20 bags",
UnitPrice = 18,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2012-02-12",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 2,
ProductName = @"Chang",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"24 - 12 oz bottles",
UnitPrice = 19,
UnitsInStock = 17,
UnitsOnOrder = 40,
ReorderLevel = 25,
Discontinued = true,
OrderDate = @"2003-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 3,
ProductName = @"Aniseed Syrup",
SupplierID = 1,
CategoryID = 2,
QuantityPerUnit = @"12 - 550 ml bottles",
UnitPrice = 10,
UnitsInStock = 13,
UnitsOnOrder = 70,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2006-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 4,
ProductName = @"Chef Antons Cajun Seasoning",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"48 - 6 oz jars",
UnitPrice = 22,
UnitsInStock = 53,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2016-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 5,
ProductName = @"Chef Antons Gumbo Mix",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"36 boxes",
UnitPrice = 21.35,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2011-11-11",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 6,
ProductName = @"Grandmas Boysenberry Spread",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 8 oz jars",
UnitPrice = 25,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2017-12-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 7,
ProductName = @"Uncle Bobs Organic Dried Pears",
SupplierID = 3,
CategoryID = 7,
QuantityPerUnit = @"12 - 1 lb pkgs.",
UnitPrice = 30,
UnitsInStock = 150,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2016-07-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 8,
ProductName = @"Northwoods Cranberry Sauce",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 12 oz jars",
UnitPrice = 40,
UnitsInStock = 6,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2018-01-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 9,
ProductName = @"Mishi Kobe Niku",
SupplierID = 4,
CategoryID = 6,
QuantityPerUnit = @"18 - 500 g pkgs.",
UnitPrice = 97,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2010-02-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 10,
ProductName = @"Ikura",
SupplierID = 4,
CategoryID = 8,
QuantityPerUnit = @"12 - 200 ml jars",
UnitPrice = 31,
UnitsInStock = 31,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2008-05-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 11,
ProductName = @"Queso Cabrales",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"1 kg pkg.",
UnitPrice = 21,
UnitsInStock = 22,
UnitsOnOrder = 30,
ReorderLevel = 30,
Discontinued = false,
OrderDate = @"2009-01-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 12,
ProductName = @"Queso Manchego La Pastora",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"10 - 500 g pkgs.",
UnitPrice = 38,
UnitsInStock = 86,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2015-11-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 13,
ProductName = @"Konbu",
SupplierID = 6,
CategoryID = 8,
QuantityPerUnit = @"2 kg box",
UnitPrice = 6,
UnitsInStock = 24,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2015-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 14,
ProductName = @"Tofu",
SupplierID = 6,
CategoryID = 7,
QuantityPerUnit = @"40 - 100 g pkgs.",
UnitPrice = 23.25,
UnitsInStock = 35,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2017-06-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 15,
ProductName = @"Genen Shouyu",
SupplierID = 6,
CategoryID = 2,
QuantityPerUnit = @"24 - 250 ml bottles",
UnitPrice = 15.5,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2014-03-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 16,
ProductName = @"Pavlova",
SupplierID = 7,
CategoryID = 3,
QuantityPerUnit = @"32 - 500 g boxes",
UnitPrice = 17.45,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2018-03-28",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 17,
ProductName = @"Alice Mutton",
SupplierID = 7,
CategoryID = 6,
QuantityPerUnit = @"20 - 1 kg tins",
UnitPrice = 39,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2015-08-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 18,
ProductName = @"Carnarvon Tigers",
SupplierID = 7,
CategoryID = 8,
QuantityPerUnit = @"16 kg pkg.",
UnitPrice = 62.5,
UnitsInStock = 42,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-09-27",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 19,
ProductName = @"Teatime Chocolate Biscuits",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"",
UnitPrice = 9.2,
UnitsInStock = 25,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2001-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 20,
ProductName = @"Sir Rodneys Marmalade",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"4 - 100 ml jars",
UnitPrice = 4.5,
UnitsInStock = 40,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
}
}csusing System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Data="NwindData"
Name="grid"
@ref="grid"
Id="grid"
RowEditable="true"
PrimaryKey="ProductID"
RenderedScript="WebGridRendered"
RowEditEnterScript="WebGridRowEditEnter"
RowEditScript="WebGridRowEdit"
RowEditDoneScript="WebGridRowEditDone"
RowEditExitScript="WebGridRowEditExit"
CellEditEnterScript="WebGridCellEditEnter"
CellEditScript="WebGridCellEdit"
CellEditDoneScript="WebGridCellEditDone"
CellEditExitScript="WebGridCellEditExit">
<IgbColumn
Field="ProductName"
Header="Product Name">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price">
</IgbColumn>
<IgbColumn
Field="UnitsInStock"
Header="Units In Stock">
</IgbColumn>
<IgbColumn
Field="Ordered">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbGrid grid;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridRendered", (event) => {
const grid = document.getElementsByTagName("igc-grid")[0];
grid.parentElement.style.display = "flex";
const container = document.createElement("div");
container.id = "container";
container.style.height = "100vh";
container.style.width = "100%";
container.style.overflow = "auto";
grid.parentElement.appendChild(container);
const title = document.createElement("span");
title.textContent = "Events execution sequence";
container.appendChild(title);
}, false);
igRegisterScript("WebGridRowEditEnter", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'rowEditEnter' with 'RowID':` + event.detail.rowID;
container.appendChild(message);
}, false);
igRegisterScript("WebGridRowEdit", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'rowEdit'`;
container.appendChild(message);
}, false);
igRegisterScript("WebGridRowEditDone", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'rowEditDone'`;
container.appendChild(message);
}, false);
igRegisterScript("WebGridRowEditExit", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'rowEditExit' << End of cycle >>`;
container.appendChild(message);
}, false);
igRegisterScript("WebGridCellEditEnter", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'cellEditEnter' with 'value':` + event.detail.oldValue, event.detail.cancel;
container.appendChild(message);
}, false);
igRegisterScript("WebGridCellEdit", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'cellEdit' with 'newValue':` + event.detail.newValue, event.detail.cancel;
container.appendChild(message);
}, false);
igRegisterScript("WebGridCellEditDone", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'cellEditDone'`;
container.appendChild(message);
}, false);
igRegisterScript("WebGridCellEditExit", (event) => {
const container = document.getElementById("container");
const message = document.createElement("p");
message.textContent = `=> 'cellEditExit'`;
container.appendChild(message);
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
기능 통합
셀/행이 편집 모드에 있는 동안 사용자는 다양한 방법으로 그리드와 상호 작용할 수 있습니다. 다음 표에서는 특정 상호 작용이 현재 편집에 어떤 영향을 미치는지 지정합니다.
| 그리드 | 필터링 | 정렬 | 페이징 | 움직이는 | 고정 | 숨김 | 그룹화 기준 | 크기 조정 | 탈출하다 | 입력하다 | F2 | 탭 | 셀 클릭 | 새 행 추가/삭제/수정 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 편집 모드 유지 | ✔ | |||||||||||||
| 편집 모드 종료 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | |
| 저지르다 | ✔ | ✔ | ✔ | ✔ | ✔ | |||||||||
| 버리다 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
표에서 볼 수 있듯이 열 크기 조정을 제외한 모든 상호 작용은 편집을 종료하고 새 값을 삭제합니다. 새 값이 커밋되어야 하는 경우 개발자는 해당 기능 "-ing" 이벤트에서 이를 수행할 수 있습니다.
셀/행이 편집 모드에 있는 동안 사용자가 열을 정렬하려고 시도하는 경우 새 값을 커밋하는 방법의 예:
<IgbGrid
Id="grid"
SortingScript="SortingHandler"
RowEditable="true">
</IgbGrid>
//In JavaScript
function SortingHandler() {
grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);
razor