Как сделать image background для каждой записи GridVIew?

@californis · Регистрация: 28.09.2008

Студворк — интернет-сервис помощи студентам

@bazile · 26.07.2007, 15:20

Проще всего средствами CSS. Указываем у GridView атрибут CssClass="grid1", а таблице стилей добавляем правило с нужным фоном
table.grid1 td {background:url(img/bg.gif)}

@californis · 26.07.2007, 18:44 **[ТС]**

это не будет работать. ты перепутал с background для всего gridview а не для ячеек. иными словами, если в качестве бэк фона я использую картинку с изображением прямоугольника, то по твоему методу 1 прямоугольник будет на весь грид. а мне надо чтобы прямоугольник этот был на каждую строку грида.

@bazile · 26.07.2007, 18:52

В моем примере фон устанавливается для каждой ячейки, а не для всей таблицы. Если нужно сделать фон для строки, то замени в примере td на tr.

@californis · 26.07.2007, 21:23 **[ТС]**

либо мы не допоняли друг друга либо что-то не так с примером.
я сделал следующую запись в стилях:
table.grid1 tr {background:url(/images/GridBg.jpg)}

а у Грида, в св-ве cssclass выставил grid1
никаких изменений, будто я ничего и не далал...

@bazile · 26.07.2007, 21:37

Пример 100% рабочий. Проверил в ie6/7, ff 1.5, opera 9. В первую очередь проверь что у тебя в корне сайта (именно сайта, а не приложения!) есть папка images c файлом GridBg.jpg. Проверь нет ли опечаток в исходнике. Посмотри html код который получает браузер. Скорее всего у тебя проблема именно с путями.

@californis · 27.07.2007, 00:19 **[ТС]**

все равно не работает.
там точно надо background а не background-image ? хотя с ним также не работает...
пути к картинкам правильные.
стили подключены: <link rel="stylesheet" href="StyleSheet.css
что в html source смотреть я не понял...
кстати, я не совсем понял почему ты написал table.grid1 ... ?
table - это чье-то id или нет?

обычно яделал бы примерно стили так:
.gridViewStyle
{
background-image:url(/images/GridBg.jpg);
}
а вот с твоей записью: table.grid1 tr {background:url(/images/GridBg.jpg)}
я раньше не сталкивался...

@bazile · 27.07.2007, 16:20

Правило table.grid1 tr {} означает следущее: применить указанный стиль к элементу tr внутри элемента table, c именем класса grid1. Раз ты этого не знаешь, то очень советую прочитать описание http://loc.stack.ru/projects/CSS2/selector.html селекторов доступных в http://www.w3.org/TR/CSS2/ CSS2.
Для установки фонового изображения можно использовать как background так и background-image. Дело в том, что многие правила в CSS2 допускают сокращенные записи одинаковый эффект может быть получен разными способами. Все это тоже можно найти в рекомендации CSS.
Осталось понять почему не работает. В исходник html я советовал заглянуть, чтобы убедиться что GridView выводится в виде таблицы (<table>) с атрибутом class="grid1". Кроиме этого надо проверить что значение атрибута class и ссылка на него в CSS файле написаны в одном регистре. Что еще посоветовать даже не знаю.

@californis · 27.07.2007, 18:42 **[ТС]**

html source показывает что таблица выводится с классом gird1.
регистр идентичен...
Базиль, а нельзя ли выложить твой пример в виде зипа куда нибудь чтобы можно было скачать и посмотреть?

@bazile · 27.07.2007, 18:56

Лови пример. Надеюсь он тебе поможет. Перед запуском подправь строку соединения в web.config и указажи другой SelectCommand у SqlDataSource1 - я тестировал на своей внутренней базе.

@californis · 28.07.2007, 00:51 **[ТС]**

Базиль, спасибо, однако это мало решило проблему, т.к.:
- хоть написано tr а все равно картинку засовывает в каждую ячейку
- какие-то непонятные проблемы с путями стелей:
если пишу так:
<link rel="stylesheet" href="Styles/StyleSheet.css" type="text/css" >
не работает.
если же либо прописать без путей (вынести стили в html) либо бросить их в корневой каталог сайта (соотв. путь будет href="StyleSheet.css") тогда работает...
посмотрел свои другие проекты- там пути стоят также однако там стили из отдельного каталога нормально подключаются...

@bazile · 28.07.2007, 16:43

californis (27.07.2007)
хоть написано tr а все равно картинку засовывает в каждую ячейку

