Question

I’ve got an ASP.Net project with C# and have a Repeater Control on an aspx page that builds up an html table by iterating over a datasource. I want to use the JQuery Flexigrid plug-in to make the table scrollable, but have been unable to figure out how to make it work due to lack of documentation on the plug-in. Does anyone know how to do this, or have sample code to share?

Answer 1

I have never used Flexigrid myself however after looking at the samples on the site I’ll offer my suggestions.

It looks like what you need to create with your repeater is a properly formatted html table with at least a thead and tbody section.

<table id="mytable">
  <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td>table data 1</td>
        <td>table data 2</td>
      <tr>
  </tbody>
</table>

Once done, making a simple call to the following should create the Flexigrid table with the default settings:

$("#mytable").flexigrid();

From there you can pass in what looks to be a ton of options to make it look as pretty as you want.

As for the repeater itself, there are a bunch of ways to set it up depending on what you need. Probably the simplest way is as follows:

<table>
<thead>
  <tr>
    <th><asp:label id="header1" runat="server"></asp:label></th>
    <th><asp:label id="header2" runat="server"></asp:label></th>
  </tr>
</thead>
<tbody>
<asp:repeater id="myrepeater" runat="server" OnItemDataBound="myrepeater_ItemDataBound">
  <ItemTemplate>
    <tr>
      <td><asp:label id="data1" runat="server"></asp:label></td>
      <td><asp:label id="data2" runat="server"></asp:label></td>
    </tr>
  </ItemTemplate>
</asp:repeater>
</tbody>
</table>

And your data bind event would look something like this:

public void myrepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
  myDataObject = e.Item.DataItem;
  Label data1 = e.Item.FindControl("data1");
  Label data2 = e.Item.FindControl("data2");

  data1.Text = myDataObject.data1;
  data2.Text = myDataObject.data2;
}