none
Comment mettre une image en arriere plan d'un Gridview RRS feed

  • Question

  • Bonjour!

    J'ai besoin de mettre en background de mon Gridview une image; Je souhaiterais que l'image en se repete pas mais que au fure et à mesure que

    les informations de mon Gridview augmente, que l'image s'adapte automatiquement à elle sans que les informations ne deborde la zone de l'image

    J'ai utilisé un Panel pour encadre mon Gridview et dans le panel j'ai fait appel à mon image ce qui a bien marché; mais quand il y a beaucoup d'informations dans mon Gridview, mon Gridview selargi et déborde mon Panel vers le bas. J'ai éssayé avec un DIV mais j'ai pas pu faire apparaître l'image comme dans le panel.

    J'ai aussi des difficultées à appelé une image comme background dans mon fichier CSS.

    Pouviez-vous m'aidé svp?

    Urgence!!!


    sugmados Développeur ASP.Net
    lundi 21 novembre 2011 15:43

Réponses

  • Bonjour,

    La propriété BackImageUrl du contrôle GridView permet de définir une image en background. En revanche, si la taille de l'image spécifiée est inférieure à celle du contrôle GridView, elle s'affiche en mosaïque pour remplir l'arrière-plan. Si l'image est plus grande que le contrôle, l'image est rognée.

    Il est impossible de redimensionner une background-image en CSS. Toutefois, il existe une alternative. Le principe est simple, il suffit d'utiliser l'élément HTML img et de le positionner de tel sorte à ce que l'image et la grid soient superposées. Ensuite, il faut faire un script en jQuery ou javascript qui initialise la hauteur et la largeur de l'image en fonction de la hauteur et la largeur de la grid. J'ai préféré le faire en jQuery mais vous pouvez très bien le refaire en javascript si vous préférez.

    J'ai fais un exemple qui illustre mes propos ci-dessous. J'ai utilisé une XmlDatasource pour tester.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#background").width($("#GridView1").width());
                $("#background").height($("#GridView1").height());
            });
        </script>
        <style>
            .grid
            {
                position: absolute;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <img id="background" src="image.jpg" alt="" class="grid" />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1"
                CssClass="grid">
                <Columns>
                    <asp:BoundField DataField="GroupName" HeaderText="GroupName" SortExpression="GroupName" />
                    <asp:BoundField DataField="User" HeaderText="User" SortExpression="User" />
                </Columns>
            </asp:GridView>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/data.xml"></asp:XmlDataSource>
        </div>
        </form>
    </body>
    </html>
    
    


    Voici l'XML:

    <?xml version="1.0" encoding="utf-8"?>
    <data ItemCount="5">
      <zrow GroupName="Manager" User="User1" />
      <zrow GroupName="Developer" User="User2" />
      <zrow GroupName="Manager" User="User3" />
      <zrow GroupName="CEO" User="User4" />
      <zrow GroupName="CEO" User="User5" />
    </data>
    


    Pour l'image, vous pouvez mettre l'image de votre choix en la référençant dans l'attribut src de l'élément img.

    Bien cordialement,


    aelassas.free.fr
    lundi 21 novembre 2011 23:10
    Auteur de réponse

Toutes les réponses

  • Bonsoir,

     

    La propriété backimageurl="~/images/backimag.jpg" dans votre gridview ne résoud pas le problème?

    et pour css :

     

     

    <style type="text/css">
    
    .myimage {background-image: url("Images/photo.bmp"); background-repeat: no-repeat}
    </style>
    
    <asp:GridView ID="GridView1" runat="server"   Width="800" CssClass="myimage"  ----- >


    le chemin peut différer d'un projet à un autre ça dépend la localisation de votre image 

    ../images ou ./images

     

    Cordialement


    Best Regards...Please mark as answer if my post is helpful

    • Modifié YosrJ lundi 21 novembre 2011 16:03
    lundi 21 novembre 2011 16:00
  • Bonjour,

    La propriété BackImageUrl du contrôle GridView permet de définir une image en background. En revanche, si la taille de l'image spécifiée est inférieure à celle du contrôle GridView, elle s'affiche en mosaïque pour remplir l'arrière-plan. Si l'image est plus grande que le contrôle, l'image est rognée.

    Il est impossible de redimensionner une background-image en CSS. Toutefois, il existe une alternative. Le principe est simple, il suffit d'utiliser l'élément HTML img et de le positionner de tel sorte à ce que l'image et la grid soient superposées. Ensuite, il faut faire un script en jQuery ou javascript qui initialise la hauteur et la largeur de l'image en fonction de la hauteur et la largeur de la grid. J'ai préféré le faire en jQuery mais vous pouvez très bien le refaire en javascript si vous préférez.

    J'ai fais un exemple qui illustre mes propos ci-dessous. J'ai utilisé une XmlDatasource pour tester.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#background").width($("#GridView1").width());
                $("#background").height($("#GridView1").height());
            });
        </script>
        <style>
            .grid
            {
                position: absolute;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <img id="background" src="image.jpg" alt="" class="grid" />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="XmlDataSource1"
                CssClass="grid">
                <Columns>
                    <asp:BoundField DataField="GroupName" HeaderText="GroupName" SortExpression="GroupName" />
                    <asp:BoundField DataField="User" HeaderText="User" SortExpression="User" />
                </Columns>
            </asp:GridView>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/data.xml"></asp:XmlDataSource>
        </div>
        </form>
    </body>
    </html>
    
    


    Voici l'XML:

    <?xml version="1.0" encoding="utf-8"?>
    <data ItemCount="5">
      <zrow GroupName="Manager" User="User1" />
      <zrow GroupName="Developer" User="User2" />
      <zrow GroupName="Manager" User="User3" />
      <zrow GroupName="CEO" User="User4" />
      <zrow GroupName="CEO" User="User5" />
    </data>
    


    Pour l'image, vous pouvez mettre l'image de votre choix en la référençant dans l'attribut src de l'élément img.

    Bien cordialement,


    aelassas.free.fr
    lundi 21 novembre 2011 23:10
    Auteur de réponse
  • Bonjour, Sugmados,

     

    Est-ce que vous avez testé les solutions proposées ? Merci de partager avec nous les résultats, afin que d'autres personnes avec le même problème puissent profiter de cette solution.

     

    Cordialement,

     

    Cipri


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    jeudi 24 novembre 2011 07:16