Manipuler un ASPxGridView côté client

**Moana689** · 15/05/2013, 05h02

Bonjour,

voila j'ai commencé à apprendre l'ASP il y a peu et je bloque sur un point.
En fait j'ai 2 ASPxGridView, la 1ère se remplie à partir d'un fichier qui est lu dans le Page_Load et je dois pouvoir transférer des lignes que j'ai sélectionnées de la 1ère grille à la 2ème grâce à un bouton. J'ai galéré pendant une semaine pour faire cette fonction mais ça y est, elle marche.

Le problème c'est qu'on me demande maintenant de faire la même chose mais l'action effectué par le bouton doit être gérée côté client et là, je suis perdu.

Voici le code-behind :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxGridView;
using System.IO;
using System.Collections;
using System.Data;
 
 
namespace maquette1
{
    public partial class _Default : System.Web.UI.Page
    {
 
        public DataTable Data { get; set; }
        public DataTable destData { get; set; }
        public DataSet dataSet { get; set; }
        public DataSet  dataSetExport{ get; set; }
 
        protected void Page_Load(object sender, EventArgs e)
        {
 
         /*   if (!Page.IsPostBack)
            {*/
                //Fonctionne sans la condition 
                PrepareDataSources();
 
                LectureFichier("C213050020.txt");
 
                DXgrid.DataSource = this.Data;
                DXgrid.DataBind();
                DXgrid.KeyFieldName = "Column3";
 
                DXGridExport.DataSource = this.destData;
                DXGridExport.DataBind();
                DXGridExport.KeyFieldName = "Column3";
           // }
        }
 
        public void LectureFichier(string fichier)
        {
 
                // Création d'une instance de StreamReader pour permettre la lecture du fichier 
                StreamReader reader = new StreamReader(Server.MapPath(fichier));
 
 
 
                // Lecture de toutes les lignes et affichage de chacune sur la page 
                while (!reader.EndOfStream)
                {
                    string ligne = reader.ReadLine();
                    ligne = ligne.Replace((char)65533, ' '); //Remplacement du +- par un espace
 
                    var row = this.Data.NewRow();            //Création nouvelle ligne
                    row.ItemArray = ligne.Split(';');   //Définit les valeurs de la row avec la ligne
                    this.Data.Rows.Add(row);            //Ajoute la row au DataTable
                }
 
                // Fermeture du StreamReader (attention très important) 
                reader.Close();
 
 
 
        }
 
