BlazorDatasheet 의 ComboBox 를 MudButton 이 가리는 증상 해결하기

BlazorDatasheet 의 ComboBox 를 MudButton 이 가리는 증상 해결하기 이전 시간에 BalzorDataSheet 의 select Type 즉 콤보박스 표시할때 MudBlazor 의 style 과 충돌로 인해 발생되는 에러를 해결했었습니다.2025.03.13 - [코딩/Blazor] - BlazorDatasheet 와 MudBlazor 의 스타일 충돌로 인한 ComboBox 표시 에러 해결하기이번에도 스타일 문제로 증상이 타나나서 해결방법을 알아봅니다.ButtonRenderer 를 이용한 방법은 이전 포스팅에서 알아 봤는데요2025.03.12 - [코딩/Blazor] - BlazorDatasheet Cell 에 Button 표시하기아래처럼 콤보박스 옆에 MudButton 을 두면 버..

코딩/Blazor 2025. 3. 29. 23:57

MudBlazor.Extensions 사용하기 - MudExSplitter

MudBlazor.Extensions 사용하기 - MudExSplitter 설치 및 설정은 아래 포스팅을 확인합니다.2025.03.24 - [코딩/Blazor] - MudBlazor.Extensions 사용하기 - Dialog DragMudBlazor 에는 Splitter 가 없습니다.기본적인거 같은데 없는개 많습니다. MudBlazor 로 확장 컨트롤을 만드 패키지들이 많이 나와있어서 다행입니다.오늘은 MudExSplitter 컨트롤을 사용하는 방법을 알아봅니다. MudExSplitPanel 을 이용하며 Left,Right 로 양쪽으로 나눠서 표현이 가능합니다.Left,Right 에 MudExSplitPanelItem 을 정의하여 표시할 컨트롤을 배치하면 됩니다. ..

코딩/Blazor 2025. 3. 24. 22:46

MudBlazor.Extensions 사용하기 - Dialog Drag

MudBlazor.Extensions 사용하기 - Dialog Drag MudBlazor.Extensions 은 MudBlazor 에서 부족한 기능들이 추가된 패키지입니다.아래는 깃헙 페이지 입니다.https://github.com/fgilde/MudBlazor.Extensions GitHub - fgilde/MudBlazor.Extensions: MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from htMudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from https://mudblazor.com - ..

코딩/Blazor 2025. 3. 24. 00:03

BlazorDatasheet 에서 특정 값인 경우 배경색 변경하기

BlazorDatasheet 에서 특정 값인 경우 배경색 변경하기 Cell 에 특정 값이 있는 경우 배경색을 변경하는 방법을 알아봅니다.배경색을 변경하기 위해서는 Format 을 직접 설정하여 변경이 가능합니다.하지만 ConditionalFormat 을 등록해 놓으면 자동으로 배경색 처리가 가능해 집니다./// /// 특정 문자열에 따른 배경색 변경/// public class ColorConditionalFormat : ConditionalFormatAbstractBase{ /// /// 특정 문자열 /// private readonly string? TargetText; /// /// ColorConditionalFormat /// /// pu..

코딩/Blazor 2025. 3. 23. 00:23

BlazorDatasheet 에서 특정 문자 입력 방지하기

BlazorDatasheet 에서 특정 문자 입력 방지하기 BlazorDatasheet 에서 Cell 에 대한 Validation 을 처리하기 위해서는 IDataValidator 를 상속받아 Validator 를 구현하여 처리가 가능합니다.IDataValidator 에는 IsValid 를 이용해서 Validation 을 처리할 수 있고 Message 를 이용해서 메세지를 띄워줄수 있습니다.IsStrict 값이 true 인 경우 입력 자체를 방지하고 false 로 하면 입력은 되지만 글자가 빨간색이 됩니다./// /// 특정 문자열 입력 방지 하기/// public class CharacterValidator : IDataValidator{ /// /// IsStrict=true이면 편집 중..

코딩/Blazor 2025. 3. 22. 23:21

MudBlzaor MudTextField 언더라인 제거하기 (delete underline)

