GridView – Rich Data Control

GridView – Rich Data Control – ये एक बहुत ही Flexible Grid Control है, जिसका प्रयोग उस समय किया जाता है, जब हम हमारे Data को Rows/Columns के माध्‍यम से सारणी के रूप में Render करना चाहते हैं। इस Control में बहुत सारे Extra Ordinary Features भी Included हैं, जिसकी वजह से हम Display हो रहे Records का Selection, Paging, Sorting व Editing भी कर सकते हैं। साथ ही GridView Control के साथ Templates का प्रयोग करके हम इसकी Functionality को Extend भी कर सकते हैं।

DataGrid Control की तुलना में GridView Control की मुख्‍य विशेषता ये है कि हम बिना एक भी Line का Program Logic Code लिखे हुए भी इसे उपयोग में ले सकते हैं और Underlying Database अथवा किसी अन्‍य Collection में Stored Data को इसके माध्‍यम से Render कर सकते हैं, जैसाकि पिछले Chapter के विभिन्न Examples में किया था।

जब हम GridView Control को Use करते हैं, तब Paging व Selection जैसे Common Tasks के लिए हमें किसी प्रकार का कोई Code नहीं लिखना होता। जबकि DataGrid Control को Use करते समय हमें इन्हीं Common Tasks को Perform करने के लिए Event Handlers Create करने पडते हैं।

Handling Columns

हालांकि पिछले Chapter के कई Examples में हमने GridView Control को Use किया था, लेकिन किसी भी Example में हमने अपने GridView Control को Customize नहीं किया। जबकि GridView Control के विभिन्न Features को जरूरत के अनुसार Customize किया जा सकता है।

जब हम GridView Control की AutoGenerateColumns Property को true Set करते हैं, तो GridView Control Reflection का प्रयोग करते हुए हमारे Data Object को Examine करता है और किसी Custom Object की सभी Properties को अथवा किसी Record के सभी Fields को Find करता है। फिर प्रत्‍येक Field या Property के लिए उसी क्रम में एक Separate Column Create करता है, जिस क्रम में वे Find होते हैं

इस तरह से एक GridView Control स्वयं ही Automatically अपने Record/Custom Object के Field/Properties के आधार पर Columns Create कर लेता है, जिसकी वजह से किसी Custom Object या Record के Data को Output में Render करने के लिए हमें कोई भी Extra Code लिखने की जरूरत नहीं होती। हालांकि Automatically Create होने वाले Columns की वजह से कई बार हमें GridView Control द्वारा वो Flexibility प्राप्त नहीं होती, जिसकी हमें जरूरत होती है।

उदाहरण के लिए यदि हम अपने GridView Control में किसी Column को Hide करना चाहें, अथवा उनके Render होने के क्रम को बदलना चाहें, या फिर उन Columns के Heading Text को Change करना चाहें, तो इन सभी जरूरतों को पूरा करने के लिए हमें AutoGenerateColumns Property को False Set करना जरूरी होता है और इस Property को False Set करने के बाद <GridView> Element में <Columns> Section को Manually Specify करना पडता है।

GridView Control में जितने भी Columns Create होते हैं, वे सभी अग्रानुसार में से ही किसी एक Type के हो सकते हैं, जबकि हमारे GridView Control के Columns को जब हम Define करते हैं, तो उनका क्रम हमेंशा Right-to-Left Direction में तय होता है।

BoundField Column Type

इस प्रकार का Column, Data Source के किसी Field के Text को Display करता है।

ButtonField Column Type

इस प्रकार का Column, किसी List के प्रत्‍येक Item के लिए एक Button Display करता है।

CheckBoxField Column Type

इस प्रकार का Column, किसी List के प्रत्‍येक Item के लिए एक CheckBox Display करता है। सामान्‍यत: ये Automatically True/False Fields के लिए Use हो जाता है। SQL Server में किसी Bit Data Type के Fields के लिए ये Column Type Set हो जाता है।

