GridView Templates

GridView Templates – अभी तक हमने जितने भी Examples में GridView Control को Use करके Data को Show किया है, उनमें प्रत्‍येक Field के लिए Separate Bound Columns का प्रयोग किया है। लेकिन यदि हम किसी Single Cell में Multiple Values को Place करना चाहें या किसी Cell में HTML Elements व Server Controls को Place करना चाहें, तो इस प्रकार की जरूरतों को पूरा करने के लिए हमें TemplateField को Use करना पडता है।

TemplateField हमें किसी Column के लिए पूरी तरह से Customized Template Define करने की सुविधा देता है। Template के अन्दर हम हमारी जरूरत के अनुसार Control Element, Arbitrary HTML या Server Controls अथवा Binding Expressions Specify कर सकते हैं। यानी हम इन Templates में जो चाहें वो Contain कर सकते हैं।

उदाहरण के लिए मानलो कि हम किसी Field में FirstNameLastName Columns को एक साथ एक Column की तरह Combine करना चाहते हैं और इस जरूरत को पूरा करने के लिए हम निम्नानुसार ItemTemplate Construct कर सकते हैं:

[code]
File Name: Test.aspx
<%@ Page Language="C#"
   AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="GridView.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource
            ID="sourceEmployee" runat="server"
            ConnectionString="<%$ ConnectionStrings:Northwind %>"
            SelectCommand=
                  "SELECT LastName, FirstName, Title, TitleOfCourtesy,
                     BirthDate, City, Region FROM Employees"
            ></asp:SqlDataSource>
        <br />
        <asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False" DataSourceID="sourceEmployee">
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                       <%# Eval("FirstName") %> <%# Eval("LastName") %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField
                  DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:BoundField DataField="TitleOfCourtesy"
                  HeaderText="TitleOfCourtesy" SortExpression="TitleOfCourtesy" />
                <asp:BoundField DataField="BirthDate"
                  HeaderText="BirthDate" SortExpression="BirthDate" />
                <asp:BoundField
                  DataField="City" HeaderText="City" SortExpression="City" />
                <asp:BoundField
                  DataField="Region" HeaderText="Region" SortExpression="Region" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>
[/code]

जब हम इस Webpage को Run करते हैं, तो इस बार हमें निम्नानुसार Output प्राप्त होता है:

GridView Templates in ASP.NET WebForms in Hindi

जहां हम देख सकते हैं कि इस बार केवल एक Name नाम का Column ही है, जिसमें FirstName LastName दोनों Fields Combined रूप में दिखाई दे रहे हैं और ऐसा इसलिए है क्‍योंकि इस Example में हमने FirstName व LastName के BoundField Elements को Remove कर दिया है और उसके स्थान पर निम्नानुसार TemplateField Element को Specify कर दिया है:

[code]
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                       <%# Eval("FirstName") %> <%# Eval("LastName") %>
                   </ItemTemplate>
                </asp:TemplateField>
[/code]

अब जब हम अपने GridView Control को Bind करते हैं, तो Webpage Run होते समय GridView Control, Data को Data Source से Fetch करता है और Items के Collection में Walk करता है। फिर प्रत्‍येक Item (FirstName, LastName) के लिए ItemTemplate Process होता है, Data Binding Expressions Evaluate होता है और फिर Processing के बाद Combined Name Output में Render होने वाली Table में “Name” Column के रूप में Add हो जाता है।

इस Example में हमने जिस Template को Specify किया है, वह काफी Simple Template है, जिसमें तीन Data-Binding Expressions को Define किया गया है और जब ये तीनों Expressions Evaluate होते हैं, तो Ordinary Text में Convert हो जाते हैं। परिणामस्वरूप FirstName LastName दोनों Combined Form में एक Single Item की तरह Represent होने लगते हैं और Output में एक Single Column के अन्तर्गत Render होते हैं।

हम देख सकते हैं कि इस TemplateField के अन्तर्गत हमने Eval() Expression को Use किया है, जो कि एक Static Method है और इसे System.Web.UI.DataBinder Class में Define किया गया है।

