le format ASP.NET GridView change en mode d'édition

Question

Cette mon GridView lorsque la page des charges:

Maintenant, c'est à quoi il ressemble lorsque l'utilisateur clique sur le bouton d'édition:

Le Le format de GridView semble nettement mieux en mode édition, alors j'essaye d'éditer son style pour qu'il ressemble toujours à ça. J'ai essayé d'éditer la largeur et la hauteur dans rowstyle, mais les paramètres sont seulement appliqués s'ils feront les cellules plus grandes, et je veux évidemment qu'elles soient plus petites. Je n'ai pas pu trouver ou écrire une méthode pour redimensionner les cellules par programme non plus.

Voici le code pour le GridView et son SqlDataSource (j'omis les paramètres de mise à jour pour ce poste):

<div style="overflow:scroll; width:1500px"> 
      <asp:GridView id="maintenanceGridView" runat="server" 
       DataSourceID="maintenanceDataSource" 
       AllowSorting="true" AllowPaging="true" PageSize="50" 
       OnRowEditing="maintenanceGridView_RowEditing" 
       OnRowUpdating="maintenanceGridView_RowUpdating" 
       OnRowCancelingEdit="maintenanceGridView_RowCancelingEdit" 
       OnRowDataBound="maintenanceGridView_RowDataBound" 
       AutoGenerateEditButton="true"> 
       <rowstyle backcolor="LightCyan"/> 
       <alternatingrowstyle backcolor="PaleTurquoise"/> 
       <EmptyDataTemplate> 
        <h3>No Records Found!!</h3> 
       </EmptyDataTemplate> 
      </asp:GridView> 
     </div> 
     <asp:SqlDataSource id="maintenanceDataSource" 
      DataSourceMode="DataSet" 
      SelectCommand="AMT_GetMaintenanceView" 
      UpdateCommand="AMT_UpdateMaintenance" 
      UpdateCommandType="StoredProcedure" 
      ConnectionString="<%$ ConnectionStrings:iandcInternDBConn %>" 
      runat="server"> 
      <UpdateParameters> 
      </UpdateParameters> 
     </asp:SqlDataSource> 
</div> 

Je ne sais pas ce qui est à l'origine du format du GridView pour changer. J'ai essayé de chercher son CSS par défaut mais je n'ai rien trouvé, et les outils de développement d'Internet Explorer me disent que le CSS est le même en mode d'édition qu'en mode d'affichage.

Toute aide ou autre information est très appréciée. Merci!

Answer 1

cellules Définir largeur programme dans l'événement RowDataBound comme:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    e.Row.Cells[0].Width = Unit.Pixel(100); 
    e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Left; 
} 

Answer 2

j'ai pu trouver une petite solution temporaire en forçant toujours le GridView en mode d'édition sur la première ligne; même si les utilisateurs essaient d'annuler l'édition.

Je le fais en ajoutant du code aux événements Page_Load et RowDataBound

protected void Page_Load(object sender, EventArgs e) 
{ 
     // Force the gridview into edit mode always becuase its formatting looks a million times better 
     GridView1.EditIndex = 0; 
} 

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
     // Default to edit mode 
     if (GridView1.EditIndex == -1) 
      GridView1.EditIndex = 0; 
} 

Answer 3

Essayez d'ajouter quelque chose comme ceci dans votre CSS:

.GridViewEditRow input[type=text] { /*for text boxes use td for every cell*/ 
     width: 50px; 
    }