From 51e63704b17da3949f134179e11186def2c5c6b9 Mon Sep 17 00:00:00 2001 From: svetlanamikheeva Date: Mon, 2 Feb 2026 11:33:39 +0400 Subject: [PATCH 1/5] the first draft --- CS/Components/Pages/Index.razor | 10 ++- README.md | 101 ++++++++++++++++++++++++++----- images/custom-column-chooser.png | Bin 0 -> 13851 bytes 3 files changed, 90 insertions(+), 21 deletions(-) create mode 100644 images/custom-column-chooser.png diff --git a/CS/Components/Pages/Index.razor b/CS/Components/Pages/Index.razor index d6bb6f8..7114c0f 100644 --- a/CS/Components/Pages/Index.razor +++ b/CS/Components/Pages/Index.razor @@ -4,8 +4,8 @@ Welcome - - + + @if (forecasts == null) {

Loading...

@@ -30,8 +30,7 @@ else { ShowCloseButton="true">
- -

The Date column ShowInColumnChooser parameter is false - thus, it doesn't appear in the Column Chooser

+

The Date column is excluded from Column Choosers (ShowInColumnChooser is set to false).

@code { DxGrid MyGrid { get; set; } = default!; - DxListBox columnListBox { get; set; } = default!; private WeatherForecast[]? forecasts; private bool isCustomColumnChooserVisible = false; public IEnumerable AllColumns { get; set; } diff --git a/README.md b/README.md index 4438aca..16bc7c8 100644 --- a/README.md +++ b/README.md @@ -4,31 +4,102 @@ [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# Product/Platform - Task -This is the repository template for creating new examples. Describe the solved task here. +# Blazor Grid – How to Implement Custom Column Chooser with Sorting, Search, and Select All Capabilities -Put a screenshot that illustrates the result here. +This example implements a custom Column Chooser dialog for the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid) component. The dialog displays alphabetically sorted Grid columns and allows users to change column visibility. It also includes select/deselect all and search features (useful when working with a large number of columns). -Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. +![Custom Column Chooser for DevExpress Blazor Grid](images/custom-column-chooser.png) + +Unlike the custom dialog, a built-in Column Chooser displays columns in the same order as the Grid and allows users to reorder them. Use buttons above the Grid component to open custom and built-in Column Chooser dialogs and compare their functionality. + +## Implementation Details + +The custom Column Chooser dialog displays Grid columns using the [DevExpress Blazor List Box](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2) component. The List Box retrieves an `IGridColumn` collection from the Grid and excludes columns whose [ShowInColumnChooser](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridColumn.ShowInColumnChooser) property is set to `false`. The editor operates in multi-selection mode and synchronizes selected and visible Grid columns: + +```razor + + +``` + +```csharp +private void InitializeColumnList() { + AllColumns = MyGrid.GetColumns().Where(i => i.ShowInColumnChooser).OrderBy(i => i, ColumnsComparerImpl.Default).ToList(); + if (ReverseOrder) + AllColumns = AllColumns.Reverse(); + VisibleColumns = MyGrid.GetVisibleColumns(); +} +void SelectedDataItemsChanged(IEnumerable values) { + VisibleColumns = values; + UpdateColumnsVisibility(); +} +void UpdateColumnsVisibility() { + MyGrid.BeginUpdate(); + var columnCollection = MyGrid.GetColumns(); + foreach (var column in columnCollection) + if (column.ShowInColumnChooser) + column.Visible = VisibleColumns.Contains(column); + MyGrid.EndUpdate(); +} +``` + +The List Box sorts items in the following order: + +1) Selection column +2) Command column +3) Data columns, sorted alphabetically by caption/field name + +```csharp +class ColumnsComparerImpl : IComparer { + public static IComparer Default { get; } = new ColumnsComparerImpl(); + ColumnsComparerImpl() { } + int IComparer.Compare(IGridColumn x, IGridColumn y) { + if (x is IGridSelectionColumn) + return -1; + if (x is IGridCommandColumn && y is IGridDataColumn) + return -1; + if (x is IGridDataColumn xData && y is IGridDataColumn yData) { + var xName = !string.IsNullOrEmpty(xData.Caption) ? xData.Caption : xData.FieldName; + var yName = !string.IsNullOrEmpty(yData.Caption) ? yData.Caption : yData.FieldName; + return string.Compare(xName, yName); + } + return 0; + } +} +``` + +A [CheckBox editor](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) below the List Box allows users to reverse the item sort order dynamically: + +```razor + + Reverse Order + +``` + +```csharp +private void OnReverseOrder(bool newValue) { + ReverseOrder = newValue; + AllColumns = AllColumns.Reverse(); +} +``` ## Files to Review -- link.cs (VB: link.vb) -- link.js -- ... +- [Index.razor](CS/Components/Pages/Index.razor) +- [site.css](CS/wwwroot/css/site.css) ## Documentation -- link -- link -- ... - -## More Examples +- [Blazor Grid – Column Chooser](https://docs.devexpress.com/Blazor/404479/components/grid/columns/columns#column-chooser) +- [Blazor List Box – Item Selection](https://docs.devexpress.com/Blazor/405403/components/data-editors/listbox/item-selection) -- link -- link -- ... ## Does this example address your development requirements/objectives? diff --git a/images/custom-column-chooser.png b/images/custom-column-chooser.png new file mode 100644 index 0000000000000000000000000000000000000000..e4debdbfe5f2e3ed075d70581e8e0a767159aef3 GIT binary patch literal 13851 zcma)jWmFtnw=EDP1Pc%xn$TEqOK>?!Ist+O2@u@f-AN#U#%bI+Aq0Xp?(XjH-nc{K zydvkmanBpyxOcoCJ-WMg)!I_K=9+7+RY4!+CGnn6K0!f2!IPGPD50RBMgbq$$C$v8 z@M>jA@M@L7Fi}~iwo5$GLbT40)ojVH*qOaUl zs=;+mx5q0S1FdH0Envvw@K;1VJE>HnQ>{^uIL)&fWvR z1?FpDaHG?j+#E)>M8tK2mb@U9n_H>dBF?v?z+d0>SHS;-wo`?UuZ z>NfXxx1m(=W2l7XI#|q6tLo`Bc%_%`K^MI?`7RMMOF5LgzrI^>=Il>J3RkaUP4Es= zORl6)yJ+s|NdMe`esAIM9A;)3ITO3PFqBOf_rJYH3VhBgD~qAv8*$q$mK5PGiF4lc zW|-Jb4)V1Vc!iS1lHbF&vGjvAH!rU!mh9wanjq}v-hth^nG)?Hej+yw!9E>^ZLaEnrOvV7D_T2(wRb?Y{#FIqME*#A?KPRxFb^AX9O%Y3bjN~B|=&}YOSWR z2hL5%_?5)JQs<@KxC=~xT$`qhpZTDEd@FsPiYrjFLSaWw@NA08*3$@og6l(jcKj=`}n$P`+*Y2 z?R$8zllQ(6uk{Sg4MO7n$M4_JM7{%~(X6nx_I3=By7$gQL#o)d6+*g+yd&fjJq${v zj-(rw2MmZsRg1^WDpPP6Mxk_$4y=E2Yce=l2W4 zF4*Kaj#IZs*Xr!Fj)%U=DblNllq2!2Eg2C)7xEMp{tD3}kD5B-L}lpv)t~<)PcG=I zO&y`;7obKv6TWM9n8f0Dds=YQW)Ztfz>G*`#cxpVXnxBDTNtbsli+GBR6E`PN5yM? zv5T6lTMs=-<+ZA)bQ5KvE`miL2~JeRR3f6IH6KADbq;wvPtq8e;R*hM3kLmXVwQvU zGBYa27ELinL|6n3JsT1doeOW<*{L7La2gI=dDN5TKikJOUFMt=9VQME_u&O=hcxT` z4d6LBZh&6kNPhShjJn{+-59p_o!aHmY4Y2F41MRf`tvOm=Zi84(~q8~BU~#wS0*2C zXeGur(qmR$z>C1Ald{u&g3U+wm-Z?b@mjMWZVjWEUH}4lX(%dF_w|8{Ckb9A{uYkk02Ek}$Yh|#-z$Ydc&ge==+;5+GkY73ScXH5L zj&j1t)M5dX2meA{*XM4&pei*hR9sr|lrXCF<#3TKWgQ(*+heN9*U@|LneHSeTNb=S z5~8fF8w3yOCk4E(_v`V92Xlzd?`A*kk94V0FZz`)7%H>J#ThyEMLD^~>XwR4UzGku#_?!)=gS@u!Bt4T|@F2h`Q7Dx*E+YnmPv zJ)^hLxg(E|nCV)agMcYPa%=f2IywV=iLNDp-@pZlRyE%>`(u^*+zMyO)&5jwjK;qe zi-PLH4RUr$i`f;LL>WU`9=)P=)qWn~tN)AJlXOc#Xp%3nL&09h?3}}(hgK}EFfI4T z8WN|w_>q{B6xFCK!H@LrSD7ZpdmS~BL1Vj`9l2y^o<69qThB^JYXdSr#1r0+=H$;9 z|LUl(S~A0%&=$%Z)R|p*Qq;kaCCGdi0dI^xMT^jBv8U49V0Yw<2PMdFFY(7z#z!7h zi`Hri2GIvr_xKK~p=23FU86pW67mc|IxH%`ipfvwopC%)G! z#U}Tqm4`qG!e{piyEW*P+ zT2gJl2K4z%lbPZc76OQgw=!II-F|&q$Hb#->*XRVb9~vbHI+VtN88cj7cqU^=qN=^ zz5L32mc9jYGZvelXq7*20_~Au35;F^B28lgDlTW zkiMfq0^eKhMF6AWNNytELBnSaN7Tx)*6g%ADYJzFgh%x>y#t~EgF1cL9(~tntGJT% z4NK3CsdmvV>2ybK;MzZYs+cy1&dctJOr@2HiEOgGEJQf6b-Ag?x3S&+Y+MaXgp`nQ z%WuIOseM}%3sBW;!@vp%WG#Q>N8ZEtZss3eI{ZLm%Mt^CLv6Mn9(XAko;ASIlg-U! z{x|Z19MjR$Ns6x10f1|dz@k@3t9_Q30YHKAO}M`e)gm!Y_h#dD>OC%1 zCbJ<9yHh;)G`UMrGT@-_aHf|p$Flu_c_5swPR%VW8dipWJSnUKcVru_j1Ema7-Wox zjAReCe*ng33L6^wcy(HxAj287HmV?TmQ$z@w3ck!z$khHPRD-^25U>YUA*%;>8}(Y zKQh0Bx7xoK0~mg(x|!K;g_A{%J2rsgEB~SR7j-w4LK>9p;1T!B(zZ$=R2hap|EjCw zFMJN015XcpjhmvRn*u7zUaCVf9UZxj!onNc5R47|*y`Zn5j{d!;SUZOuVmsPNXD;b zplg4)jF)D{C(Va@^UvD(OnrC=BU~#&pwLA$kGC0(;#ZsW6*ludShQYEowUBP5D2=x zz5UH`d}EstFNTOH5Hmrtw_v-Aw##3!KugEHT&71W?N*Bosj+NoBk)DzIoCz+n;qTz zCoWLnUP9%E>5FIg`qJ-pjZ7t)W7W>#^9yiY37^}YZd?l9Z`F>7qv-UTZ?rc{SOw-V znnvHyNpaW4gVx_zcge+ydxYM^gmuTBpaRO)Z3=&p{lCHB*F!8s-RFC=iM+-oYD7mb z^_o7(CPcQB4vP2Ye=gN9D~NH%xxqW8!qXoG%GvV8-q$WR zRm%Y;y^IWP$|@>j4*s89c5&CT(`df_<_Z1O`4=Qp8@*oAVS9|F;cA;L<0qG8#hh`x z_IqdNSNMUC{F{fIntwkAyM?)a(6>|W{^=x!lP0$0u`0G}?7NN>y&B}Q2*FQDc{ihH zM-WdFMD_hP9e&i_{xbo&XbAl+5xOy>f=N`d(CLUhHeo`D*}*!wV7 zCevb%fa|KAX`U)Wgaxn-G=~B!P<-xA(v`Ke=ByGkGQfq^8%Z0U^froy>P5mKVrax*D~4Wv3|KJ}{MdElg&fV5Nl|G^pNgXiX*|j~lnQxI_zKL>5+f&a8qtDx4?y zWrR-0QnKiI=iSVBvONuAg-cLr+~ES)kkUh*3@AA{IdhJKVhjunFK5_O=6I6goWdJW+A2O58nTX~392n^_5k z;+=ybBlVuHcZY!zMJD}}n0PfwJMai*Uf!tOTvlLWzNO})Cb*c7#>dAYkPDCL@TF{f zZ?}T&$J_~BkI4m@@(Qz;a)9M@(dnrh=S%7SVZoe7D={MVTCG=+@S{m5{s$(o!@%~l zx0)zqx?Vhu*YgKehb?v>wR-@%Mb<(LE}O9;3-4g54Vbt*Y$ zCEUF8fba8daDCz=uv~AmH(_p+0yfmE9buM5w}BEjbPq#t1HhoGr^le_3u>6aQxeqs zQ&7#Z2FEKm%#&Q7!Jjz1?i1Qg^=La;Jh)ni0;KF0$)!5Ge_g$#+S40RZLProb%xx& z%KJgm{Q%~AFIc8`$c3HE@}3+lHm1M!$GoiLio~ZDY+7j#>F()S31%xaL#_rvQ^L@k z#TF}VbrBRZ76o4)VU;+ne^4#dqS*ZifqavHDY+7IcYA#@rmTP=f=fvFBZLV6`Yq9a z1c-m(w@edJQ1jCkK!kZTo&tD~=+SHiLvHj!TEe0@4`joaq$D`nKMlaI&G~D;FXd!K zkP)Ec4>G+Mof3D=0N{}QHhBkO_^aW1U*zs6!uO+w#{0zv??)3hO(57vo*EZt?XD8Q zPsoIXgs3HaL_f-fK&4PlH;4U~TLT?CX+}54^VFJV@HR^;FmbDbft!b3A`Ogot<2)V zcm3m5{t;eY{LxqbnT0rfW~R~C*RzcdxH&O{L7DVE7>W>xU*{yg{~tfd^{;vUhyNmeN_G34eYzBZEd01+2->FU(Ouv%yZiNx;qK zoAmAa+oQ?3JJSc7Qe?!3KMDpL#Fib2P|1&f;&|`3L!nZK&c#ARR6_JWp`lLqjFHO2 zNgm%bD{HLuo(+V99gOfRu0&i0j;HoT(@#@r$l{?=e`9!=nPGed&9JH*oU3hu&Nb-fPGOo1O^p5o@-Z%I_yGr8?UJ1Y{LMmk@9 zrZ=;~&|Er~C0)Rmq2<7J5d?$xa_5PqZ_}hKk*}T_w#b481q5)*998oI>j8ZOWNf(Ta8AF^m_W==0G3=Cfa7<46qb| zIK9M)uJ5!d(nge4g@qY4HNo3qCUFC1M&W3aPsb-%cAaDAYp339Td9SR2({_fejgLi z+EcLwlSp}G1lNbiahns5kAGTwIZmA0Wy+^46^?2UB~3H+=9rjpYo+ER7}a28T3h?w z*?Xz5P_ToGwlK?FT%frmhVk*lwNUEUUgw&-11NbI z`PKALt$pp6znYD1UiaYtwNUorxb8y|G_U9@M&GJtx?mm2u@|R$4s9o|!v>?ph&E*4 z!(N({hl_2^=;&NSoKWK)7l*`S1_R!=J^uZ;LgSQw&HY7ezY{`LUqqIqUpkIyI1?%B zvH=sY!}bi>_7GXpdQw-`w4prs9+H`7hWt@rKB?`;a_n_=wzYL;8Z4S_K6zqAJFCKS_b}zJJ<3@z$vJFWcpfn{Y z_H7)$2$1B=n-w&VKDmqJQBbP4CxuPEFCHsrGd7IPTOd*bXA>pv%x#Qc=XB|t7Y2<9 zPzp`*uw=?6_vEGmPx;a5JBTpbTj_3{&Y>S~H9xrlIwdaU%iq(yWb;UchO2blG8S^* z?O>>sUfG7mL51yNLlc4Z?V;a^+x05kyAXNase96jGl1g+Y}}CnH1V?X-3hj;+rc<~ ziT64XNKG8@0FPO64gXwv2N|H#-U)yJ=;HJrSooh9adasj1*n{rlGK3Vcb6$r0Lh%8 z$0sDj&Zu1UNhXlEiDZMm% zz4&MFPiFaR6|UX7k045__O@m+3}FU<=}Dp! zw(CF~Z%H@e>|8h#3XSlKlj7}cFESm5PN)^pWTY@eNqSiE$(vqvF%$+qj_E(W z3$UGSa*Ozpd9=go?yX2IAf}2s%g3EO-}>$>urG<$!x3pF8kpMw&$AN!OOtNUH?r-f zY?D-++!X$++wth|D&wm2B)n1IYoJ0@f^G0hJT(HEQa&RFyU~vd(#73XzV?}MjxRB2 ziM5(@{MLSdxXu!doj;H+dAZBP8TT$R!Sro~=i|*Fbx^hMqcH6W*2(!ExmhK*_D|=r z)$2x8f%#Tc04EIFicm0n%%{;>FkIw6Q^S+kou&35{RUCk$5+?}w2XwcD} z!t8(~WIzLe30WAT^lU-!J>G6Bhs0KII+JdD$S;?D-}Ao@!YHy!`;`LLvAcc?Y~5Ui zqZw>0s0pm`9gA;7OX~ZFXfS@CWtB?eqd~gfZkAm#Si260)ZHN@_4lJeCm?KD+hVo9 ztO>xgj^q|=-hBtUa585Z7i}U+ciNL{wL=|EgnRHY%cevGb;L!+=tlJEYeU5R2hh#w-br z(_kRVnA{Iqn+h78i&K8TkS{nOsMj&$D&*V|!Jx#J)ON%pY9NNr@RS%w+L4mVA@|^k z&zwX6?S1jlxGKD|^}ED*Fh2v6A(;4D;)9POslZEn`C+xTmWsD3Q6CQycy0tckZ*&b zW$yxID`-XRlk6=Q=q@7;4sW~ptS#FrzGCPQR}awTl8=&naU{>ua~UP>cg~QeRsaxJ zAhbYYK({YoLiRZoapF|t-!_F9f4_(h-8)lFD%W^9ieOOWu3bhy-wDw|2=OLn5`Y-z zEz!J4BO>1z&`TeGP{t*hePTIyefEyx%)=NAZU6vUx``bArL!)u&|ssXuVUutnq4Q+ zlT9FTb^FO_dM6u~tnJWSsJti4%92_jk+xvgO{T&zaj%P=UBSpeK75sMvM`gmN9$}O z+GwDuZoay|7D?QHN~RNly$U>Wvr%0Y7sV>Bz^#+v#pw%65kSGtuQ2jFuw6+>J(B3Y zv0k+p6xj;0imCtzx-=ndf-fd!*BO^axa`w+kRK~G#=P0rZbTEln9aM*2HNIAOe*7K-pQO-}>KV5NMQ^Nq*hvbL*AsdU2>fQJ@J20Dq(%-OFrebNHt? zGvODX+pEjD5I|g5+EH?3_+APy!F;3uFP0`&r+%;e;XxHZa3q-`l?l6k1Dy4z3?mWB z=t|}9!ou9!Su356L;QvpRD8iXoPb)^b6l~D4mKs5u!c&Tx;pc0@$3<$L8St>9fC3& z+L&{vYRTioHKrW&0l!qmnJ$GADy_`DzM&ZZ;fXYo{4RL#ocvpE7u|xP?$tnz_QG4! z(v-culy_@g)D9+|F|O97;~=)LDNhCsC(a_Dm`d_^Rg*Ymdr%K*XYWq|J;Uil1{3DR zCGr6N%6iF(zW!nK2`8O&7G*_~dD= zJ&KdZa0bbJl{DG|8wm`{J)s~d`s6fBN_4M}-gb$IbV8?y_;VFGKiQbKf2F#0`881| z3W*SVznuOFaZtH&D8<%T!-)l)hbgY%$VmH=Cy|{dq4Pu}Id9d3-Zw8cCJb~YZM1Aa z>^>_Ru)}1XEAs~6hQdQ163buhg+R;TrSvcr^bBE%=**0a5*hdO`Jqa;1?siKYOAS1 z<>}7E@1q|#Oy>{@oPa+n^(de$HO?-Hi3@0*1IV8Z*mj2fpdD@WSc)QjN>+>zHbA!& zA!Tkmu?`Sf9i+IiA<4K7*)GIkLH*55xguo3hOhWE%wWV2^QkGt>rBtiCdOS32c7)U zkOe>3*|~8UKP$0};R!S}Wjj2$f7}_FNX{1*NhB28rDa-o#yl5B(Z0+0bs46pgBZVP z1L_SB2LBP@zS1;l_LEhG4_GL3-;Lp=y&0j8CqxF=a6f|;THaormBRz^s3um*7p#Gp z@+8PzsV!f;UYbY+r8(+&Gn1L zRMA!C`jgr~Zp0OLRN*$oW+YH9K!Z^yITFW!b~xY7mw#Dl+nDWf@wv6?kbeE(>=sr_|)Y;i6O#z|LNA7DTf4E#8$ehq(8n$ zc4Ru*y6eCU>(Lt7zrdNR&#|HUv}Qu0e3mDjuc>c*x}rstmIhIYE(q?bW;M&J_%HUS zM{`Gg&ZKZpvY+ZAw|5WSGgAB$u+*^wDsz6oM=U!s{6W z>&xtQKdT>nG-g0j?aIXKQMSXi(_bUzo8G;dFW}DCTkp$gTT@xvlYLvC``Uf*Hf;~J z$kcegVVJMGpuS0X)$QV-Ix|e(=rpxjWn5%pb2vz}uJiL%e?CO%-ojsvHh)$pQ6`D4 zCuu0=;EBw2nvG(pRh z_@c;bK!U&vwW(}})42T`+jJG;amf9VK1%pUfrSI=IQs@)w}{T6$vgt3surP_=O(J) zkoS!Nz|!x|kgV6CNR-71_^$H|9&h`zI~}-|$Dg}SdbOm*hWb2K-Dh=*TP!VUE*i8H z(LX7CGkMMGz}8Xh9`EQozGxbCrNZf|BM@ZCi!)8FY-^VHYVk_q3J2@Jf#7U7H^D-J zV-`z~QoFYP?mFw{MF+HC#c*gTPOA12(Rf~DJ&W&gw%uK@+Ud~$N&?SCs$gVaj7WLy z(yCq{T=CJhU9ZB`adx-bkwH%Cb-EaN!Xp(@<-_3@`vo*{K?Wn*KivwtRz+^Z2qu|g zE#HTuiT3CUBq@4*=|4g9S#1TiiVmDxiG<{!EwFpwtokc4 zK)?LHuqT%&IWCq!Xu+|DlM+NJ41Ly4=zfOYHe0;)CW4)p0%P>K9`c3x9LVa-RnSi@ zmub`@rI_xWB?f%GI8LmdfP8KJlO* zfZv5w{l5e6-q^2a#>FF(LO<|>_qu>$BudH;W@ay#6`aBt&}e`Xp4~R{jso|$Z$vWC~qc4Y*ctei1sz4v&o z*r?H4cmZIDlu?=Fup--&M0CNx!B7S{WnV}pJ;(h#WsU1WM?vKR#O(Lir*9uKDa#hM zS~PuBDw*VQ+8k0PSpcNG5aX5m;~ZVoy@qVK?%6F#C>6R$(ja0Jls1YN1m3e)!THlxsilAum8F0JGCX@F){pvzKljP`~pc?^;4}S_Q?|iE&2Q;m% zM!SHO1-zGu{9eB`UCJD>t^Nt?YLXNCLXdBfxJ&qX(Ckjx$T`U^Q7FMF(eQx?;aw&cV_m)glYARU(P?Y;cH z-ct8|1u^NW9$N4V1ZbB}>n>LCdHE1_MP3ACr~Ca0_R9V=O34od8@;((IeT;AR+O`@ zNFWd76N#uSTt6l^>?IMQ1Cm#;=NIc2Jaf_F1huz(C_q9-L&s-p`nlvd|AR|>&26C~ zy4n$L)X}$SxAM)gWj=oVGqZe3re@^;Pye1HP?1NtM;Hk05^7(zJJdblQ;$89VD~uG z2VJ%*rEkyfr60A@p8v32tPoS}(c^ZjC&011##?@ASwT+JR43u~e?NfX?d_ zTZZWD_nyVt{#l>h$;LZI9MZz2Tcm`Ub82?lLfe||;!L<=dD??o8>xM}irSa%$>q8z zk`8aY%W6MXfX}|UXX7%3{>ggA2^*tLYKwe>HC`~@BYh9}H8xJSM)NgpnR&?yH(%Bh z4yEpa!KodO9QQlSLQUrSl@okA_vVD}m>w1?-TMk7?)KnFYe6Of4*Kh;QD+HD;xU0s zRr$l!h|6@U}7RqE{r@iqaHU66K8)e z{>eJD45-i|IBsBb86s?mHV_$vbMi?ZUu6jLRtQuu2U*FG3OG6arLDn8#T2@FdBj!9 zfyXaP-bt^6eBI71aW7r9sLdp-{xw*NY{;0X8;`BGC?6g9?yz3SI3Gl@`};<%dSBJ1 zWT3Nz_s63Mp%6)f(&Ef_k77|6#D=>Nmv8tF5>1QsPeWu6k`yXQVfatWsEGLf5sn_H zgKA$o$o~>q!DP=E=_P|Pc#vy_{0(g1Cm+CxVm(qOBkOfn3kXyTK%FFB;ZD}}4GG>k z&#xsp$uQ8-U0X=+-r3(PJYJpr#Q)-;da+atC75^TJki$Jzh5LAV~3x6fjZE=1(S7$ zrq?Rm@HMRTbSGq`YODCkRGMPtJRpu0lJ9h?c-u{IA%xS% z={3oe_p+S<4Fvx8cqxddxXtUM{PVkPNM?Am-s5fE=jEPYo_A@36P~N&uZjpNZ!)=j zle|c{;%2Jvr~SVQeJO}UNJts@?0vKQBRmwf{v@-PaoKx!6;LewMe-8X&7dg%9U*X` zSt7=ikh)jh7~9zJ^GiZCa$IgdqAuccO>t9E!hFCf0>}B~sMvxz z^$UgN;`&%33L~K%V}QDYPQt>bo!nm?=WIPW&q<+7Or%j>pLtXPyK?Ms^^%mMX?||; zYSE{P)fXV;?`KcTeC%+bjPHR!A`_d2_y6_j%!B9^_JDxo9&_r9nu5P@2kkU+=D{%` z8^c!v#Iqp3>4oU!{u~Kr#cH;Q;0;!C`13fl<9SEX3cO5-2`jvGgWv`*X%9iUcr)p` z@{q(tB`5`&qFmGG%^(*7l$1@^nVy4Yjx2v~#67E$z%Sils!yoqD(#=2==v}9N6hDA z*1f2Xd4}Y(RQ_}ZM@*B+{urK0hU$QB%6-?4l%{RwDDJ`VpH1T~=X2z|`TcD>GP3m1 z(n+_EzgKJ()CgoAe-z?bJvhm^2ZIr$|1HX2%)2hqgTZKlKeu$+zbwAG^Jgz`KCD!` z{XZam<$Y(vDZ?p(NUxztgs$?#(14@K;%Fa zH=rX={3U;`9Cq_9x%<}RVOifF`QJ^=%CkbDDIB-~PajTVWs4XBy#3<#6>k}a9Z*an zetW9iaJeyS5?BQUUOU|6Zyszvn1$=qYiI+>1n&lg3gq@U&QC={8lX7iSy>=|Ftls> z^}mW*{s$#L{)>27@&BL}Q2=Va)0ZzyQU8-#gn{AopK8&-kKTURLz0kp;M%7!m8 zXVlV8p5D=HR3TGs?J2ELNXuVX05=HbjF&=@4O#q?MB8RP=M4BY=`tRY9hL%9%+!c0 znsgQiQf0gK-Z-s;e&{SZb^CwwzqG}3xk*7c<;E<=vb$ zIgK|SxPn|M^iy87o|`)yaT-~|T*rn=QbIria|S0XEG6(ni|p8ByL#Q`>)9t2HL_@s zA-!n_Zy(ist73A36i%n@(sN@h*|x+a!D4b^6L?x&?5}l}0he^CwnRwQ8*5x!!b)cf zXNkT29ihvM<`8I=Q#ZswTRh`j^ZaCWo=o*`aC$$Ml6uneUAQg7ZS%9^3KFy+*%TvV z$FKc)yKOuiS6Q;NUnS9S$zKFW7GU|dI_03XOSBzsDzxdOl zp-^~@5jZE+YBAx>!pn#tmplwM_e_t%FG+D&q-^}p?H7oqk|OYmNUXjB0#HSU&fE7R zAq!yVoyP}s^yxDcK;Dndcmh)-g*9KD+t6a=jcut$la+;&dLI&agJOpBZvh6EDjtOr zcco`JrOGMwM9~zZfAMJsQ>MEV``N6hzi6e9HaqA;%oeI%3bUm|7pS?ao2n zsB^nEE5|;sDm9SMhUsaIp;;ua@upR*aE6J`s@#CScwb#rW`0OD84&l{T(wIiS6GgM zU+*OOk73DWw}|_$89sO|l|)?aPH4F`)|d)Y3v(q$9MSyPam>U;O!itjqsw+0drlai8l0d*6Z{^(9-Y%J!~I}-)ACx0~Poh=h? zas~`;Rb*cv{`TS>W_+4^+43x{(p)L{*jE{pt+mYLV*X&>EY|YUOD+sN%~LG z!%Sbfh0Fu~%zWteeFv1>{ntAqyyRMr4ETZcQ^f$iBU`l-OmSqu^#4lCERQY%0+N~r z@+pGLvJAjGJYLs(mCfORG***f+jtun8Tr&SVht#7dg3Dbpj3NZuB+{Xq+fJK_zoh{ zeL=ek!1O~dZcYY;d~Q5}w|}s)v3Z^n5w$RsB zp(w!Wo40Q-H-AQq^8r#fllR>v!s~Rn^IJf`$^h;Bn>XA0(z_D{ROw#F*t%Xv7!nuF z1XW9ZIDkfu~OgOECe5K92g~)SY3Qjn9cm*80E-P)= z;+Jd0^6BDXt*H2&6ay(j%9;bWh|7h`n)4wY>xuiyU)KGNHaC#ui^oY*`!ZAwquxT` zRJG@g Date: Mon, 2 Feb 2026 11:36:05 +0400 Subject: [PATCH 2/5] README auto update [skip ci] --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 16bc7c8..7baa444 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1098175829/25.1.3%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1313893) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) From 8ee27ca8d36760be28f49feaa50176555415880b Mon Sep 17 00:00:00 2001 From: svetlanamikheeva Date: Mon, 2 Feb 2026 13:48:55 +0400 Subject: [PATCH 3/5] apply suggestions --- README.md | 55 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 41 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 16bc7c8..b3ad4c1 100644 --- a/README.md +++ b/README.md @@ -5,37 +5,52 @@ [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# Blazor Grid – How to Implement Custom Column Chooser with Sorting, Search, and Select All Capabilities +# Blazor Grid – How to a Implement Custom Column Chooser with Sorting, Search, and Select All Capabilities -This example implements a custom Column Chooser dialog for the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid) component. The dialog displays alphabetically sorted Grid columns and allows users to change column visibility. It also includes select/deselect all and search features (useful when working with a large number of columns). +This example implements a custom Column Chooser dialog for the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid) component. The dialog includes the following features/capabilities: + +* Allows users to toggle column visibility +* Displays Grid columns in alphabetical order +* Displays a Search Box +* Includes a Select All option ![Custom Column Chooser for DevExpress Blazor Grid](images/custom-column-chooser.png) -Unlike the custom dialog, a built-in Column Chooser displays columns in the same order as the Grid and allows users to reorder them. Use buttons above the Grid component to open custom and built-in Column Chooser dialogs and compare their functionality. +Use buttons above the Grid component to open custom and built-in Column Chooser dialogs and compare their functionality. ## Implementation Details -The custom Column Chooser dialog displays Grid columns using the [DevExpress Blazor List Box](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2) component. The List Box retrieves an `IGridColumn` collection from the Grid and excludes columns whose [ShowInColumnChooser](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridColumn.ShowInColumnChooser) property is set to `false`. The editor operates in multi-selection mode and synchronizes selected and visible Grid columns: +### Display Grid Columns + +Use the [DevExpress Blazor List Box](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2) component to display Grid columns in a custom Column Chooser dialog. Retrieve a column collection from the Grid, exclude columns whose [ShowInColumnChooser](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridColumn.ShowInColumnChooser) property is set to `false`, and assign the resulting collection to the List Box: ```razor + Values="VisibleColumns"> ``` ```csharp private void InitializeColumnList() { AllColumns = MyGrid.GetColumns().Where(i => i.ShowInColumnChooser).OrderBy(i => i, ColumnsComparerImpl.Default).ToList(); - if (ReverseOrder) - AllColumns = AllColumns.Reverse(); VisibleColumns = MyGrid.GetVisibleColumns(); } +``` + +### Toggle Column Visibility + +Activate the [ShowCheckboxes](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowCheckboxes) property to display item checkboxes. Switch the List Box to the multi-selection mode and synchronize selected items with visible Grid columns: + +```razor + + +``` + +```csharp void SelectedDataItemsChanged(IEnumerable values) { VisibleColumns = values; UpdateColumnsVisibility(); @@ -49,8 +64,20 @@ void UpdateColumnsVisibility() { MyGrid.EndUpdate(); } ``` +### Add Select All and Search Features + +Activate the [ShowSelectAllCheckbox](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowSelectAllCheckbox) property to display the Select All checkbox. Use the [ShowSearchBox](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowSearchBox) option to add search functionality in the List Box: + +```razor + + +``` + +### Sort Columns -The List Box sorts items in the following order: +Implement a comparer to sort List Box items in the following order: 1) Selection column 2) Command column @@ -75,7 +102,7 @@ class ColumnsComparerImpl : IComparer { } ``` -A [CheckBox editor](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) below the List Box allows users to reverse the item sort order dynamically: +Add a [CheckBox editor](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) that changes the sort order dynamically: ```razor From 8f6d82a97e7c1fe34c4c5b9c9aa3a2c039474503 Mon Sep 17 00:00:00 2001 From: Svetlana Mikheeva <80316217+SvetlanaMikheeva@users.noreply.github.com> Date: Mon, 2 Feb 2026 15:52:35 +0400 Subject: [PATCH 4/5] Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8498516..2356a23 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ This example implements a custom Column Chooser dialog for the [DevExpress Blazo * Allows users to toggle column visibility * Displays Grid columns in alphabetical order * Displays a Search Box -* Includes a Select All option +* Includes a Select All check box ![Custom Column Chooser for DevExpress Blazor Grid](images/custom-column-chooser.png) From 803f3ddd99d43a92c31f7defb26e0c8c1543b6ab Mon Sep 17 00:00:00 2001 From: svetlanamikheeva Date: Wed, 4 Feb 2026 11:13:35 +0400 Subject: [PATCH 5/5] apply changes --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2356a23..58fb072 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# Blazor Grid – How to a Implement Custom Column Chooser with Sorting, Search, and Select All Capabilities +# Blazor Grid – How to Implement a Custom Column Chooser with integrated Sorting, Search, and Select All Capabilities This example implements a custom Column Chooser dialog for the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid) component. The dialog includes the following features/capabilities: @@ -15,7 +15,7 @@ This example implements a custom Column Chooser dialog for the [DevExpress Blazo ![Custom Column Chooser for DevExpress Blazor Grid](images/custom-column-chooser.png) -Use buttons above the Grid component to open custom and built-in Column Chooser dialogs and compare their functionality. +Use buttons above our Blazor Grid component to open custom and built-in Column Chooser dialogs and compare associated functionality. ## Implementation Details @@ -39,7 +39,7 @@ private void InitializeColumnList() { ### Toggle Column Visibility -Activate the [ShowCheckboxes](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowCheckboxes) property to display item checkboxes. Switch the List Box to the multi-selection mode and synchronize selected items with visible Grid columns: +Activate the [ShowCheckboxes](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowCheckboxes) property to display item checkboxes. Switch the List Box to multi-select mode and synchronize selected items with visible Grid columns: ```razor { } ``` -Add a [CheckBox editor](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) that changes the sort order dynamically: +Add a [CheckBox editor](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) that changes sort order dynamically: ```razor