ASP GridView Formatting – The Rich Data Control

ASP GridView Formatting – GridView की Formatting के अन्तर्गत कई Related Tasks Complete करने पडते हैं। जहां सबसे पहले हम इस बात को तय करते हैं कि Dates, Currencies व अन्‍य Number Values को किस तरह से Appropriate तरीके से Render करने हेतु Configure किया जाए और इस जरूरत को पूरा करने के लिए हम Column की DataFormatString Property को Set करते हैं। साथ ही Render होने वाले Output Grid के Header व Data Items के Colors, Fonts, Borders व Alignment Options को भी हम हमारी जरूरत के अनुसार Configure कर सकते हैं।

इसके अलावा हम हमारी जरूरत के अनुसार विभिन्न प्रकार के Operations Perform करने के लिए GridView Control से सम्बंधित विभिन्न Events के लिए Event Handlers भी Create कर सकते हैं।

स्वयं GridView Control भी हमें कई Self-Explanatory Formatting Properties Provide करता है, जिसके अन्तर्गत GridLines Property द्वारा हम Render होने वाले Table की Borders को, CellPadding व CellSpacing Properties द्वारा Table के Cells के बीच की Spacing को तथा Caption व CaptionAlign Properties द्वारा Table के साथ Associated किए जाने वाले Caption को Control कर सकते हैं।

Fields Formatting

GridView Control का प्रत्‍येक BoundField Column हमें DataFormatString नाम की एक Property Provide करता है, जिसका प्रयोग करके हम Column में Display होने वाले Date व Number Type की Values की Formatting को format string के माध्‍यम से Configure करने के लिए कर सकते हैं।

Format Strings को सामान्‍यत: Placeholders व Format Indicator के माध्‍यम से बनाया जाता है, जो कि Curly Braces के बीच Wrapped होते हैं। जैसे:

    { 0:C }

इस Statement में 0 उस Value को Represent करता है, जिसे Format किया जाना है जबकि Colon के बाद Specify किया गया Letter “C” किसी Predetermined Format Style को Indicate करता है।

यदि हम उपरोक्त Syntax को समझें तो इस Statement में Specify किया गया Letter “C” वास्तव में Currency Format को Represent कर रहा है, जो कि Culture Settings पर आधारित है और Current Thread पर Applied है।

Default रूप से वह Client Computer जो कि English Region में Run हो रहा हो और जिसका Locale en-US Set हो, वहां Currencies को Display करने के लिए Dollar Sign का प्रयोग किया जाता है। इस स्थिति में यदि हमें हमारे Column के Data को Currency Format में Render करना हो, तो उस Column के लिए DataFormatString Property को हम निम्नानुसार Specify कर सकते हैं:

<asp:BoundField DataField=”UnitPrice” HeaderText=”Price” DataFormatString=”{0:C}” />

जबकि Different Currency Format को Use करने के लिए हम अपने Web Server के Localization Settings को Change कर सकते हैं और इस Setting को Windows Operating System के अन्तर्गत Control Panel Section में “Regional and Language Options” Applet के माध्‍यम से Set कर सकते हैं।

अथवा हम किसी अन्‍य Currency Format को Use करना चाहें, तो उस स्थिति में अपनी Web.config File में <globalization> Element Specify करते हुए किसी Different Currency Format को Set कर सकते हैं।

यदि हम Different Currency Strings को अपने Application में Use करना चाहें, तो ASP.NET Framework हमें इस जरूरत को पूरा करने के लिए कोई Built-In सुविधा Provide नहीं करता। इस वजह से इस जरूरत को पूरा करने के लिए हमें स्वयं अपने स्तर पर कुछ काम करने पडते हैं, जिसके अन्तर्गत हम Money Structure को Use करते हैं जो कि Number Amount व Culture दोनों को Wrap करता है। फिर हम इस Structure को Money.ToString() Statement का प्रयोग करते हुए String Representation के रूप में Override कर सकते हैं।

पिछले Statement में Use किए गए Numeric Value Representation के अलावा हम निम्न Numeric Format Strings को भी जरूरत के अनुसार Use कर सकते हैं:

Date व Time Values के लिए हम Visual Studio Help के Examples देख सकते हैं अथवा निम्न List को Follow कर सकते हैं:

इन Format Characters को केवल GridView Control के लिए ही नहीं बल्कि किसी भी अन्‍य Rich Data Control के लिए समान रूप से Use किए जा सकते हैं।

Styles

GridView Control, Render होने वाले Output के Look and Feel को Control करने के लिए CSS Styles पर आधारित निम्न चित्रानुसार कुल 12 Properties Provide करता है:

इन सभी Properties की का;र्प्रणाली व Effect को इनके नाम से ही समझा जा सकता है, जिनके लिए अलग से Detailed Discussion की जरूरत नहीं है। फिर भी इनका Basic Description निम्नानुसार है:

HeaderStyle Property

इस Property का प्रयोग करके हम हमारे Column के Header Row के Look and Feel को Style कर सकते हैं, जिसमें हमारे Column का Title Show होता है। लेकिन ये Property तभी अपना Effect Show करता है, जबकि ShowHeader=”True” हो।

उदाहरण के लिए यदि हम इस Property के माध्‍यम से Header Row के BackColor=Yellow, ForeColor=Red व BorderStyle=Groove Set करें, तो हमारा Resultant Output कुछ निम्नानुसार प्राप्त होता है, जिसमें Header Row, अन्‍य Rows की तुलना में अलग दिखाई देता है:

RowStyle Property

इस Property का प्रयोग करके हम हमारे Grid के प्रत्‍येक Row के Appearance के Look and Feel को Style कर सकते हैं।

उदाहरण के लिए यदि हम इस Property में BackColor=#FFCCCC Set करते हैं, तो हमारा Resultant Output निम्नानुसार Render होता है:

AlternatingRowStyle Property

इस Property को Set करके हम Even या Odd Rows को Style कर सकते हैं। ये Property RowStyle Property के साथ मिलकर काम करता है।

उदाहरण के लिए इसलिए यदि हम RowStyle Property को उपरोक्तानुसार ही Set करें जबकि इस AlternatingRowStyle Property को BackColor=#FFFFFF Set कर दें, तो हमें प्राप्त होने वाला Resultant Output कुछ निम्नानुसार प्राप्त होता है।

SelectedRowStyle Property

इस Property को Set करके हम Currently Selected Row को Style कर सकते हैं और ये Property भी RowStyle Property की Formatting के साथ मिलकर ही अपना Effect Show करता है। लेकिन ये Property अपना Effect तभी Show कर सकता है, जबकि हमने निम्न चित्रानुसार अपने GridView Control के लिए “Enable Selection” Checkbox को Check किया हो-

जब हम “Enable Selection” Checkbox को Check करने के बाद SelectedRowStyle Property में BackColor= #99FF99 Set करते हैं, और अपने Webpage को Run करके किसी Row को Select करते हैं, तो हमारा Selected Row हमें निम्न चित्रानुसार दिखाई देता है:

इस Example में हमने उस Row को Select किया है, जिसका Background Color Green है।

EditRowStyle Property

इस Property को Set करके हम Currently Edit किए जा रहे Row को Style कर सकते हैं और ये Property भी RowStyle Property की Formatting के साथ मिलकर ही अपना Effect Show करता है। लेकिन ये Property अपना Effect तभी Show कर सकता है, जबकि हमने अपने SqlDataSource Control की UpdateQuery Property को UPDATE SQL Statement से Set किया हो और फिर निम्न चित्रानुसार अपने GridView Control के लिए “Enable Editing” Checkbox को Check किया हो-

जब एक बार हम अपने GridView Control को Editing के लिए उपरोक्तानुसार Configure कर लेते हैं, उसके बाद यदि हम इस EditRowStyle Property के BackColor=#CC99FF Set करते हैं, तो इस बार अपने Webpage को Run करने पर हमें Display होने वाले Output में किसी Record के “Edit” Hyperlink को Click करने पर हमें हमारा Currently Edit होने वाला Record निम्नानुसार दिखाई देने लगता है:

EmptyDataRowStyle Property

इस Property को Set करके हम किसी Empty Data वाले Row को Style कर सकते हैं। सामान्‍यत: ये स्थिति तब पैदा होती है जब किसी Bound-Data Object में Render करने के लिए कोई Row Exist नहीं होता।

FooterStyle Property

इस Property का प्रयोग करके हम हमारे Grid के Footer Row के Look and Feel को Style कर सकते हैं। लेकिन ये Property तभी अपना Effect Show करता है, जबकि ShowFooter=”True” हो।

उदाहरण के लिए यदि हम इस Property के माध्‍यम से Header Row के BackColor=Yellow व ForeColor=Red Set कर दें, तो हमारा Resultant Output कुछ निम्नानुसार प्राप्त होता है, जिसमें Footer Row, अन्‍य Rows की तुलना में अलग दिखाई देता है:

PagerStyle Property

जब हम GridView Control के लिए Paging को Enable रखते हैं, तब Paging के लिए Display होने वाले Hyperlink को Style करने का काम इस Property द्वारा किया जाता है। लेकिन ये Property उसी स्थिति में अपना म्मिबज Show करता है, जबकि AllowPaging Property को Enable किया गया हो।