Используй свойство background-repeat.

@californis · 29.07.2007, 00:10 **[ТС]**

заменил
background:url(/images/GridBg.jpg);

на
background-repeat:url(/images/GridBg.jpg);

теперь вообще ничего не выводит в качестве фона...

@bazile · 30.07.2007, 15:57

Проверка показала что свойство background-repeat (которое ты неправильно используешь) здесь не работает. Похоже что у элемента tr не может быть фона.
Насколько я понял тебе надо чтобы фон был только у первой ячейки. У меня это получилось сделать. В своем примере: убрал у GridView атрибут CssClass, удалил CSS правило для grid1 и вместо него написал правило td.bgCell {background:url(/images/GridBg.jpg); background-repeat:no-repeat}. Затем добавил у GridView обработчик события RowCreated со следующим кодом:
if (e.Row.RowType==DataControlRowType.DataR ow)
{
e.Row.Cells[0].CssClass = "bgCell";
}
То есть каждой первой ячейке назначаем класс bgCell и таким образом фон будет только у нее.
Перед этим еще пробовал следующий вариант, более красивый с точки зрения CSS, но он не работает даже в IE7, при этом в FireFox правило сработало как ожидалось:
table.grid1 tr:first-child {background-image:url(/images/GridBg.jpg); background-repeat:no-repeat}

@bazile · 30.07.2007, 16:04

Вдогонку. Правило с first-child выглядит логичнее, но может иметь побочный ээфект в виде назначения фона и заголовкам (th). Непонятно как можно ограничить действие правила только элементом td.

@californis · 01.08.2007, 07:23 **[ТС]**

нет, ты не правильно меня понял. мне надо сделать так, чтобы каждая строка грида имела свой фон. фон представляет из себя упрощенно некую графику в виде прямоугольника. грид сам по себе рисует эти прямоугольники, но они не красивые, а я пытаюсь сделать это с помощью графики.
уточнение по поводу грида: грид имеет несколько столбцов и строк, но картинка бэк фона должна быть 1 на каждую строку. т.е. фон как бы не должен замечать сколько столбцов- 1 или несколько и визуально для фона у грида как бы 1 столбец, но по факту их несколько

либо можно этот фон нарезать на квадратики и определить каждый из них для своего столбца грида, но как это сделать? ведь у стиля в примере с td это сделать нельзя, т.к. фон у первого квадратика будет отличным от второго и у второго от последнего.
т.е. если упрощено, то пусть есть 5 столбцов, и фон на каждую строку будет грубо говоря таким:
1 квадратик имеет красный цвет с неким рисунком, 2-4 серый цвет, а 5й синий.

@bazile · 06.08.2007, 16:59

Вопрос ясен. Проблема в том, что у TR, насколько я понял, фона быть не может. Точнее он используется (в терминах CSS - наследуется) элементами TD. Значит выход, только в указании частей этой картинки у каждой ячейки стиля background-image с нужной картинкой. Саму картинку как видно придется генерировать на лету.

@californis · 11.08.2007, 23:42 **[ТС]**

bazile (06.08.2007)
Вопрос ясен. Проблема в том, что у TR, насколько я понял, фона быть не может. Точнее он используется (в терминах CSS - наследуется) элементами TD. Значит выход, только в указании частей этой картинки у каждой ячейки стиля background-image с нужной картинкой. Саму картинку как видно придется генерировать на лету.

довольно странно что с CSS это нельзя(?) сделать т.к. я могу у TR, в обычной стат таблице задать сво-во для имидж бэкграунда и все будет ок. т.е. данную задачу можно было бы решить путем использования не грида, а построения динамической таблицы с заданием нужных св-в, но мне этот вариант не нравится потому как это займет и время и вообще может быть pain in the ***.
а вот твой ответ про генерирование на лету я не понял...можно поподробнее что ты имел в виду?

@bazile · 13.08.2007, 23:25

californis (11.08.2007)
довольно странно что с CSS это нельзя(?) сделать т.к. я могу у TR, в обычной стат таблице задать сво-во для имидж бэкграунда и все будет ок. т.е. данную задачу можно было бы решить путем использования не грида, а построения динамической таблицы с заданием нужных св-в, но мне этот вариант не нравится потому как это займет и время и вообще может быть pain in the ***.

Но ведь у TR нет свойства background так что CSS здесь никак не проигрывает. Кроме того не понимаю, в чем сложность генерации грида с нужными тебе свойствами. По-моему ты преувеличиваешь сложность задачи.

