I'm using a kendo grid and I want to implement an action bar when a user hover the row. I found the example solution. But I'm looking for showing the tooltips at the end of the row instead of the current hover column. So how can I get the last column that user currently stop at?
Add a :last-child to the filter property:
filter: "tbody td:last-child",
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 500
}, {
field: "ContactTitle",
title: "Contact Title",
width: 300
}, {
field: "CompanyName",
title: "Company Name",
width: 300
}, {
field: "Country",
width: 300
}]
});
});
$("#grid").kendoTooltip({
position: "right",
callout: false,
filter: "tbody td:last-child",
content: function(e) {
return "<button class='k-button' ><span class='k-icon k-i-trash'></span></button> <button class='k-button'><span class='k-icon k-i-email'></span></button> <button class='k-button'><span class='k-icon k-i-warning'></span></button>";
}
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Dojo
Related
const options = {
format: 'Letter',
orientation: 'portrait',
border: '0mm',
header: {
contents: `
<div class="headerPDF">
<img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"/>
<h1>test</h1>
</div>
<style>
.headerPDF{
width: 90%;
height: 60%;
border-bottom: 1px solid black;
}
.headerPDF > img{
width: 100px;
border: 1px solid black;
}
</style>
`,
},
footer: {
height: '0mm',
contents: '',
},
childProcessOptions: { env: { OPENSSL_CONF: '/dev/null' } },
}
This is a code of options and this image, don't render for nothing
and this is the output of the code
i try to put the path in the variable and i try to change many options
var table = new Tabulator("#example-table", {
layout: "fitColumns", //fit columns to width of table
height: "69vh",
responsiveLayout: "collapse", //hide columns that dont fit on the table
cellVertAlign: "middle",
headerSort: false,
columns: [
{
title: "title",
field: "title",
width: 300,
sorter: "string",
formatter(cell, formatterParams) {
return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
}
},
{
title: "body",
field: "body",
sorter: "string",
formatter(cell, formatterParams) {
return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
}
}
]
});
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
success: function (data) {
setTimeout(() => {
table.addData(data, false);
table.restoreRedraw();
}, 200);
}
});
body {
font-family: Arial;
}
h1 {
text-align: center;
margin: 0, auto;
}
.button {
justify-content: center;
margin: 10px;
text-align: center;
}
.button button {
margin: 10px;
padding: 10px;
}
.p-name-inside-table {
width: 100%;
cursor: default !important;
}
.p-name-inside-table img {
cursor: pointer !important;
}
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Tabulator</h1>
<div id="example-table"></div>
How do I wrap the title's row so it doesn't get truncated on Tabulator? You can see the rows are truncated and I can't find it on the docs (http://tabulator.info)
( ----This is for avoiding that "mostly code" error---------------------------------------------------------------------------------)
A little bit of CSS should do the trick:
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
white-space: normal !important;
}
Continuation of what I thought was resolved a couple of months ago:
A new datatable is rendered each time when called in Ajax response [Highcharts]
$(function() {
Highcharts.setOptions({
lang: {
exportData: {
categoryHeader: 'Vulnerability'
}
}
});
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
evsents: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -50,
connectorColor: '#000000',
format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
}
}
},
exporting: {
showTable: true,
tableCaption: false
},
series: [{
type: 'pie',
name: 'Counts',
data: [{
y: 4,
name: 'high',
}, {
y: 8,
name: 'medium',
}, {
y: 2,
name: 'low'
}]
}]
});
});
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
position: absolute;
top: 200px;
left: 20px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Overview:
I have a condition where I need to update highcharts datatable every time when the change event is triggered.
http://jsfiddle.net/BlackLabel/s7m0tvpy/
This was working perfectly before in which clicking the update button changes 4,8,2 to 0,0,1.
But quite recently, this is not working.
Is it something that update function has been modified?
Any help would be appreciated.
This issue was due to
https://github.com/highcharts/highcharts/issues/14320
However, it still works in 8.1.2 version.
<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/export-data.js"></script>
I cannot get my jqGrid to become editable and am stumped as to what is wrong.
I have a function that is called when links are clicked and creates new grids.
Javascript
<script language="javascript">
function getCharacteristics(id)
{
$.getJSON('json/getCharacteristics.php?category_id='+id, function(data) {
$("#grid").jqGrid("GridUnload");
data.length=data.length-1;
$("#grid").jqGrid({ //set your grid id
data: data, //insert data from the data object we created above
datatype: 'local',
width: 500, //specify width; optional
colNames:['character_id','gr_name','en_name','charType'], //define column names
colModel:[
{name:'character_id', index:'character_id', key: true, width:50},
{name:'gr_name', index:'gr_name', width:100, editable:true},
{name:'en_name', index:'en_name', width:100, editable:true},
{name:'charType', index:'charType', width:100, editable:true},
], //define column models
pager: '#pager', //set your pager div id
sortname: 'id', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
editurl: 'clientArray',
cellsubmit:'clientArray',
caption:"jqGrid Example", //title of grid
onSelectRow: function (character_id) {
jQuery("#" + options.table).editRow(character_id, true);
},
});
$("#ed1").click( function() {
$("#grid").jqGrid('editRow',"1");
this.disabled = 'true';
});
});
}
</script>
The output of my JSON data is the following:
JSON data
[{"character_id":"477","en_name":"LENGTH","charType":"input","gr_name":"\u00cc\u00c7\u00ca\u00cf\u00d3","categories_id":"27"},{"character_id":"479","en_name":"COLOR","charType":"input","gr_name":"\u00d7\u00d1\u00d9\u00cc\u00c1","categories_id":"27"},false]
Head Section
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
div.scrollCategories{
height:200px;
overflow-y: scroll;
overflow-x: hidden;
}
td th
{
font-size:10px;
border:1px solid #98bf21;
padding:10px 10px 10px 7px;
}
th
{
font-size:11px;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;
}
tr.alt td
{
color:#000;
background-color:#EAF2D3;
}
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" media="screen" type="text/css" />
<link href="jquery.jqGrid-4.5.2/css/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>
</head>
The selector in the onSelectRow is not correct, replace jQuery("#" + options.table) with jQuery("#grid").
Check the demo please.
Demo on jsFiddle
I'm trying to output this twitter feed to a tag in the right column, but I can't figure out how to make it work. It seems like the code is set up to print wherever it is located. However, I can't place the code in the body of the page.
http://cusli.org/NiagaraIntlMootCourt/NiagaraMoot.aspx
Here is the code. I have a div tag with id "comments" in the html body.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
Try this:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
var myThing = new TWTR.Widget({ //save you reference
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}); //remove from here
</script>
inside your HTML go
<div>
<script>
myThing.render().setUser('NiagaraMoot').start(); //add here
</script>
</div>
Put the script tag inside the div where you want it to render.
eg:
<html>
<body>
<h1>Hello world</h2>
<div>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
</div>
</body>
</html>
<div id="contentRight">
<!-- this is your right coulmn, put TWitter script here -->
<div class="myTwitter">
<script>
new TWTR.Widget({
version: 2,
....
}).render().setUser('NiagaraMoot').start();
</script>
</div>
<!-- end of your insert -->
<div id="dnn_ContentPane_Right">
....
CSS and main Tweeter JS library should stay in <head> ... </head> tag of you page - prefferably ... if you can not place them there ... they can be anywhere in your page but just before the init part (shown above).
I meen this part:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>