When I add grouping to a grid it works great other then one problem. The row which contains the grouping information is being built with a colspan for the "width" of the grid and this means it sits on top of some of the vertical columns I build into the grid to help add visual separation.
Is there a way to have this row not skip that column so I can keep a nice visual break between sections in my grid?
Update:
I add these vertical "spacers" columns by the following method procedure:
-in the jqGrid setup
beforeProcessing: function (data, status, xhr) {
//add the spaces to the returned data to allow for the blank vertical columns in the grid
for (var x = 0, length = data.rows.length; x < length; x++) {
data.rows[x].cell.splice(6, 0, "");
} //for
}, //beforeProcessing
-colmodel setup matching the cells that will contain the "space"
{ name: "empty1" ,width: 10, sortable: false, hidedlg: true, search: false, resizable: false, fixed: true, classes: 'NoHorizontalGridBorders' },
-css
.NoHorizontalGridBorders { border-bottom-color: transparent !important; background-color: White !important;}
If I understand correctly what you need you have to modify grouping lines inside of loadComplete. For example the following demo, which is modification of the demo from the answer, display the following grid
The code is very simple:
loadComplete: function () {
var $groupingHeaders = $(this).find(">tbody>tr.jqgroup");
$groupingHeaders.find(">td").addClass("noVerticalLines").attr("colspan", "1");
$groupingHeaders.append("<td class='noHorizLines noVerticalLines'> </td>" +
"<td colspan='3' class='noVerticalLines'> </td>" +
"<td class='noHorizLines noVerticalLines'> </td>" +
"<td colspan='2'> </td>");
}
where CSS on the classes noHorizLines and noVerticalLines defined as
.ui-jqgrid tr.ui-row-ltr td.noVerticalLines { border-right-color: transparent; }
.ui-jqgrid tr.ui-row-ltr td.noHorizLines { border-bottom-color: transparent; }
In the same way you can modify the above code to make some other effects (horizontal or vertical lines on the places where you wan to have it).
Related
I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?
From the code below I only want the tooltip to display for data4.
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data2': 'x2',
'data3': 'x3',
'data4': 'x4'
},
columns: [
x1data,
y1data,
x2data,
y2data,
x3data,
y3data,
x4data,
y4data,
],
types: {
data1: 'area',
},
},
legend: {
show: false
}
});
There is the tooltip option for show:false but that disables them all.
Can it display for just 1 dataset?
The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.
tooltip: {
grouped: false,
position: (data, width, height, element) => {
if (data[0].id === 'data2'){ // <- change this value to suit your needs
return { top: 40, left: 0 };
}
return { top: -1000, left: 0 };
}
}
EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.
I'm using jqGrid v5.0.2 to implement custom formatter. I'm having summaries enabled in the columns. I want to display the text in Red, if the column value is greater than 40. I have implemented Oleg's solution to my problem. The formatting works, but it is getting applied to the summary row also. For Example :
Resource Week1
-------- -----
Mr.X 45
-Task1 25
-Task2 20
1) In the above example I only want the cells with values 20 and 25 to be red (If they are individually above 40), but the grouped cell 45 also is displayed in red.I want the grouped cell to be red only if it is above 80(40+40). Any suggestions on how to achieve my desired result ?
My Code :
{
name: "FirstWeek",
editable: true,
sortable: false,
formatter: function (cellvalue) {
var color;
var val = Number(cellvalue);
if (val > 40) {
color = 'red';
}
var cellHtml = "<span style='color:" + color + "' originalValue='" +
val + "'>" + val + "</span>";
return cellHtml;
},
unformatter: function(cellValue, options, cellObject) {
return $(cellObject.html()).attr("originalValue");
},
summaryTpl: "<b>{0}</b>",
summaryType: "sum",
editrules: { number: true, minValue: 0, maxValue: 40 }
}
2)While inline editing the custom formatted cell, I'm getting <span class="cellWithoutBackground" style="color:undefined;">25</span> in the cell(UI) . I have used the unformatter function also.That doesn't seem to work. Help appreciated.
I recommend you to remove formatter and unformatter callbacks and to use cellattr callback instead in the column. It could be defined like:
cellattr: function(rowId, val, rawObject) {
if (Number(val) > 40) {
return " style='color: red'";
}
}
or something like
cellattr: function(rowId, val, rawObject) {
if (Number(val) > 40) {
return " class='my-text-color'";
}
}
where you set class my-text-color on specific cells (<td> elements) of the column. If you use class attribute then you should define additional CSS rule like
.my-text-color {
color: red;
}
Is there a way to auto wrap text on colHeaders when given colWidths? It doesn't seem to work and even manually reducing the size of the columns is prohibited.
Relevant options:
hot = new Handsontable(container, {
data: items,
startRows: 1,
minSpareRows: 1,
colHeaders: ['aaaaaaaa', 'bbbbbbb', 'cccccccccccc'],
colWidths: [50,50,50]
manualColumnResize: true,
autoWrapRow: true
}
Maybe try add some CSS into your headers:
.handsontable table thead th {
white-space: pre-line;
max-width: /* enter here your max header width */
}
Try the following CSS:
.handsontable th {
white-space: normal!important;
}
Demo and source: http://jsfiddle.net/cyancscoutrfp/hqLbg3rt/
I have a jqgrid with multiselect true and I want to set some of rows.(I know the row ids.) How can I do that?
I mean opposite of
$("#myTable").jqGrid('getGridParam', 'selarrrow');
as like:
$("#myTable").jqGrid('setGridParam', 'selarrrow', rowArray);
You have to loop through the rowArray array and call setSelection method for every rowid from the rowArray:
var i, count, $grid = $("#myTable");
for (i = 0, count = rowArray.length; i < count; i += 1) {
$grid.jqGrid('setSelection', rowArray[i], false);
}
$.each(rowsToSelect, function(_, rowId) {
$grid.setSelection(rowId, false);
});
No much difference. Just seemed neater :)
(Pretty amazing that even now, in 2014, jqGrid doesn't persist checkboxes when paging..)
Here's the code I needed to use, with jqGrid 4.4.5, to get the checkboxes to set, after moving to a new page:
var idsOfSelectedRows = []; // list of RowIDs for rows which have been ticked
$("#tblContracts").jqGrid({
...
colModel: [
{ name: 'AddContract', width: 50, align: "center", editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false } },
{ name: "ContractName", search: true, width: 80, align: "center" }
],
loadComplete: function () {
for (i = 0; i < idsOfSelectedRows.length; i++) {
$(this).setCell(idsOfSelectedRows[i], 'AddContract', true);
}
},
During development, I put an "alert" in that "for" loop. I found that using "setSelection" simply stepped through my list of RowIDs, selected the row (so it would become highlighted), then moved on to the next, selecting that one instead.
It didn't ever tick any of the checkboxes.
Notice that my "setCell" function includes the name of the jqGrid column where I have a checkbox.
If you cut'n'paste this code, make sure you change this line to reflect the name of your jqGrid checkbox column.
Last few days i was trying to get jqgrid with autocompletion fields to work, now i can get it to work with local data, but as soon as i trying to get data from my controller data didnt get parsed.
View code:
{ name: 'EanNummer', index: 'EanNummer', width: 65, sortable: true, editable: true, edittype: 'text', editoptions: {
dataInit:
function (elem) {
$(elem).autocomplete({ minLength: 0, source: '#Url.Action("GetBrands")' })
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.Id + ", " + item.Name + "</a>")
.appendTo(ul);
};
}
}
},
if instead of source: url i use source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] for example code works fine and shows up, so something must be wrong with my controller side code
Controller Code:
public JsonResult GetBrands()
{
string vendorId = "";
var username = "";
var name = System.Web.HttpContext.Current.User.Identity.Name;
var charArray = name.Split("\\".ToCharArray());
username = charArray.Last();
vendorId = service.GetVendorIdByUsername(username);
List<String> list = new List<String>();
var brands = service.getBrandsByVendor(vendorId);
var s= (from brand in brands
select new
{
Id = brand.BrandId,
Name = brand.BrandName
}).ToList();
return Json(s);
}
If you use item.Id and item.Name on the client side you should return not the List<String>. Instead of that you should returns the list of new {Id=brand.BrandId, Name=brand.BrandName}. You should just use LINQ instead of foreach:
return Json ((from brand in brands
select new {
Id = brand.BrandId,
Name = brand.BrandName
}).ToList());
UPDATED: I modified for you the demo from the answer and included jQuery UI Autocomplete support in two forms. The standard rendering:
and the custom rendering:
The Autocomplete functionality works in Advanced Searching dialog in the same way like in the Searching Toolbar:
You can download the demo from here.
The server code of the standard autocomplete is
public JsonResult GetTitleAutocomplete (string term) {
var context = new HaackOverflowEntities();
return Json ((from item in context.Questions
where item.Title.Contains (term)
select item.Title).ToList(),
JsonRequestBehavior.AllowGet);
}
It returns array of strings in JSON format. The list of Titles are filtered by term argument which will be initialized to the string typed in the input field.
The server code of the custom autocomplete is
public JsonResult GetIds (string term) {
var context = new HaackOverflowEntities();
return Json ((from item in context.Questions
where SqlFunctions.StringConvert((decimal ?)item.Id).Contains(term)
select new {
value = item.Id,
//votes = item.Votes,
title = item.Title
}).ToList (),
JsonRequestBehavior.AllowGet);
}
It uses SqlFunctions.StringConvert to be able to use LIKE in comparing of the integers. Moreover it returns the list of objects having value the title property. If you would return objects having value the lable properties the values from the lable properties will be displayed in the Autocomplete context menu and the corresponding value property will be inserted in the input field. We use custom title property instead.
The code of the client side is
searchoptions: {
dataInit: function (elem) {
$(elem).autocomplete({ source: '<%= Url.Action("GetTitleAutocomplete") %>' });
}
}
for the standard rendering and
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: function (elem) {
// it demonstrates custom item rendering
$(elem).autocomplete({ source: '<%= Url.Action("GetIds") %>' })
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><span style='display:inline-block;width:60px;'><b>" +
item.value + "</b></span>" + item.title + "</a>")
.appendTo(ul);
};
}
}
for the custom rendering.
Additionally I use some CSS settings:
.ui-autocomplete {
/* for IE6 which not support max-height it can be width: 350px; */
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/*.ui-autocomplete.ui-menu { opacity: 0.9; }*/
.ui-autocomplete.ui-menu .ui-menu-item { font-size: 0.75em; }
.ui-autocomplete.ui-menu a.ui-state-hover { border-color: Tomato }
.ui-resizable-handle {
z-index: inherit !important;
}
You can uncomment .ui-autocomplete.ui-menu { opacity: 0.9; } setting if you want to have some small
opacity effect in the autocomplete context menu.