        private void PrepareDataSources()
        {
            this.Data = new DataTable();
            this.destData = new DataTable();
 
            for (int i = 0; i < 33; i++)
            {
                this.Data.Columns.Add();
                this.destData.Columns.Add();
            }
 
        }
 
 
        protected void Button1_Click1(object sender, EventArgs e)
        {
 
            //DataRow selection = (DXgrid.GetRow(0) as DataRowView).Row;
 
            if (DXgrid.Selection.Count != 0)
            {
                int nbligne = DXgrid.Selection.Count; //Nb de ligne sélectionnées
                var selectRow = DXgrid.GetSelectedFieldValues("Column3"); //Renvoi la valeur de Column3 dans selectRow
 
 
 
                DataRow selection;
                int ID;
 
                foreach (object index in selectRow) //Récupération des lignes sélectionnées dans le DataTable de la 2ème grille
                {
                    ID = DXgrid.FindVisibleIndexByKeyValue(index);
                    selection = (DXgrid.GetRow(ID) as DataRowView).Row;
 
                    //Ajout à la grille de destination
                    var row = destData.NewRow();            //Création nouvelle ligne
                    row.ItemArray = selection.ItemArray;   //Définit les valeurs de la row avec la ligne
                    destData.Rows.Add(row);            //Ajoute la row au DataTable
 
                    //Data.Rows.Remove(selection);
 
                }
 
                foreach (object index in selectRow)
                {
                    ID = DXgrid.FindVisibleIndexByKeyValue(index);
                    selection = (DXgrid.GetRow(ID) as DataRowView).Row;
 
                    //Suppression des lignes sélectionnées dans le DataTable de la 1ère grille
                    //Si transfert et suppression des lignes dans la même boucle => Décallage des lignes
                    Data.Rows.Remove(selection);
 
                }
 
 
                /*for (int i = 0; i <= nbligne-1; i+=1)
                {
 
 
                    lbl_select.Text += DXgrid.FocusedRowIndex;
 
                    //DataRow selection = (DXgrid.GetRow(DXgrid.FocusedRowIndex)as DataRowView).Row;
                    //int index = (DXgrid.Get
                    //DataRow selection = (DXgrid.GetRow(this.)
 
                    //DataRow selection = (DXgrid.GetRow(i) as DataRowView).Row;
 
                    //Ajout à la grille de destination
                    var row = destData.NewRow();            //Création nouvelle ligne
                    //row.ItemArray = selection.ItemArray;   //Définit les valeurs de la row avec la ligne
                    destData.Rows.Add(row);            //Ajoute la row au DataTable
 
                    //Suppression de la ligne avant le transfert
                    //Data.Rows.Remove(selection);
 
                
                }*/
                //Actualisation de l'affichage
                DXgrid.DataBind();
 
 
                //Liaison de la grille et sa source + MaJ affichage
                DXGridExport.DataSource = destData;
                DXGridExport.DataBind();
            }
 
 
            //Ajout à la grille de destination
            /*var row = destData.NewRow();            //Création nouvelle ligne
            row.ItemArray = selection.ItemArray;   //Définit les valeurs de la row avec la ligne
            destData.Rows.Add(row);            //Ajoute la row au DataTable
 
            //Suppression de la ligne avant le transfert
            Data.Rows.Remove(selection);
 
            //Actualisation de l'affichage
            DXgrid.DataBind();
 
 
            //Liaison de la grille et sa source + MaJ affichage
            DXGridExport.DataSource = destData;
            DXGridExport.DataBind();*/
        }
 
 
    /*    protected void DXgrid_CustomJSProperties(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewClientJSPropertiesEventArgs e)
        {
            e.Properties["cpSelection"] = DXgrid.Selection;
            e.Properties["cpGetRow"] = (DXgrid.GetSelectedFieldValues()).Row;
 
        }*/
    }
}