MudBlzaor MudTextField 언더라인 제거하기 (delete underline) MudTextField 는 기본적으로 언더라인이 적용되어 있습니다. Variant 에 값을 설정해 아래처럼 사용할 수도 있지만그리드안에 넣는 경우는 모두 적합하지 않습니다.그래서 Standard 에서 언더라인만 없애는 방법을 알아봅니다.먼저 아래와 같이 style 을 추가합니다. MudTextField 에 위 정의한 style 을 Calss 값에 설정합니다. 결과 (기존) (변경)

코딩/Blazor 2025. 3. 19. 22:33

MudBlzaor MudDataGrid Header 가운데 정렬 및 배경색 변경하기

MudBlzaor MudDataGrid Header 가운데 정렬 및 배경색 변경하기 MudDataGrid 의 Header Text 를 가운데 정렬하는 방법입니다.HeaderTemplate 을 이용하면 Header 를 커스텀하게 정의할 수 있습니다.아래처럼 HeaderTemplate 의 div 의 Style 를 이용하면 가운데 정렬이 가능합니다. @* 헤더 가운데 정렬 *@ Value style 를 이용하므로 글자 모양이나 색, 굵기 등 변경이 가능합니다.헤더의 배경색은 MuDataGrid 의 Header..

코딩/Blazor 2025. 3. 19. 22:12

MudBlzaor MudDataGrid 에서 입력 가능한 셀 만들기

MudBlzaor MudDataGrid 에서 입력 가능한 셀 만들기 MudDataGrid 에서 CellTemplate 을 이용하면 Cell 에 여러 컨트롤을 올려서 사용할 수 있습니다.사용자가 데이터를 직접 입력하고 수정할 수 있는 그리드를 만드는 방법을 알아봅니다.MudDataGrid 에는 Colums 테그를 이용해 각 컬럼을 정의할 수 있습니다.기본 PropertyColumn이 아닌 TemplateColumn을 사용하면 커스텀한 컬럼정의가 가능합니다. CellTemplate에 MudTextField 적용하여 입력가능한 Cell 이 되도록합니다. Value ..

코딩/Blazor 2025. 3. 19. 20:58

BlazorDatasheet 와 MudBlazor 의 스타일 충돌로 인한 ComboBox 표시 에러 해결하기

BlazorDatasheet 와 MudBlazor 의 스타일 충돌로 인한 ComboBox 표시 에러 해결하기 이전시간에 Combo 데이터를 표시하는 방법을 이전시간에 알아봤습니다.2025.03.12 - [코딩/Blazor] - BlazorDatasheet Cell 에 Combo 데이터 표시하기 BlazorDatasheet Cell 에 Combo 데이터 표시하기BlazorDatasheet Cell 에 Combo 데이터 표시하기 BlazorDatasheet 에서 Cell 에 combo 데이터를 표시하기 위해서는 SourceValidator 를 이용하여 sheet.Validators 에 추가하고 CellType 을 "select" 로 저장하면 됩니다.아래keistory.tistory.comMudBlazor 와..

코딩/Blazor 2025. 3. 13. 23:29

BlazorDatasheet Cell 값 변경 시 배경색 변경하기

BlazorDatasheet Cell 값 변경 시 배경색 변경하기 BlazorDatasheet Cell 값 변경 시 변경된 걸 표시하기 위해 배경색을 변경하는 방법을 알아봅니다.sheet.Editor.BeforeEditAccepted 이벤트를 사용하여 처리가 가능합니다.'BeforeEditAccepted 이벤트의 BeforeAcceptEditEventArgs 인자로 이전값과 현재 값을 알수 있어서값을 비교하여 색을 변경하면 됩니다.sheet.Editor.BeforeEditAccepted += (sender, e) => { var prevCell = e.Cell; if (prevCell.Value != e.EditValue.Data) { sheet.SetForm..

코딩/Blazor 2025. 3. 13. 00:20

BlazorDatasheet Cell 에 숫자 입력만 허용하기