Eval() एक बहुत ही Convenient Expression है, जो Current Row के साथ Bound Data Item को Automatically Retrieve करता है। फिर Reflection का प्रयोग करते हुए Matching Field/Property को Find करता है और अन्त में Found Field/Property की Value को Retrieve कर लेता है।

हालांकि इस प्रक्रिया में Reflection के Use होने के कारण थोडा Extra काम करना पडता है। लेकिन इस Overhead की वजह से Request Fulfill होने में कोई बहुत ज्यादा Extra समय नहीं लगता। जबकि यदि हम Eval() Method को Use न करें, तो उस स्थिति में Container.DataItem Property के माध्‍यम से Data Object को Access करना पडता है और Returned Result की Type Casting भी करनी पडती है। जैसे:

[code]   <%# ((EmployeeDetails)Container.DataItem)["FirstName"] %> [/code]

हम समझ सकते हैं कि ये तरीका Eval() Method को Use करने की तुलना में ज्यादा Problematic व Error-Prone हो सकता है। इसीलिए इस तरीके को Use करने के स्थान पर Eval() को Use करना ज्यादा बेहतर रहता है।

Eval() Method एक और महत्वपूर्ण सुविधा Provide करता है, जिसके कारण हम किसी Data Field को Retrieve करने के साथ ही उसे जरूरत के अनुसार Format भी कर सकते हैं और Eval() Method के इस Feature को Use करने के लिए हमें इसके Overloaded Version को निम्नानुसार Use करना होता है:

[code]   <%# Eval("HireDate", "{0:MM/dd/yy}") %> [/code]

हम हर उस Format String को यहां पर Specify कर सकते हैं, जिसके बारे में हमने Fields Formatting Section के अन्तर्गत Discuss किया था।

इस Section में Discuss किए गए तरीके का प्रयोग करके हम किसी भी प्रकार के Column को Combine कर सकते हैं अथवा सभी Auto-Generated Columns को Remove करते हुए अपनी सुविधानुसार सभी Columns को स्वयं Specify कर सकते हैं। जैसे:

[code]
File Name: Test.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="GridView.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource
            ID="sourceEmployee" runat="server"
            ConnectionString="<%$ ConnectionStrings:Northwind %>"
            SelectCommand="SELECT * FROM [Employees]"
         ></asp:SqlDataSource>
        <br />
        <asp:GridView
            ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataSourceID="sourceEmployee" DataKeyNames="EmployeeID">
           <Columns>
                <asp:TemplateField HeaderText="Employees">
                    <ItemTemplate>
                        <b>
                            <%# Eval("EmployeeID") %> -
                            <%# Eval("TitleOfCourtesy") %> <%# Eval("FirstName") %>
                            <%# Eval("LastName") %>
                        </b>
                        <hr />
                        <small><i>
                            <%# Eval("Address") %><br />
                            <%# Eval("City") %>, <%# Eval("Country") %>,
                            <%# Eval("PostalCode") %><br />
                            <%# Eval("HomePhone") %></i>
                            <br />
                            <br />
                            <%# Eval("Notes") %>
                        </small>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>
[/code]

जब हम इस तरह से Eval() Expression का प्रयोग करते हुए Create किए गए Webpage को Run करते हैं, तो हमें निम्नानुसार Output प्राप्त होता है:

GridView Templates in ASP.NET WebForms in Hindi

हम देख सकते हैं कि Eval() Method का प्रयोग करते हुए हम किस तरह से अपने GridView Output को Modify करते हुए अलग तरीके से Render कर सकते हैं, जो कि Auto-Generated Fields के साथ सम्भव ही नहीं है।

Advance ASP.NET WebForms with C# in Hindi - BccFalna.com: TechTalks in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook Advance ASP.NET WebForms with C# in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।

Advance ASP.NET WebForms in Hindi | Page:707 | Format: PDF

BUY NOW GET DEMO REVIEWS