et là le code du fichier aspx :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="maquette1._Default" %>
 
 
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridLookup" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridView" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
 
 
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js"></script>
 
 
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
       Maquette 1 : Grid
    </h2>
    <p>
 
    </p>
 
 
    <p>
    <dx:ASPxGridView ID="DXgrid" runat="server" 
        CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css" 
        CssPostfix="Office2003Blue"
        >
 
        <ClientSideEvents SelectionChanged="function(s, e) {
            if (e.isSelected) {
                var key = s.GetRowKey(e.visibleIndex);
                alert('Last Key = ' + select);
                
            }
        }" />
 
        <Settings ShowFilterRow="True" ShowGroupPanel="True" ShowFooter="True" />
        <Images SpriteCssFilePath="~/App_Themes/Office2003Blue/{0}/sprite.css">
            <LoadingPanelOnStatusBar Url="~/App_Themes/Office2003Blue/GridView/gvLoadingOnStatusBar.gif">
            </LoadingPanelOnStatusBar>
            <LoadingPanel Url="~/App_Themes/Office2003Blue/GridView/Loading.gif">
            </LoadingPanel>
        </Images>
        <ImagesFilterControl>
            <LoadingPanel Url="~/App_Themes/Office2003Blue/Editors/Loading.gif">
            </LoadingPanel>
        </ImagesFilterControl>
        <Styles CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css" 
            CssPostfix="Office2003Blue">
            <Header ImageSpacing="5px" SortingImageSpacing="5px">
            </Header>
            <LoadingPanel ImageSpacing="10px">
            </LoadingPanel>
        </Styles>
        <StylesEditors>
            <ProgressBar Height="25px">
            </ProgressBar>
        </StylesEditors>
        <SettingsBehavior AllowSelectByRowClick="true" />
    </dx:ASPxGridView>
 
    <dx:ASPxGridView ID="DXGridExport" runat="server" 
        CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css" 
        CssPostfix="Office2003Blue">
 
    </dx:ASPxGridView>
 
        <asp:Label ID="lbl_select" runat="server" Text="Sélection : "></asp:Label>
 
 
 
       <br /> <asp:Button ID="Button1" runat="server" Text="Move" 
            onclick="Button1_Click1" />
 
        <asp:Button ID="Button2" runat="server" Text="Save" />
 
    </p>
 
    <script type="text/javascript">
		$(document).ready(function()
        {
            $('Button1').click(function()
            {
 
 
 
 
 
                if (DXgrid.Selection.Count != 0)
                {
                    int nbligne = DXgrid.Selection.Count; //Nb de ligne sélectionnées
                    var selectRow = DXgrid.GetSelectedFieldValues("Column3"); //Renvoi la valeur de Column3 dans selectRow
 
 
 
                    DataRow selection;
                    int ID;
 
                    foreach (object index in selectRow) //Récupération des lignes sélectionnées dans le DataTable de la 2ème grille
                    {
                        ID = DXgrid.FindVisibleIndexByKeyValue(index);
                        selection = (DXgrid.GetRow(ID) as DataRowView).Row;
 
                        //Ajout à la grille de destination
                        var row = destData.NewRow();            //Création nouvelle ligne
                        row.ItemArray = selection.ItemArray;   //Définit les valeurs de la row avec la ligne
                        destData.Rows.Add(row);            //Ajoute la row au DataTable
 
                        //Data.Rows.Remove(selection);
 
                    }
 
                    foreach (object index in selectRow)
                    {
                        ID = DXgrid.FindVisibleIndexByKeyValue(index);
                        selection = (DXgrid.GetRow(ID) as DataRowView).Row;
 
                        //Suppression des lignes sélectionnées dans le DataTable de la 1ère grille
                        //Si transfert et suppression des lignes dans la même boucle => Décallage des lignes
                        Data.Rows.Remove(selection);
 
                    }
 
 
                    /*for (int i = 0; i <= nbligne-1; i+=1)
                    {
 
 
                        lbl_select.Text += DXgrid.FocusedRowIndex;
 
                        //DataRow selection = (DXgrid.GetRow(DXgrid.FocusedRowIndex)as DataRowView).Row;
                        //int index = (DXgrid.Get
                        //DataRow selection = (DXgrid.GetRow(this.)
 
                        //DataRow selection = (DXgrid.GetRow(i) as DataRowView).Row;
 
                        //Ajout à la grille de destination
                        var row = destData.NewRow();            //Création nouvelle ligne
                        //row.ItemArray = selection.ItemArray;   //Définit les valeurs de la row avec la ligne
                        destData.Rows.Add(row);            //Ajoute la row au DataTable
 
                        //Suppression de la ligne avant le transfert
                        //Data.Rows.Remove(selection);
 
                
                    }*/
                    //Actualisation de l'affichage
                    DXgrid.DataBind();
 
 
                    //Liaison de la grille et sa source + MaJ affichage
                    DXGridExport.DataSource = destData;
                    DXGridExport.DataBind();
                }
 
 
 
 
 
 
 
            })
        }
 
 
        //function is called on changing focused row
        function OnGridFocusedRowChanged() {
            // Query the server for the "EmployeeID" and "Notes" fields from the focused row 
            // The values will be returned to the OnGetRowValues() function     
            grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
        }
        //Value array contains "EmployeeID" and "Notes" field values returned from the server 
        function OnGetRowValues(values) {
            var notes = document.getElementById("detailnotes");
            notes.value = values[1];
            var image = document.getElementById("detailimage");
            image.src = "FocusedRow.aspx?Photo=" + values[0];
        }
 
 
    </script>
 
 
</asp:Content>

Désolé si le code est un peu fouillis, mais vous pouvez l'essayer normalement il marche !

Donc tout doit se passer côté client sans postback ni callback. Pour info la sauvegarde doit se faire au clic sur un bouton "Save" à rajouter plus tard, je suppose que le postback (callback ?) se fera à ce moment-là.

Voila, si je n'ai pas été suffisamment clair n'hésitez pas à me poser les questions nécessaires.

Par avance, merci.

**Moana689** · 17/05/2013, 05h53

Bonjour,

toujours aucune réponse, j'ai du en effrayé plus d'un ou alors je n'ai vraiment pas été clair !

Bon en faisant des recherches, je suis tombé sur cette page du site DevExpress qui explique comment faire ce que je veux à peu de chose près !

Seulement voila, lorsque j'essaye d'appliquer cette méthode, j'obtiens une erreur :"Erreur d'exécution Microsoft JScript: L’objet ne gère pas la propriété ou la méthode « GetSelectedFieldValues »".

Pour info, voici mon code (épuré par rapport au premier message) :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="maquette1._Default" %>
 
 
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridLookup" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridView" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
 
 
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js"></script>
    <script type="text/javascript">
 
        function OnGetSelectedFieldValues(selectedValues) {
            listBox.ClearItems();
            if (selectedValues.length == 0) return;
            for (i = 0; i < selectedValues.length; i++) {
                s = "";
                for (j = 0; j < selectedValues[i].length; j++) {
                    s = s + selectedValues[i][j] + "&nbsp;";
                }
                listBox.AddItem(s);
            }
        }
 
    </script>
 
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
       Maquette 1 : Grid
    </h2>
    <p>
 
    </p>
 
 
    <p>
    <dx:ASPxGridView ID="DXgrid" runat="server" 
        CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css" 
        CssPostfix="Office2003Blue"
        >
 
        <ClientSideEvents SelectionChanged="function(s, e) {
            if (e.isSelected) {
                var key = s.GetRowKey(e.visibleIndex);
                alert('Last Key = ' + key);
                
            }
        }" />
 
        <Settings ShowFilterRow="True" ShowGroupPanel="True" ShowFooter="True" />
        <Images SpriteCssFilePath="~/App_Themes/Office2003Blue/{0}/sprite.css">
            <LoadingPanelOnStatusBar Url="~/App_Themes/Office2003Blue/GridView/gvLoadingOnStatusBar.gif">
            </LoadingPanelOnStatusBar>
            <LoadingPanel Url="~/App_Themes/Office2003Blue/GridView/Loading.gif">
            </LoadingPanel>
        </Images>
        <ImagesFilterControl>
            <LoadingPanel Url="~/App_Themes/Office2003Blue/Editors/Loading.gif">
            </LoadingPanel>
        </ImagesFilterControl>
        <Styles CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css" 
            CssPostfix="Office2003Blue">
            <Header ImageSpacing="5px" SortingImageSpacing="5px">
            </Header>
            <LoadingPanel ImageSpacing="10px">
            </LoadingPanel>
        </Styles>
        <StylesEditors>
            <ProgressBar Height="25px">
            </ProgressBar>
        </StylesEditors>
        <SettingsBehavior AllowSelectByRowClick="true" />
    </dx:ASPxGridView>
 
    <dx:ASPxGridView ID="DXGridExport" runat="server" 
        CssFilePath="~/App_Themes/Office2003Blue/{0}/styles.css" 
        CssPostfix="Office2003Blue">
 
    </dx:ASPxGridView>
 
        <asp:Label ID="lbl_select" runat="server" Text="Sélection : "></asp:Label>
 
 
 
       <br /> <asp:Button ID="Button1" runat="server" Text="Move" 
            onclick="Button1_Click1" />
 
        <asp:Button ID="Button2" runat="server" Text="Save" />
 
        <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Get Values" UseSubmitBehavior="False">
            <ClientSideEvents Click="function(s, e) {
                MainContent_DXgrid_DXMainTable.GetSelectedFieldValues('Column1;Column2;Column3', OnGetSelectedFieldValues);
            }" />
        </dx:ASPxButton>
 
        <br />
        <asp:ListBox ID="ListBox" runat="server"></asp:ListBox>
 
    </p>
 
 
</asp:Content>