BlazorDatasheet Cell 에 숫자 입력만 허용하기 BlazorDatasheet Cell 에 숫자 입력만 허용하기 위해서는 sheet.Validators 에 NumberValidator 를 이용하면 됩니다.간단하게 아래와 같이 코드를 추가해주면 됩니다.sheet.Validators.Add(new ColumnRegion(2), new NumberValidator(true));위와같이 처리하고 화면에서 숫자말고 문자를 입력하는 경우 아래처럼 오류 창이 표시되며 편집이 마무리 되지 않습니다.전체코드@page "/counter"@using BlazorDatasheet.Core.Validation@using BlazorDatasheet.Edit.DefaultComponents@using BlazorDa..

코딩/Blazor 2025. 3. 13. 00:03

BlazorDatasheet Cell 에 Combo 데이터 표시하기

BlazorDatasheet Cell 에 Combo 데이터 표시하기 BlazorDatasheet 에서 Cell 에 combo 데이터를 표시하기 위해서는 SourceValidator 를 이용하여 sheet.Validators 에 추가하고 CellType 을 "select" 로 저장하면 됩니다.아래처럼 원하는 컬럼에 아래처럼 처리하면 됩니다.// 콤보에 사용될 데이터var names = new SourceValidator(new List { "Laptop", "Keyboard", "Mouse" }, false);// 첫 번째 컬럼의 모든 셀을 "select" 타입으로 변경sheet.Cells.SetType(new ColumnRegion(0), "select");// 해당 컬럼에 SourceValidator ..

코딩/Blazor 2025. 3. 12. 23:51

BlazorDatasheet Cell 에 Button 표시하기

BlazorDatasheet Cell 에 Button 표시하기 BlazorDatasheet 에서 Cell 에 Button을 표시하기 위해서는 BaseRenderer 를 이용하여 ButtonRenderer 를 만들어 CustomCellType 을 정의해 사용하면 됩니다.먼저 ButtonRenderer.razor 파일을 추가합니다.@inherits BlazorDatasheet.Render.BaseRenderer@Text@code { private string Text => Cell.Value?.ToString() ?? ""; private async Task OpenDialog() { }}MudBlazor 를 이용해 MudButton 으로 만들었고 style 로 버튼의 모양을 정의했습니..

코딩/Blazor 2025. 3. 12. 23:33

BlazorDatasheet SheetDirty 이벤트로 변경 감지하기

BlazorDatasheet SheetDirty 이벤트로 변경 감지하기 이전 포스팅에이어2025.03.02 - [코딩/Blazor] - BlazorDatasheet 사용하기2025.03.03 - [코딩/Blazor] - BlazorDatasheet 에 동적 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용2025.03.03 - [코딩/Blazor] - BlazorDatasheet 로 ComboBox 데이터 표시하기2025.03.05 - [코딩/Blazor] - BlazorDatasheet SetFormat 사용하기Cell 내용이 변이 된 경우 변경을 감지하고 셀색을 변경하는 방법을 알아봅니다. SheetDirtysheet.SheetDirty 이벤트를 이용하면 cell 내용이 변경되었을 ..

코딩/Blazor 2025. 3. 6. 00:10

BlazorDatasheet SetFormat 사용하기

BlazorDatasheet SetFormat 사용하기 이전 포스팅에이어2025.03.02 - [코딩/Blazor] - BlazorDatasheet 사용하기2025.03.03 - [코딩/Blazor] - BlazorDatasheet 에 동적 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용2025.03.03 - [코딩/Blazor] - BlazorDatasheet 로 ComboBox 데이터 표시하기각 컬럼의 Format 변경을 통해서 정렬이나 배경색등을 설정하는 방법을 알아봅니다. SetFormatsheet.SetFormat 메서드를 이용해 처리합니다.region 정보는 전체 컬럼을 설정할 경우 ColumnRegion(columnIndex) 로 지정하고Cell을 설정하는 경우 Regio..

코딩/Blazor 2025. 3. 5. 23:47

BlazorDatasheet 로 ComboBox 데이터 표시하기

