Listview subitem buttons: HTML, and CSS/JSON

Welcome to Wisej Support.
Questions, suggestions and plain old bugs - are all welcome here!
Answered
1
0

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.

  1. Where should I put it in the CSS of the theme? I have it at the top, between “name” and “fonts” presently
  2. Is there any good converter to get the CSS style in the JSON format needed? Editing by hand is tedious
  3. 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”
}

  • You must to post comments
Best Answer
1
0

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.

 

HTH

Best,

Luca

 

  • Andrew Niese
    Brilliant, easier than I thought. Thank you so much!
  • You must to post comments
Showing 1 result
Your Answer
Post as a guest by filling out the fields below or if you already have an account.
Name*
E-mail*
Attachment
File Name Size
There are currently no files uploaded.
Maximum number of files 1, maximum file size 3.9MB.
Supported file formats: zip pdf gif jpg bmp png cs vb theme json