इसी तरह से हम SortedAscendingCellStyle, SortedDescendingCellStyle, SortedAscendingHeaderStyle व SortedDescendingHeaderStyle Properties के माध्‍यम से Sorted Grid के Data को Different तरीके से Render होने के लिए Set कर सकते हैं।

अभी हमने जिन Style Properties के बारे में जाना, वे Single-Value Properties नहीं हैं। बल्कि हमारे द्वारा Set की जाने वाली प्रत्‍येक Style एक Style Object के माध्‍यम से Expose होता है, जिसमें Colors (BackColor, ForeColor) को चुनने, Borders (BorderColor, BorderStyle, BorderWidth) को Add करने, Rows की Sizing (Height, Width), Row को Align (HorizontalAlign, VerticalAlign) करने तथा Text Appearance (Font, Wrap) को Set करने से सम्बंधित Properties Include होती हैं।

ये Style Properties हमें Item के Appearance यानी Look and Feel से सम्बंधित लगभग सभी प्रकार के Styling Aspects Provide करता है और यदि हम इन सभी Styling Settings को Hard-Code करना न चाहें, तो Style Object के CssClass Property को Set कर सकते हैं, जो कि Stylesheet की किसी CSS Class को Represent करता है।

इस CssClass Property को Set करना Performance की द`ष्टि से भी उपयोगी होता है, क्‍योंकि हम Property Window द्वारा जिन Properties को Set करते हैं, वे सभी Inline-CSS की तरह प्रत्‍येक Element में एक नए style Attribute के रूप में Add हो जाते हैं। जबकि CssClass Property में हम जिस नाम को Specify करते हैं, उसे अपनी Linked Stylesheet File में Class के रूप में Use करते हुए उसके लिए सभी Styling Rules उस CSS File में लिख सकते हैं।

Defining Styles

जब हम Style Properties को Set करते हैं, तो उस समय हम दो Similar Syntaxes को Use कर सकते हैं। पहले Syntax के अन्तर्गत हम एक Object-Walker को Use करते हैं, जो कि एक Extended Style Property Attribute की तरह Represent होता है। जैसे:

<asp:GridView runat=”server” ID=”grid” RowStyle-ForeColor=”DarkBlue” … />
…
</asp:GridView>

जबकि यदि हम चाहें तो Nested Element को भी Use कर सकते हैं। जैसे:

<asp:GridView runat=”server” ID=”grid” …>
<RowStyle ForeColor=”DarkBlue” … />
…
</asp:GridView>

ये दोनों ही Syntax Equivalent हैं। फिर भी जब हम Style Properties को Set कर रहे होते हैं, तब हमें दोनों में से किसी एक Approach को तय करना होता है। क्‍योंकि हम चाहें तो Global Style Properties भी Specify कर सकते हैं, जो कि हमारे Grid के प्रत्‍येक Column को प्रभावित करता है।

जबकि यदि हम चाहें तो किसी Specific Column को भी Style कर सकते हैं और जब हम Column-Specific Style Create करना चाहते हैं, तब हमें या तो “style” Attribute को Use करना पडता है या फिर हमें Attribute Column Element में Nested Elements को Specify करना पडता है। जैसे:

<asp:GridView runat=”server” ID=”grid” …>
<Columns>
<asp:BoundField DataField=”EmployeeID” HeaderText=”ID” ItemStyle-Width=”30px” />
…
</Columns>
</asp:GridView>

अथवा हम इसे निम्नानुसार भी Specify कर सकते हैं:

<asp:GridView runat=”server” ID=”grid” …>
<Columns>
<asp:BoundField DataField=”EmployeeID” HeaderText=”ID”>
<ItemStyle Width=”30px” />
</asp:BoundField>
…
</Columns>
</asp:GridView>

इस तकनीक का प्रयोग अक्सर किसी Specific Column की Width को Specify करने के लिए किया जाता है। क्‍योंकि जब हम किसी Column की Width को Specify नहीं करते, तब ASP.NET स्वयं अपने स्तर पर प्रत्‍येक Column की Width को तय कर देता है, जो कि उतना चौडा होता है, जितना Content को Single Line में Render होने के लिए जरूरी होता है। अथवा यदि Wrapping Enabled हो, तो पर्याप्त Text के Current Row में Fit हो जाने के बाद “ोष Text अगली Line में Split हो जाता है।

हालांकि वर्तमान समय में Styling को इन Style Properties का प्रयोग करते हुए Perform नहीं किया जाता, बल्कि एक Separate CSS Stylesheet File Create करते हुए Webpage के Look and Feel को Setup किया जाता है, इसलिए Styling को Define करने से सम्बंधित विभिन्न Properties को और ज्यादा Detail से जानने की कोई विशेष आवश्‍यकता नहीं है, क्‍योंकि इन सभी Styling Rules को हम हमारी CSS File द्वारा आसानी से Apply कर सकते हैं।