BlazorDatasheet 로 ComboBox 데이터 표시하기 BlazorDatasheet 로 ComboBox 데이터를 표시하려면 Type 을 select 로 해야 합니다.1. 콤보에 사용될 데이터 정의// 콤보에 사용될 데이터var names = new SourceValidator(new List { "Laptop", "Keyboard", "Mouse"}, false);SourceValidator 로 콤보에 들어갈 데이터를 설정했습니다. 2. ComboBox를 적용할 컬럼 설정// 첫 번째 컬럼의 모든 셀을 "select" 타입으로 변경sheet.Cells.SetType(new ColumnRegion(1), "select");// 해당 컬럼에 SourceValidator 추가sheet.Validato..

코딩/Blazor 2025. 3. 3. 22:43

BlazorDatasheet 에 동적 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용

BlazorDatasheet 에 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용 DB 쿼리결과 데이터를 BalzorDatasheet 에 바인딩하여 표시하는 방법을 알아봅니다.쿼리결과에 대한 모델은 정해져 있지 않은 dynamic 형태로 반환받아 처리하는 방법입니다. 1. Blazor ssr 프로젝트 생성 및 BalzorDatasheet nuget package 설치 및 설정2025.03.02 - [코딩/Blazor] - BlazorDatasheet 사용하기 BlazorDatasheet 사용하기BlazorDatasheet 사용하기 BlazorDataSheetBlazorDataSheet 는 Blazor 에서 사용할 수 있는 액셀과 같은 기능을 제공하는 라이브러리입니다. https://..

코딩/Blazor 2025. 3. 3. 17:59

BlazorDatasheet 사용하기

BlazorDatasheet 사용하기 BlazorDataSheetBlazorDataSheet 는 Blazor 에서 사용할 수 있는 액셀과 같은 기능을 제공하는 라이브러리입니다. https://github.com/anmcgrath/BlazorDatasheet GitHub - anmcgrath/BlazorDatasheet: Simple excel-like datasheet Blazor componentSimple excel-like datasheet Blazor component. Contribute to anmcgrath/BlazorDatasheet development by creating an account on GitHub.github.com대략적인 기능은 아래와 같습니다.데이터 편집 및 표시셀 편..

코딩/Blazor 2025. 3. 2. 23:54

Page 를 별도의 프로젝트로 분리하는 방법

Page 를 별도의 프로젝트로 분리하는 방법 .NET 9 기반 Blazor SSR(Server-Side Rendering) 프로젝트에서 페이지를 별도의 프로젝트로 분리하는 방법에 대해 알아보겠습니다.대규모 애플리케이션을 개발할 때 코드 재사용성과 모듈화를 위해 페이지들을 별도의 프로젝트로 분리하는 것이 유용합니다.1. Blazor ssr 프로젝트 추가Blazor 웹앱 을 선택하고 Interactivity 유형을 서버로 선택합니다. 2. Blazor 클래스 라이브러리 프로젝트 추가Razor 클래스 라이브러리 를 선택하여 프로젝트를 생성합니다.여기에 사용할 Page 를 하나 만듭니다.저는 간단하게 만들었습니다.@page "/test"TestPage@code {}프로젝트 구성은 아래와 같습니다. 3. Blaz..

코딩/Blazor 2025. 2. 24. 22:22

MudBlazor 가상화 처리

MudBlazor 가상화 처리 이전 시간에 MudBlazor 초기 설정하는 방법에 대해서 알아봤습니다.2025.01.10 - [코딩/Blazor] - MubBlazor 사용하기위 링크에도 있지만 가상화를 위해서는 반드시 HeadOutlet, Routes 는 InteractiveServer 로 설정해야합니다. MudDataGrid, MudTable 컨트롤을 사용해 virtualize 처리하는 방법입니다.@page "/weather"@attribute [StreamRendering]@using System.Collections.Generic가상화된 MudDataGrid x.Column1" /> x.Column2" /> x.Column3" /> ..

코딩/Blazor 2025. 1. 12. 00:05

KeiStory