CommandField Column Type

इस प्रकार का Column, Selection या Editing Buttons Provide करता है।

HyperLinkField Column Type

इस प्रकार का Column, अपने Content को Hyperlink की तरह Display करता हैं।

ImageField Column Type

इस प्रकार का Column, किसी Binary Field के आने वाले Image Data को Display करता है। इसे Specify करने पर Column में Supported Image Format Display हो जाता है।

TemplateField Column Type

इस प्रकार का Column, कई Fields, Custom Controls व Arbitrary HTML को Specify करने की सुविधा देता है। ये Field हमें सबसे ज्यादा Control Provide करता है क्‍योंकि हम इसमें किसी भी प्रकार के Data को Display कर सकते हैं, लेकिन इसी प्रकार के Column के लिए हमें सबसे ज्यादा काम भी करना पडता है।

इन सभी Column Types में सबसे ज्यादा Use होने वाला Column Type BoundField ही है, जो कि किसी Data Object (Collection, DataSet, DataTable, etc…) के किसी एक Field को GridView Control के एक Column के साथ Bind करता है।

उदाहरण के लिए यदि हम किसी ProductID Field के Data को Single Data-Bound Column के माध्‍यम से Render करना चाहें, तो हमारा Markup कुछ निम्नानुसार होगा:

   <asp:BoundField DataField=”EmployeeID” HeaderText=”ID” />

जब हम स्वयं इस तरह से अपने GridView Control के Columns को Define करते हैं, तो Auto-Generated Columns की तुलना में हमें एक मुख्‍य Benefit ये प्राप्त होता है कि हम हमारे GridView Control के Column के Header में दिखाई देने वाले Text को HeaderText Attribute के माध्‍यम से Set कर सकते हैं।

जब हम पहली बार GridView Control Create करते हैं, तब उसकी AutoGenerateColumns Property Set नहीं होती। परिणामस्वरूप उसका Default मान “true” ही रहता है। इसलिए जब हम इसे किसी Data-Source Control जैसे कि SqlDataSource के साथ Bind करते हैं, तो Output में किसी प्रकार का कोई परिवर्तन नहीं होता।

लेकिन यदि हम इस Control के Popup में निम्न चित्रानुसार दिखाई देने वाले “Refresh Schema” Hyperlink पर Click करते हैं:

तो उस स्थिति में AutoGenerateColumns Property “false” Set हो जाता है। फलस्वरूप Visual Studio, GridView Control के प्रत्‍येक Column के लिए Data-Source को Search करता है और प्रत्‍येक Column को <asp:BoundField> Element के माध्‍यम से Define कर देता है। जैसे:

<asp:SqlDataSource

   ID=”sourceCategory” runat=”server”

   ConnectionString=”Data Source=.;Initial Catalog=Northwind;Integrated Security=True”

   ProviderName=”System.Data.SqlClient”

   SelectCommand=”SELECT * FROM [Categories]”

></asp:SqlDataSource>

<asp:GridView

   ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”

   DataKeyNames=”CategoryID” DataSourceID=”sourceCategory”>

    <Columns>

        <asp:BoundField DataField=”CategoryID” HeaderText=”CategoryID”

         InsertVisible=”False” ReadOnly=”True” SortExpression=”CategoryID” />

        <asp:BoundField DataField=”CategoryName” HeaderText=”CategoryName”

         SortExpression=”CategoryName” />

        <asp:BoundField DataField=”Description” HeaderText=”Description”

         SortExpression=”Description” />

    </Columns>

</asp:GridView>

इसलिए इस Approach को Use करने के निम्नानुसार कई Advantages हैं:

• हम बडी ही आसानी से अपने GridView Control के Column-Order यानी Columns के क्रम] Heading Text व Column से सम्बंधित Properties के माध्‍यम से अन्‍य Details को नि‍श्चित कर सकते हैं।

