Listview subitem buttons: HTML, and CSS/JSON

Answered

Hi, I’m tryiung to add a button in a listview subitem’s cell. I understand it’s best to do this with HTML.

Dim lvsiButton As New ListViewItem.ListViewSubItem
lvsiButton.AllowHtml = True
lvsiButton.Text = “<a href=’#’ class=’myButton’>Edit</a>”
li.SubItems.Add(lvsiButton)
Me.lvIssues.Items.Add(li)

I have a multi-line CSS style of myButton from http://www.bestcssbuttongenerator.com … which outputs as CSS.

The CSS Editor doc says the ThemeBuilder’s CSS Editor needs it in JSON format.

Where should I put it in the CSS of the theme? I have it at the top, between “name” and “fonts” presently
Is there any good converter to get the CSS style in the JSON format needed? Editing by hand is tedious
Have I missed anything? I can’t get it to work. Thanks

Original CSS:

.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
	box-shadow:inset 0px 1px 0px 0px #9acc85;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
	background-color:#74ad5a;
	border:1px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
	background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
	background-color:#68a54b;
}
.myButton:active {
	position:relative;
	top:1px;
}

WiseJ JSON conversion attempt

“myButton”: {
“-moz-box-shadow”: “inset 0px 1px 0px 0px #9acc85”,
“-webkit-box-shadow”: “inset 0px 1px 0px 0px #9acc85”,
“box-shadow”: “inset 0px 1px 0px 0px #9acc85”,
“background”: “-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b))”,
“background”: “-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%)”,
“background”: “linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%)”,
“filter”: “progid: DXImageTransform.Microsoft.gradient(startColorstr=’#74ad5a’, endColorstr=’#68a54b’, GradientType=0)”,
“background-color”: “#74ad5a”,
“border”: “1px solid #3b6e22”,
“display”: “inline-block”,
“cursor”: “pointer”,
“color”: “#ffffff”,
“font-family”: “Arial”,
“font-size”: “13px”,
“font-weight”: “bold”,
“padding”: “6px 6px”,
“text-decoration”: “none”
}

“myButton:hover”: {
“background”: “-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a))”,
“background”: “-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%)”,
“background”: “linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%)”,
“filter”: “progid: DXImageTransform.Microsoft.gradient(startColorstr=’#68a54b’, endColorstr=’#74ad5a’, GradientType=0)”,
“background-color”: #68a54b
}
“myButton:active”: {
“position”: “relative”,
“top”: “1px”
}

Andrew Niese asked Apr 1, 2017 - 5:19 am

You must login to post comments

Answers (1)

Best Answer

Hi Andrew,

You don’t have to convert css to json. That is necessary only if you want to add custom css to a wisej theme in relation to a widget. See the material theme, it adds a pseudo element to create the animated underline. Everything in Wisej is ultimately standard html and css so you can simply add a css file to your project and either reference it in the starting page (usually Default.html) or add it as an embedded resource.

When you add it as an embedded resource you also have to uncomment (or add) the WisejResources attribute in AssemblyInfo to let Wisej bundle the css files.

I have attached a sample project that shows both approaches. You can remove one of the two. I also added the role attribute to the button html. You can see in the sample that you can easily detect clicks on inner html elements.