Sort columns with a jQuery Flexigrid

Question

Is there a way I can mark JQuery Flexigrid columns as sortable if I don't define them in-line?

i.e. I know I can do this

    $("#flex1").flexigrid(  
    {  
        colModel: [
        { display: 'Col1', name: 'Col1', sortable: true  },
        { display: 'Col2', name: 'Col2', sortable: true  }
    });

But I construct the grid just like:

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

and then just use a repeater control to output the table that JQuery will style:

<table id="flex1" >  
<tr>  
   <th>Col1 /th>  
...  
...  
<asp:Repeater ID="Repeater1" runat="server">  
   <ItemTemplate>  
    <tr>  
       <td><%# Eval("Col1") %></td>  ...

Answer 1

I haven't really used that plugin but from what I can see there is a function for changing the options after initialization.

var item = $("#flex1");

item.flexOptions({
    colModel: [
        {display: 'Col1', name: 'Col1', sortable: true},
        {display: 'Col2', name: 'Col2', sortable: true}
    ]
});

// you probably need to reload the grid after updating options
item.flexReload();

Unfortunately this plugin doesn't have any documentation so it's more a guess then the guaranteed solution. I just figured that this might work from the source code.

Answer 2

You'll probably want to actually generate the colModel value. You can use the same thing you use to generate the HTML. ie,

$('#whatnot').flexigrid({
    ...
    colModel: [
        <asp:Repeater ID="Repeater1" runat="server">  
            <ItemTemplate>
                {display: <%# Eval("Col1") %>, name : <%# Eval("Col1") %>, sortable : true, align: 'left',  width: '80'}

(I don't know the details of how ASP's templating language works, but you get the gist.)

Alternatively, you could actually build your table like you do and then traverse the DOM using jquery to build up your colModal value in Javascript.