• जिन Columns को हम Output में Render होने से रोकना चाहते हैं, उनके Column Element को Remove करके उन्हें Hide कर सकते हैं। हालांकि हमें जहां तक हो, अपनी SQL Query के माध्‍यम से उन्हीं Columns को Underlying Database से Retrieve करना चाहिए, जिन्हें GridView द्वारा Display करना हो, ताकि हमारे Web Application की Performance बनी रहे। यद्धपि यदि हम चाहें तो अपने Columns की Visible Property को false Set करके भी हम किसी Particular Column को Hide कर सकते हैं। जैसे:

         GridView1.Columns[1].Visible = false

• जिन Columns को हम Manually Define करते हैं, वे Auto-Generated Columns की तुलना में Fast Execute होते हैं। क्‍योंकि Auto-Generated Columns, GridView को Data-Source के साथ Runtime में Bind होने के लिए बाध्‍य करता है।

• जब हम Manual Codes Use करते हैं, तब हम हमारे GridView Control में अपनी जरूरत के अनुसार Extra Columns को भी Define कर सकते हैं, जो कि वास्तव में Underlying Data-Source में अथवा Data-Object में Exist नहीं होते, बल्कि Application के Run होते समय किसी Runtime Calculation से Generate होने वाले मानों को Render करते हैं और ये सुविधा हमें Auto-Generated Columns के साथ प्राप्त नहीं होती।

यहां एक और बात ध्‍यान रखने वाली है कि हालांकि हम हमारी इच्छानुसार GridView Control में Columns को Define कर सकते हैं, लेकिन यदि हम हमारे Data-Object में Exist Record के Fields के अनुसार ही अपने GridView Control को फिर से Default Columns से Reset करना हो, तो हम “Refresh Schema” Hyperlink को Click करके ऐसा कर सकते हैं।

जब हम किसी Column यानी Bound Field को Manually Define करते हैं, तब हम उस उसके साथ निम्न Properties को भी Use कर सकते हैं:

DataField Property

ये Property उस Field या Property के नाम को Indicate करता है, जिसे हम हमारे GridView Control के Column में Display करना चाहते हैं।

DataFormatString Property

इस Property का प्रयोग करके हम हमारे Field या Property को Format कर सकते हैं। ये Property उस स्थिति में और भी उपयोगी होता है, जब हमें Numbers या Dates को Represent करना होता है।

ApplyFormatInEditMode Property

यदि इस Property में true Set हो, तो Format String का उपयोग Value को Format करने के लिए होता है, फिर भले ही वह Value किसी TextBox Control में Editing के लिए ही Appear क्‍यों न हो रहा हो। जबकि यदि इसका मान false हो, तो Display होने वाला Data Normal Value (1221.99) की तरह ही Display होता है, न कि Formatted Value ($1,221.99) की तरह।

HeaderText, FooterText and HeaderImageUrl Property

पहली दो Properties का प्रयोग करके हम हमारे Grid के Header व Footer के Text को Set कर सकते हैं। जबकि GridView.ShowHeader व GridView.ShowFooter Properties में true Set हो। Header के रूप में सामान्‍यत: Column का एक Descriptive नाम होता है, जबकि Footer में सामान्‍यत: Column के Dynamically Calculated मान अथवा Summary को Represent किया जाता है। जबकि HeaderImageUrl Property का प्रयोग करके हम Column के Header में किसी Text के स्थान पर किसी Image को Display कर सकते हैं।

ReadOnly Property

यदि इस Property का मान true हो, तो इस Column की Values को Editing Mode में भी Change नहीं किया जा सकता। इस प्रकार के Column के लिए कोई Editing Control Provide नहीं किया जाता और सामान्‍यत: किसी भी Table का Primary Key Field एक Read-Only Field ही होता है।

InsertVisible Property

