• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET Accessing Extra Data in Data Bound Controls
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

Accessing Extra Data in Data Bound Controls

A common question I get when customers are working with data bound controls is:

How do I easily access the primary key [or any other piece of extra data] on the client, and still hide it from the user?

Concept

The concept lies in placing the “extra data” into a hidden container, associated by item index, for easy access on the client. Once you know the index of the selected item, you can query the page for the data that matches the selected index value.

The idea is the same whether or not you are using just about any type of data bound control. For this example I am using the WebDataGrid. I chose this control only because the grid is the control where this question most often comes up, but you could just as easily implement this approach with any other data bound control. This example also only represents one way to approach the problem – there are numerous other ways to accomplish the same goal. Hopefully this article will get you thinking in the right direction to build an implementation that best fits your needs.

If you would like, you can view a video of the example implemented in this article.

Code Behind

The code behind for this sample is very basic. When the page loads the grid is filled with a list of 10 instances of the Person object.

using System;
using FizzWare.NBuilder;

public partial class Default : System.Web.UI.Page
{
    protected int indexer = 0;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.Page.IsPostBack)
        {
            this.wdg.DataSource = Builder<person>.CreateListOfSize(10).Build();
            this.wdg.DataBind();
        }
    }
}</person>

Additionally I’ve added an indexer as a protected field to the page. This indexer will keep track of the item index as the control is being bound.

Markup

In this page I’ve added a WebDataGrid and a SPAN at the bottom of the page to report the value of the record’s primary key value.

For this example the “extra data” is the item’s primary key value, but you could just as easily have included any other additional data item. To generate the appropriate markup for the control a TemplateDataField is used to add in a hidden input field as part of the code generated for the control. The hidden input gets it’s unique id value from prefixing the id with some sort of sensible value and then concatenating the index value at the end. The data for the value attribute is emitted into the control just as you would under normal circumstances.

In order to save from having to write extra code in order to increment the indexer during data binding, the incrementing expression found on line 10 is used to keep the indexer’s value in sync with the controls current index.

<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<ig:WebDataGrid ID="wdg" EnableViewState="False" runat="server"
    AutoGenerateColumns="False">
    <Columns>
        <ig:TemplateDataField Key="FirstName" Header-Text="First Name">
            <ItemTemplate>
                <input type="hidden" id="pk<%= this.indexer %>" value="<%# Eval("Id") %>" />
                <%# Eval("FirstName") %>
                <% this.indexer++; %>
            </ItemTemplate>
        </ig:TemplateDataField>
        <ig:BoundDataField
            DataFieldName="LastName"
            Header-Text="LastName"
            Key="LastName" />
        <ig:BoundDataField
            DataFieldName="LastLoginDate"
            Header-Text="LastLoginDate"
            Key="LastLoginDate" />
    </Columns>
    <Behaviors>
        <ig:RowSelectors>
        </ig:RowSelectors>
        <ig:Selection CellClickAction="Row" RowSelectType="Single">
            <SelectionClientEvents RowSelectionChanged="onRowSelectionChanged" />
        </ig:Selection>
    </Behaviors>
</ig:WebDataGrid>
<p>The selected primary key value is: <span id="selectedPK"></span></p>
</form>

Finally the Selection behavior is customized to fire the RowSelectionChanged event. In this case the event is handled by a function named onRowSelectionChanged. The next section discusses the required JavaScript needed to complete the solution.

Script

The script you implement may vary depending on what type of data bound control you are working with, but in this instance you need to look at the selected rows and work down in order to find the selected index. Once the index is known then pairing the correct prefix with the selected index value will give you direct access to any hidden data on the page.

<script type="text/javascript">
    function onRowSelectionChanged(sender, eventArgs)
    {
        var rows = eventArgs.getSelectedRows();
        var row = rows.getItem(0);
        var index = row.get_index();
        $get("selectedPK").innerHTML = $get("pk" + index).value;
    }
</script>

Resources

  • Watch the video
  • Download the code
  • WebDataGrid
  • Share
  • History
  • More
  • Cancel
Related
Recommended