californis (11.08.2007)
а вот твой ответ про генерирование на лету я не понял...можно поподробнее что ты имел в виду?

Насколько я понял тебе нужно чтобы у каждой ячейки в каждой строке таблицы был свой собственный фон в виде неодородной картинки. Так как картинка заранее неизвестна, то значит надо будет делать ее на лету. Обычно для этого создается http handler (.ashx файл) который выдает не html, а картинку.

@californis · 17.08.2007, 20:57 **[ТС]**

использовать динамическую таблицу вместо грида я не хочу:
1. пришлось бы писать всю ту функциональность что уже есть в гриде, а мне это не хочется
2. это не продуктивно. если грид позволяет сделать то что мне нужно, то не стоит тратить время на изобретение велосипеда.

Насколько я понял тебе нужно чтобы у каждой ячейки в каждой строке таблицы был свой собственный фон в виде неодородной картинки.

необязательно. еще раз:
есть таблица(грид) на 5 столбцов и 10 строк.
есть картинка которую я бы хотел использовать как фон для КАЖДОЙ СТРОКИ.
если есть возможность не резать картинку- fine. otherwise we can divide the image into some seperate images.
меня интересует только результат, поэтому будет ли это сделано с цельной картинкой или разрезаной - без разницы.

Так как картинка заранее неизвестна, то значит надо будет делать ее на лету. Обычно для этого создается http handler (.ashx файл) который выдает не html, а картинку.

картинка отлично известна.
скажем если ты ее не режешь, то пусть она называется bg.jpg
если же ты ее нарезал, то соответственно будет: bg1.jpg, bg2.jpg, bg3.jpg, bg4.jpg, bg5.jpg
все что я хочу с ней сделать- засунуть в каждую строку грида-таблицы.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298

	Как сделать image background для каждой записи GridVIew? 26.07.2007, 00:49. Показов 12232. Ответов 20 Метки нет (Все метки) Как сделать image background для каждой записи GridVIew? 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	26.07.2007, 15:20
	Проще всего средствами CSS. Указываем у GridView атрибут CssClass="grid1", а таблице стилей добавляем правило с нужным фоном table.grid1 td {background:url(img/bg.gif)} 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	26.07.2007, 18:44 [ТС]
	это не будет работать. ты перепутал с background для всего gridview а не для ячеек. иными словами, если в качестве бэк фона я использую картинку с изображением прямоугольника, то по твоему методу 1 прямоугольник будет на весь грид. а мне надо чтобы прямоугольник этот был на каждую строку грида. 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	26.07.2007, 18:52
	В моем примере фон устанавливается для каждой ячейки, а не для всей таблицы. Если нужно сделать фон для строки, то замени в примере td на tr. 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	26.07.2007, 21:23 [ТС]
	либо мы не допоняли друг друга либо что-то не так с примером. я сделал следующую запись в стилях: table.grid1 tr {background:url(/images/GridBg.jpg)} а у Грида, в св-ве cssclass выставил grid1 никаких изменений, будто я ничего и не далал... 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	26.07.2007, 21:37
	Пример 100% рабочий. Проверил в ie6/7, ff 1.5, opera 9. В первую очередь проверь что у тебя в корне сайта (именно сайта, а не приложения!) есть папка images c файлом GridBg.jpg. Проверь нет ли опечаток в исходнике. Посмотри html код который получает браузер. Скорее всего у тебя проблема именно с путями. 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	27.07.2007, 00:19 [ТС]
	все равно не работает. там точно надо background а не background-image ? хотя с ним также не работает... пути к картинкам правильные. стили подключены: <link rel="stylesheet" href="StyleSheet.css что в html source смотреть я не понял... кстати, я не совсем понял почему ты написал table.grid1 ... ? table - это чье-то id или нет? обычно яделал бы примерно стили так: .gridViewStyle { background-image:url(/images/GridBg.jpg); } а вот с твоей записью: table.grid1 tr {background:url(/images/GridBg.jpg)} я раньше не сталкивался... 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	27.07.2007, 16:20
	Правило table.grid1 tr {} означает следущее: применить указанный стиль к элементу tr внутри элемента table, c именем класса grid1. Раз ты этого не знаешь, то очень советую прочитать описание http://loc.stack.ru/projects/CSS2/selector.html селекторов доступных в http://www.w3.org/TR/CSS2/ CSS2. Для установки фонового изображения можно использовать как background так и background-image. Дело в том, что многие правила в CSS2 допускают сокращенные записи одинаковый эффект может быть получен разными способами. Все это тоже можно найти в рекомендации CSS. Осталось понять почему не работает. В исходник html я советовал заглянуть, чтобы убедиться что GridView выводится в виде таблицы (<table>) с атрибутом class="grid1". Кроиме этого надо проверить что значение атрибута class и ссылка на него в CSS файле написаны в одном регистре. Что еще посоветовать даже не знаю. 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	27.07.2007, 18:42 [ТС]
	html source показывает что таблица выводится с классом gird1. регистр идентичен... Базиль, а нельзя ли выложить твой пример в виде зипа куда нибудь чтобы можно было скачать и посмотреть? 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	27.07.2007, 18:56
	Лови пример. Надеюсь он тебе поможет. Перед запуском подправь строку соединения в web.config и указажи другой SelectCommand у SqlDataSource1 - я тестировал на своей внутренней базе. 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	28.07.2007, 00:51 [ТС]
	Базиль, спасибо, однако это мало решило проблему, т.к.: - хоть написано tr а все равно картинку засовывает в каждую ячейку - какие-то непонятные проблемы с путями стелей: если пишу так: <link rel="stylesheet" href="Styles/StyleSheet.css" type="text/css" > не работает. если же либо прописать без путей (вынести стили в html) либо бросить их в корневой каталог сайта (соотв. путь будет href="StyleSheet.css") тогда работает... посмотрел свои другие проекты- там пути стоят также однако там стили из отдельного каталога нормально подключаются... 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	29.07.2007, 00:10 [ТС]
	заменил background:url(/images/GridBg.jpg); на background-repeat:url(/images/GridBg.jpg); теперь вообще ничего не выводит в качестве фона... 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	30.07.2007, 15:57
	Проверка показала что свойство background-repeat (которое ты неправильно используешь) здесь не работает. Похоже что у элемента tr не может быть фона. Насколько я понял тебе надо чтобы фон был только у первой ячейки. У меня это получилось сделать. В своем примере: убрал у GridView атрибут CssClass, удалил CSS правило для grid1 и вместо него написал правило td.bgCell {background:url(/images/GridBg.jpg); background-repeat:no-repeat}. Затем добавил у GridView обработчик события RowCreated со следующим кодом: if (e.Row.RowType==DataControlRowType.DataR ow) { e.Row.Cells[0].CssClass = "bgCell"; } То есть каждой первой ячейке назначаем класс bgCell и таким образом фон будет только у нее. Перед этим еще пробовал следующий вариант, более красивый с точки зрения CSS, но он не работает даже в IE7, при этом в FireFox правило сработало как ожидалось: table.grid1 tr:first-child {background-image:url(/images/GridBg.jpg); background-repeat:no-repeat} 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	30.07.2007, 16:04
	Вдогонку. Правило с first-child выглядит логичнее, но может иметь побочный ээфект в виде назначения фона и заголовкам (th). Непонятно как можно ограничить действие правила только элементом td. 0

