Discussion :

[mcolo]

Bonjour, après moulte recherche sur ce site et internet en général

j'en viens à demander directement

je cherche à créer une gridview avec un header modifié afin de filtrer les données de ma gridview par colonne, la particularité est que la table utilisée pour le gridview peut changer

le gridview reçoit les données d'une sqldatasource avec requete "select * from table"

en asp, voici le code que cela donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Firm" 
                                DataSourceID="SqlDataSource1" 
                        EmptyDataText="Pas de données pour le filtre actuel"><Columns>
                                <asp:TemplateField HeaderText="Firm" SortExpression="Firm"><EditItemTemplate><asp:Label ID="Label1" runat="server" Text='<%# Eval("Firm") %>'></asp:Label>
                                        </EditItemTemplate><HeaderTemplate><asp:TextBox ID="TextBox1" runat="server" Width="120px"></asp:TextBox><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/triangle.gif" 
                                                onclick="ImageButton1_Click" />
                                            <asp:Label ID="Label3" runat="server">Firm</asp:Label>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Firm") %>'></asp:Label>
                                        </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Firm_Name" SortExpression="Firm_Name">
                                        <HeaderTemplate>
                                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                                            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/img/triangle.gif" 
                                                onclick="ImageButton2_Click" />
                                            <asp:Label ID="Label1" runat="server">Firm_Name</asp:Label>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("Firm_Name") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    </Columns><HeaderStyle HorizontalAlign="Center" />
                                </asp:GridView>

jusque là, pas de souci, tout fonctionne bien

par contre, la gridview doit pouvoir afficher non plus 1 table donnée, mais n'importe quelle table parmis environ 50

j'ai donc fait une dropdownliste qui contient le nom des tables (le probleme ne porte pas la dessus)

à l'évènement changedindex de la ddl, je tente de bind la gridview avec la nouvelle datasource, et là... c'est le drame avec le datakeynames que je n'arrive pas à changer
que ce soit avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

GridView1.DataKeyNames.SetValue("Procedure_Id", 0);

ou encore directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

GrivdView1.DataKeyNames[0] = "Procedure_Id"

je cherche donc à changer les données de mon gridview, tout en conservant son header qui sert à filtrer (une textbox, un label pour le nom de la colonne, et un bouton qui lance l'event du filtre)

j'espere que je me suis correctement exprimé
merci d'avance

[mcolo]

2 fonctionnalités sont rajoutées à la gridview

- le header doit apparaitre même si le gridview est vide
- on doit pouvoir ajouter du javascript à la textbox du filtre
(lancer le filtre quand on appuie sur la touche "entrée")

pour cela, je vais m'orienter vers la dérivation de la classe gridview afin de créer la gridview correspond à ce que je souhaite

est-ce la bonne marche à suivre ?

[User.Anonymous]

GridView1.DataSource ne convient pas ?

Pour afficher le header, tu n'as qu'a le lier avec un ds vide.

[mcolo]

j'ai reussi une premiere partie
à savoir avoir un gridview qui change en fonction du sqldatasource

j'ai modifié la gridview

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                    AllowSorting="True" DataSourceID="SqlDataSource1" 
                    onpageindexchanging="GridView1_PageIndexChanging" 
                    onrowcreated="GridView1_RowCreated" onsorting="GridView1_Sorting">
                </asp:GridView>

et ajouté du code à un event

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if ((e.Row != null) && e.Row.RowType == DataControlRowType.Header)
        {
            int i = 1;
            foreach (TableCell cell in e.Row.Cells)
            {
                TextBox tx = new TextBox();
                tx.Attributes.Add("onkeypress", "bt_click2()");
                tx.ID = "TextBox" + i.ToString();
                cell.Controls.Add(tx);
                i++;
 
                ImageButton button = new ImageButton();
                button.ImageUrl = "img/triangle.gif";
                button.Attributes.Add("onclick", "click()");              
                cell.Controls.Add(button);
            }
        }
    }

maintenant, j'ai un peu de mal à lier du code javascript
je passe par le attributes.add

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function bt_click2()
{
    if(window.event.keyCode==13)
    {
        alert ("apres entree ");
        var Button = document.getElementById("Button1");        
        Button.click();  
        window.event.cancel=true;
    }
}
 
function click()
{
        alert ("apres btn");
        var Button = document.getElementById("Button1");        
        Button.click();  
        window.event.cancel=true;
}

quand je clic sur mon image bouton, il ne se passe rien

en revanche, quand j'appuie sur la touchée "entrée" lorsque je suis sur la textbox, l'event se declenche bien, mais pas à chaque fois
je pense que ça vient du faire que la gridview est dans un updatepannel ajax, et que le bouton contenant le code y est aussi
donc parfois le "entrée" post le bouton, et parfois ca trigger l'event de la textbox
pour en avoir le coeur net, j'ai testé avec la touche espace à la place (keycode 32), et ça a l'air de bien fonctionné
donc euh... je cherche pourquoi l'image bouton ne fonctionne pas, et comment faire fonctionner correctement le "entrée" du textbox

[mcolo]

pour le problème de l'image button

il ne fallait pas lui ajouter de code javascript en fait
mais tout simplement l'event du clic

ImgBtn.Click += new ImageClickEventHandler(ImgBtn_Click);

puis créer à la main l'event correspondant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    protected void ImgBtn_Click(object sender, EventArgs e)
    {
          blablabla
    }

plus que le mystere du javascript a quand on appuie sur entrée dans la textbox à résoudre

[mcolo]

pour faire simple... gérer des events en appuyant sur le bouton entrée
c'est chiant à cause d'éventuel bouton de type submit déjà présent

quand j'examine le contenue de ma page avec "view code" de mon explorateur internet, les boutons ne sont pas de type submit mais "image"
et pourtant le comportement submit existe toujours

la solution a été de passer par la touche "tab"

au passage, je joins du code javascript qui fonctionne sous IE et firefox, ca pourra toujours servir aux gens qui se perdent sur ce thread =)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function bt_click2(e,id)
{
 
    var key;
    if(e.keyCode) key = e.keyCode;    
    else key = e.charCode; 
 
    var browser = "";
    if (e == "[object]") browser = "ie"; 
 
    if (key == 9)
    {
        var finalid = id.substring  (0, id.length - 8) + "ImageButton" + id.substr(id.length -1,1); 
        if (browser == "ie")
        {
            var Button = document.getElementById(finalid);
            Button.click(); 
            e.cancel = true; 
        }
        else
        {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
            var cb = document.getElementById(finalid); 
            var canceled = !cb.dispatchEvent(evt);
        }     
    }
}