! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

ASP.NET MVC용 MultiSelectListBox 컨트롤 도입 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

ASP.NET MVC용 MultiSelectListBox 컨트롤 도입

페이지 정보

작성자 GrapeCity 작성일 2021-01-05 16:22 조회 3,922회 댓글 0건

본문

GrapeCity의 ComponentOne 2020 v2 릴리스에서는 목록의 각 항목에 상응하는 체크박스가 있는 고급 ListBox 컨트롤인 ASP. NET MVC용 MultiSelectListBox 컨트롤을 도입했습니다.


사용자는 Shift 또는 Ctrl 키를 사용하지 않고 체크박스를 선택하거나 선택 취소하여 여러 항목을 선택하거나 선택 취소합니다. MultiSelectListBox 컨트롤에는 필터링모두 선택 기능도 포함되어 있습니다.


이 게시물에서는 컨트롤을 생성하는 단계를 간략히 설명하고 새로운 기능을 소개합니다.


ASP.NET 응용 프로그램용 MultiSelectListBox 컨트롤 구성

  1. 새로운 ASP. NET MVC 응용 프로그램을 만듭니다.

    • ComponentOne ASP. NET Core MVC 응용 프로그램(.Net Core) 템플릿을 사용합니다.

    • 표준 응용 프로그램을 선택합니다(프로젝트 구성에 관한 세부 정보는 문서 참조).

  2. 여기에 기술된 단계에 따라 프로젝트에 모델 및 컨트롤러를 추가합니다.

  3. 아래 코드를 해당되는 보기에 추가하여 MultiSelectListBox 컨트롤을 추가합니다.

    @{List<string> cities = ViewBag.Cities;}<
    ​
    <div id="multiSelectList" style="width:100%;max-width:400px;height:530px; margin:20px;"></div>   
    ​
    <c1-multi-select-list-box id="multiSelectList"> 
        <c1-items-source source-collection="cities"></c1-items-source> 
    </c1-multi-select-list-box>

위 단계를 사용해 구성한 MultiSelectListBox는 아래에서 간단히 살펴보실 수 있습니다.

ASP.NET MVC용 MultiSelectListBox 컨트롤 도입


위 예에서는 MultiSelectListBox를 문자열 값 목록에 바인딩합니다.


데이터 테이블에도 바인딩할 수 있습니다.

데이터 테이블에 바인딩할 때 목록 값을 표시할 데이터 테이블의 필드에 MultiSelectListBox 클래스의 DisplayMemberPath 속성을 설정하십시오.


아래 코드 조각은 MultiSelectListBox를 데이터 테이블에 바인딩하기 위한 것입니다.

<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName">   
  <c1-items-source source-collection="Model"></c1-items-source>
</c1-multi-select-list-box>


MultiSelectListBox에서 확인한 값을 가져오려면 컨트롤의 클라이언트 측 API의 checkedItems 속성에 액세스하십시오.


자세한 내용은 이 링크를 참조하십시오.



MultiSelectListBox 컨트롤에서 선택


사용자는 MultiSelectListBox를 통해 항목을 개별적으로 또는 일괄적으로 선택할 수 있습니다.

개별 항목 선택을 ‘확인란 선택’이라고도 합니다. 항목을 일괄 선택하는 것을 ‘모두 선택’이라고도 합니다.


체크박스 선택 옵션


체크박스 선택에서 사용자는 해당 항목의 체크박스를 선택하여 해당 항목을 선택합니다.

기본적으로 체크박스가 목록의 각 항목 옆에 표시됩니다.

MultiSelectListBox 클래스의 CheckedMemberPath 속성을 사용해 부울 형식의 데이터 테이블 필드에 각 항목의 체크박스를 바인딩합니다.

목록 항목 체크박스를 필드에 바인딩하면 선택한 목록 항목 및 선택 취소한 목록 항목과 함께 MultiSelectListBox가 로드됩니다.

목록 항목 선택 여부는 부울 필드의 값에 달려 있습니다.


아래는 DisplayMemberPath 및 CheckedMemberPath 속성을 ProductName 및 Discontinued로 각각 설정하는 샘플 코드 조각입니다.

<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" checked-member-path="Discontinued"> 
<c1-items-source source-collection="Model"></c1-items-source> 
</c1-multi-select-list-box>


아래 이미지는 Discontinued 필드로 설정된 CheckedMemberPath 속성이 포함된 제품 목록을 표시하는 MultiSelectListBox를 나타낸 것입니다.

선택 및 선택 취소 항목 세트가 목록에 채워져 있습니다.

ASP.NET MVC용 MultiSelectListBox 컨트롤 도입

모두 선택 옵션


목록 상단에 표시된 모두 선택 옵션을 선택하여 한 번에 모든 항목을 선택합니다.


기본적으로 모두 선택 옵션은 표시되지 않습니다.

모두 선택 옵션을 표시하려면 MultiSelectListBox 클래스의 ShowSelectAllCheckbox 속성을 true로 설정하십시오.


다음은 ShowSelectAllCheckbox 속성을 true로 설정하는 샘플 코드 조각입니다.

<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" show-select-all-checkbox="true">
  <c1-items-source source-collection="Model"></c1-items-source>
</c1-multi-select-list-box>


GIF는 목록 상단에 표시되는 모두 선택 옵션을 사용자가 선택하면 목록 항목이 선택되는 모습을 보여줍니다.

ASP.NET MVC용 MultiSelectListBox 컨트롤 도입


MultiSelectListBox에서 필터링


필터링은 데이터의 범위를 좁히는 데 도움이 됩니다.

대용량 데이터 집합으로 작업할 때 유용한 기능으로서, 사용자가 수월하게 선택할 수 있게 해줍니다.


MultiSelectListBox 컨트롤의 특징은 목록 상단의 필터 입력란입니다.

사용자가 필터 입력란에 값을 입력하면 필터 텍스트가 포함된 항목만 표시하고 나머지는 필터링합니다.


기본적으로 필터 입력란은 표시되지 않습니다.

필터 입력란을 표시하려면 MultiSelectListBox 클래스의 ShowFilterInput 속성을 “true”로 설정하십시오.


다음은 ShowFilterInput 속성을 “true”로 설정하는 샘플 코드 조각입니다.

<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" show-filter-input="true">  
  <c1-items-source source-collection="Model"></c1-items-source>  
</c1-multi-select-list-box>


아래 GIF는 필터 입력란에 'la'를 입력한 경우 항목 목록을 필터링하는 모습을 보여줍니다.

ASP.NET MVC용 MultiSelectListBox 컨트롤 도입


필터 입력란의 기본 자리 표시자 텍스트는 Filter로 설정되어 있습니다.

MultiSelectListBox 클래스의 FilterInputPlaceHolder 속성을 설정하여 자리 표시자를 변경합니다.

위와 같이 필터링된 값은 필터링 작업이 수행된 후 자동으로 선택됩니다.

MultiSelectListBox 클래스의 CheckOnFilter 속성이 이 동작을 결정합니다.


기본적으로 이 속성은 “true”로 설정되어 있으므로 필터링된 항목은 자동으로 선택됩니다.

CheckOnFilter 속성을 "false"로 설정하면 선택이 제한됩니다.


MultiSelectListBox 컨트롤을 통해 사용자는 목록에서 하나, 여러 개 또는 모든 값을 선택할 수 있습니다.


대용량의 복잡한 데이터 집합에 이상적인 필터링 옵션도 제공합니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.