Contrôlez la visibilité de la colonne gridview en utilisant javascript

Question

J'ai une grille de vue et je dois contrôler la visibilité des colonnes de la grille en utilisant javascript. Considérez cette grille. J'ai quelques colonnes.

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:CheckBox ID="chkResource" runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Resource"> 
      <ItemTemplate> 
       <asp:Label ID="Resource" Text='<%# Bind("Resource") %>' runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
       <asp:BoundField DataField="Description" HeaderText="Resource Description" HtmlEncode="false"> 
     <ItemStyle HorizontalAlign="Center" /> 
     <HeaderStyle HorizontalAlign="Center" /> 
    </asp:BoundField> 

    </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

je peux contrôler la visibilité de ces colonnes sur le côté serveur en utilisant ce -

grdTest.Columns[n].Visible = false; 

Mais, je dois contrôler la visibilité du côté client en utilisant javascript. J'ai beaucoup essayé mais je n'ai pu accéder qu'à l'objet ligne ou à une cellule particulière de la grille.

grid.rows[index].cells[i].style="display: none"; //for cell 

Existe-t-il un moyen d'accéder à l'objet colonne de la grille et de contrôler sa visibilité à l'aide de javascript?

Answer 1

Vous pouvez essayer en appelant le code du serveur. Voici la fonction js qui est utilisé pour appeler le code:

function HideColumns(sender, args) 
{ 
    PageMethods.HideSomeColumns(args, onSuccess, onError); 
} 

function onReportSuccess(result) 
{ 
} 

function onReportError(error) 
{ 
    alert("There was an error."); 
} 

Et ici est la fonction côté serveur qui est utilisé pour masquer les colonnes que vous voulez:

[WebMethod] 
[System.Web.Script.Services.ScriptMethod] 
public static void ReportTranslation(int n) 
{ 
    grdTest.Columns[n].Visible = false; 
} 

Il existe d'autres options pour vous - utilisez js pur:

function show_hide_column(col_no, do_show) { 

    var stl; 
    if (do_show) stl = 'block' 
    else   stl = 'none'; 

    var tbl = document.getElementById('id_of_table'); 
    var rows = tbl.getElementsByTagName('tr'); 

    for (var row=0; row<rows.length;row++) { 
     var cels = rows[row].getElementsByTagName('td') 
     cels[col_no].style.display=stl; 
    } 
} 

Answer 2

une simple approche serait d'utiliser jQuery et définir un nom de classe CSS sur les cellules de la colonne que vous voulez afficher/cacher.

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate CssClass="hide-me"> 
       <asp:CheckBox ID="chkResource" runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

Définissez la visibilité à l'affichage: aucun par défaut dans la feuille de style, ou vous pourriez aussi mettre cela dans le style de la cellule:

.hide-me { display: none; } 

Puis de javascript en utilisant jQuery:

$('.click-me').click(function(e) { 
    $('.hide-me').show(); 
    // OR you could use toggle: 
    $('.hide-me').toggle(); 
});