개발꿈나무

이런 식으로 Grid row를 확장하면 세부 그리드가 나타나도록 소스를 작성할 것이다. @{ if(detail != null) { @for (int i = 0; i < detail.Count; i += 2) { @detail.Keys.ToList()[i] @detail.Values.ToList()[i] @if (i + 1 < detail.Count) { @detail.Keys.ToList()[i + 1] @detail.Values.ToList()[i + 1] } } } } @code { async Task OnRowExpandHandler(GridRowExpandEventArgs args) { W_DCN item = args.Item as W_DCN; Dictionary dcn = await DcnLis..

grid에서 데이터의 길이가 칸의 width보다 긴 경우 데이터를 잘라서 표현한 후 tooltip을 추가할 것이다. 예를 들어 데이터는 abcdefg인데 cell의 길이는 5자라고 가정한다면 abcde...을 표현하고 mouseover시 tooltip에 abcdefg를 출력한다는 것이다. @{ var currItem = context as W_DCN; if (currItem.STATUS?.Length > 21) { @(currItem.STATUS.Substring(0,21) + "...") } else { @currItem.STATUS } } @code { protected void OnCellRenderHandler(GridCellRenderEventArgs args) { args.Class = "cu..

Telerik grid의 Product Name이라는 컬럼의 헤더에 Tooltip을 추가할 것이다. Product Name @statusMessage @code { string statusMessage = "test"; } 컬럼의 HeaderTemplate 안에 tooltip class를 생성한 후 그 클래스에 대해 tooltip을 추가한다. HeaderTemplate을 추가하면 Column의 Title 속성은 적용되지 않는다. 따라서 Header Template 안에 Column header name을 추가해줘야 한다.

컬럼의 width가 100px인데 해당 컬럼의 데이터가 150px인 경우 데이터의 100px만큼만 출력하고자 한다. @code { } 기존 소스코드에서는 데이터가 150px인 경우 2줄로 데이터가 끝까지 출력되었다. 하지만 나는 Grid의 width에 맞게 한 줄의 데이터만 출력되었음 한다. @code { protected void OnCellRenderHandler(GridCellRenderEventArgs args) { args.Class = "custom-ellipsis"; } } OnCellRenderHandler 메서드를 추가한 후 데이터를 일정 길이만 출력하고자 하는 컬럼의 OnCellRender 이벤트에 연결시켜준다. 그리고 해당 컬럼의 클래스를 설정하고 그 클래스의 style을 변경한다. ..

Telerik for Blazor가 3.0.0으로 업데이트 되면서 아주 많은 게 바꼈다. 그 중 내 프로젝트의 거의 모든 page의 Grid에서 쓰고 있던 TotalCount가 없어진 것과, GridData와 OnRead 이벤트를 함께 사용할 수 없다는 게 에러의 주된 원인이었다. 텔레릭은 왜 하위 호환성을 완벽하게 무시하고 업데이트를 진행한 걸까,,, 부들부들 UI for Blazor 3.0.0 Review all Telerik UI for Blazor releases in detail. Check out full release history for more info about new controls and functionalities. www.telerik.com [Blazor] Telerik - T..

[Blazor] Telerik Grid Filter Customizing (1) - Data 컬럼에 최근 1일, 1주, 1달 필터 추가하기 이런 식으로 최근 하루, 최근 1주, 최근1달의 필터를 만드는 것이 이번 포스팅의 목표. 최근 1일을 체크하고 Filter를 적용하면 최근 하루 이내에 만들어진 데이터만 필터되고, 최근 1주는 1주일 이 hyokye0ng.tistory.com 지난 포스팅에서 Grid에 최근 1 일/주/달 filter를 추가해보았다. 이번에는 Checkbox List 필터를 만들어보겠다. checkbox list filter는 바로 이렇게 데이터의 List를 출력하고, 그 중에서 내가 선택한 값만 보여주는 filter를 만드는 것이다. 마치 excel의 filter와 같은 형식이랄까,..

이런 식으로 최근 하루, 최근 1주, 최근1달의 필터를 만드는 것이 이번 포스팅의 목표. 최근 1일을 체크하고 Filter를 적용하면 최근 하루 이내에 만들어진 데이터만 필터되고, 최근 1주는 1주일 이내, 최근 1달은 1달 이내의 데이터만 필터돼야 한다. @{ LMODFilterMenuTemplateContext = context; ExtendLMODFilterDescriptor(); } Is After: Is Before: // 날짜 직접 지정 @foreach (var recentfilterdata in GetFilterList()) //최근 1 day/week/month list { @if (recentfilterdata.Type == "day") { IsRecentDate = IsRecentDat..

오늘의 미션은 Telerik Grid의 상태를 저장하고 설정하기 우선, 내 상황은 A 페이지에 Grid가 있고 Grid 안의 버튼을 클릭하면 B페이지로 이동한다. B페이지에서 뒤로가기 버튼을 클릭하면 다시 A 페이지로 이동하게 되는데, 이 때 B페이지로 이동하기 전의 Grid 상태가 유지되었음 한다. 이게 A페이지이다. A페이지에서 ViewDCT 버튼을 클릭하면 B페이지로 넘어간다. B페이지는 이렇다. B페이지에서 Click to go back 버튼을 클릭하면 다시 A 페이지로 넘어간다. 여기서 내가 하고싶은 건 A페이지 Grid의 필터, 페이지 등의 상태가 B페이지에서 A페이지로 넘어갔을 때도 변하지 않았음 하는 것이다. Name이라는 필드에 오름차순 정렬을 주었고, 2페이지의 6번째 row를 클릭했다..

버튼을 추가해서 Auto Refresh를 활성화시켰을 경우 일정 시간마다 DB를 refresh하여 Chart를 Refresh 하는 것이 이번 과제 버튼은 Telerik Component를 사용하여 어렵지 않게 할 수 있었다. Auto Refresh @code { public bool CheckBoxOnlySelection { get; set; } = false; public string CheckboxId { get; set; } = "CheckboxOnlySelection"; public bool CheckBoxEnabled { get; set; } = true; } Auto Refresh 버튼을 활성화시켰을 경우 실행할 함수는 다음과 같다. protected async Task AutoRefresh(..

Telerik Blazor에서 Chart를 만들었다. ChartValueAxis 속성은 default 값을 사용했더니, Axis값이 소수점으로 나왔다. 하지만 내 Chart의 의미는 count이기 때문에 소수가 나올 수 없다. 기존 코드는 다음과 같다. @{ var CurrItem = context.DataItem as DateDcn; List dcns = CurrItem.Dcn.OrderBy(f => f.DCN_NO).ToList(); } @foreach (var dcn in dcns) { @dcn.DCN_NO } @**@ 여기서 ChartValueAxis의 MajorUnit 속성을 추가해주었다. Telerik 홈페이지의 reference를 참고하자면 MajorUnit 속성은 The..