यदि इस Property का मान false हो, तो इस Column की Values को Insert Mode में भी Set नहीं किया जा सकता। इस Property को सामान्‍यत: हम तब Use करते हैं, जब हम हमारे Column Value को Programmatically Set करना चाहते हैं अथवा Database में Specified Default Value से Set करना चाहते हैं।

Visible Property

यदि इस Property का मान false हो, तो वह Column Output में Render नहीं होता। यानी इस Property का प्रयोग करके हम किसी Column को Output में Render होने से रोक सकते हैं।

SortExpression Property

इस Property को Sorting Feature के साथ Use किया जाता है। इस Property में हम किसी Expression को Specify करते हैं, जो कि Query के साथ Append होकर Underlying Database से आरोही या अवरोही क्रम में Records को Retrieve करता है।

HtmlEncode Property

यदि इस Property का मान true हो, जो कि इसका Default मान होता है, तो वह सभी Characters HTML Encoded हो जाते हैं, ताकि कोई भी Special Character हमारे Output को Disturb न कर सके। इस Feature को Disable करने के लिए हम इस Property में false Value Set कर सकते हैं और सामान्‍यत: हम ऐसा तब करते हैं, जब हमें हमारे Column में Working HTML Element जैसे कि Hyperlink को Embed करना होता है, लेकिन ये Approach Safe नहीं होता। इसलिए जहां तक सम्भव हो, इस Property को true ही Set रहने देना चाहिए।

NullDisplayText Property

इस Property में हम उस Text को Specify करते हैं, तो तब दिखाई देता है, जब Column में Display होने के लिए Null Value होता है। इस Property का Default मान Empty String (“”) होता है, जिसे हम अपनी इच्छानुसार Replace कर सकते हैं।

ConvertEmptyStringToNull Property

यदि इस Property का मान true हो, तो इससे पहले कि किया गया कोई Change Underlying Database में Permanently Commit हो, सभी Empty Strings, Null Values में Convert हो जाती हैं।

ControlStyle, HeaderStyle, FooterStyle and ItemStyle Property

ये Properties हमारे Column की Appearance को Configure करने की सुविधा Provide करते हैं। इन Properties को Use करके हम हमारे GridView Control के Generate होने वाले Output Rows की Styling को Override कर सकते हैं

यदि हम हमारे GridView Control के Columns को Manually Configure करना न चाहें, तो हम Visual Studio के Properties Window में Columns Property के सामने दिखाई देने वाले Ellipsis (…) Button को Click कर सकते हैं।

जैसे ही हम इस Button को Click करते हैं, हमारे सामने निम्न चित्रानुसार एक “Fields” Dialog Box Display होता है, जिसके विभिन्न Options का प्रयोग करते हुए हम हमारे Column को जरूरत के अनुसार Configure कर सकते हैं:

हालांकि अभी तक हमने GridView Control के जिन Features के बारे में जाना है, वे सभी काफी Higher-Level Features हैं। जबकि GridView Control को हम निम्नानुसार कुछ और Sections में Divide करके और ज्यादा बेहतर तरीके से समझ सकते हैं:

Formatting

इस Section में GridView Control द्वारा Render होने वाले Rows व Data Values की Formatting को Control करते हैं।

Selecting

इस Section द्वारा हम ये तय करते हैं कि GridView Control किसी Row को किस प्रकार से Select व Respond करेगा।

Sorting

इस Section द्वारा हम ये तय करते हैं कि GridView Control अपने Column Header को Click करने पर किस प्रकार से Records की Sorting करके Records आरोही या अवरोही क्रम में Reorder करेगा।

Paging

इस Section द्वारा हम ये तय करते हैं कि GridView Control एक Page पर कुल कितने Records Render करेगा और ज्यादा Records होने पर उन्हें Multiple Pages में किस तरह से Divide करते हुए Render करेगा।

Templates

इस Section में द्वारा हम GridView Control के Layout, Formatting व Editing को Define करने की सुविधा प्राप्त करते हैं।