@californis 0 / 0 / 1 Регистрация: 28.09.2008 Сообщений: 298
	01.08.2007, 07:23 [ТС]
	нет, ты не правильно меня понял. мне надо сделать так, чтобы каждая строка грида имела свой фон. фон представляет из себя упрощенно некую графику в виде прямоугольника. грид сам по себе рисует эти прямоугольники, но они не красивые, а я пытаюсь сделать это с помощью графики. уточнение по поводу грида: грид имеет несколько столбцов и строк, но картинка бэк фона должна быть 1 на каждую строку. т.е. фон как бы не должен замечать сколько столбцов- 1 или несколько и визуально для фона у грида как бы 1 столбец, но по факту их несколько либо можно этот фон нарезать на квадратики и определить каждый из них для своего столбца грида, но как это сделать? ведь у стиля в примере с td это сделать нельзя, т.к. фон у первого квадратика будет отличным от второго и у второго от последнего. т.е. если упрощено, то пусть есть 5 столбцов, и фон на каждую строку будет грубо говоря таким: 1 квадратик имеет красный цвет с неким рисунком, 2-4 серый цвет, а 5й синий. 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	06.08.2007, 16:59
	Вопрос ясен. Проблема в том, что у TR, насколько я понял, фона быть не может. Точнее он используется (в терминах CSS - наследуется) элементами TD. Значит выход, только в указании частей этой картинки у каждой ячейки стиля background-image с нужной картинкой. Саму картинку как видно придется генерировать на лету. 0