I want to show the data in the tooltip when a columns has long sentences because of width constrints.
For this I am using a renderer function as follows
{
header: xppo.st('SDE_INCIDENT_DESCRIPTION1'),
width: 175,
sortable: true,
groupable: false,
dataIndex: 'IncidentDescription',
renderer: function(value, metaData, record, rowIndex, columnIndex, ds) {
return '<div ext:qtip="' + value + '">' + value + '</div>';
}
},
But when the data has no break space and when the word is really long the text will extend beyond the text area.
How do I show the entire data within the div specified without overflowing from it.
Ext.apply(Ext.QuickTips.getQuickTip(), {
maxWidth: 700,
minWidth: 100,
showDelay: 50,
trackMouse: true
});
Related
I need to show an image in cells based on the event feed. If any data available for particular date, then an image will be displayed in center of cell. If not it should display default image in center of cell. I tried with following code. But I was successful to place image but not center/where the event data is replaced. And also I the "cross" image should be visible only for validRange
Required format is shown in image 3. Please help. Thanks.
img = "images/cross.png";
$('#calendar').fullCalendar({
contentHeight: 380,
weekNumbers: false,
fixedWeekCount: false,
eventLimit: true, // allow "more" link when too many events
events: feeder,
businessHours: true,
aspectRatio: 1,
defaultView: 'month',
showNonCurrentDates: false,
validRange: {
start: '2018-08-01',
end: moment()
},
eventRender: function (event, eventElement, view) {
if (event.imageurl) {
eventElement.find("div.fc-content").html("<img src='" + event.imageurl + "' width='25' height='28'>");
} else {
eventElement.html("<img src='" + img + "' width='25' height='28'>");
}
},
dayRender: function (date, cell) {
cell.html("<img src='" + img + "' width='15' height='20'>");
}});
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value
I was able to center the text within the header, using this:
[colid="startstop"].gridxCell{
text-align: center;
}
I thought this would center all row cells belonging to the startstop column, but it doesn't. My startstop column contains a single button in each row. I have two other columns just like this. How do I center the buttons in the three columns of my choosing?
Here is a peice of my structure:
{ id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<button data-dojo-type="dijit.form.Button" ',
'data-dojo-attach-point="btn" ',
'class="startStopButton" ',
'data-dojo-props= ',
'"onClick: function(){',
'alert(\'Start/Stop\');',
'}"><img src="images/1413390026_control.png" /></button>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set('label', data);
}
},
Here is my css class - it only does the size of the button for now as I am having other troubles getting it to work by itself - but that's another question.
.startStopButton .dijitButtonNode {
width: 16px;
height: 16px;
text-align: center;
}
If you want to include widgets in a cell, it is recommended to use the widgetsInCell flag, along with the onCellWidgetCreated and setCellValue methods (as documented here).
Here is how I use a cell with a horizontal slider:
{
id: 'scoreColId',
field: 'score',
name: 'Score',
width: '15%',
// flag there are widgets in cell so that they are destroyed when grid is destroyed
widgetsInCell: true,
// method to create the widget (no cell-specific data yet)
onCellWidgetCreated: function(cellWidget, column) {
// outer div to center align the widget inside placed in the cell
var outerDiv = domConstruct.create('div', {
style: {
'text-align': 'center'
}
}, cellWidget.domNode);
// create the widget and place it in the div (already inside the cell)
cellWidget.slider = new HorizontalSlider({
minumum: 0,
maximum: 10,
});
cellWidget.slider.placeAt(outerDiv);
},
// set each cell with it's specific data
setCellValue: function(gridData, storeData, cellWidget) {
var score = gridData.docScore;
cellWidget.slider.set('value', score);
}
},
I am trying to enable horizontal scrolling for my kendo grid. So far I've heard if you have added width to the columns definitions. But what do you do if data is dynamic?
I've tried a couple of things. This code can help you understand that.
var kgrid = $("#grid").kendoGrid({
height: 155,
pageable: true,
dataSource:ds,
dataBound:function(e){
var m = kgrid.data('kendoGrid');
console.log('dataBound: ', m.columns);
},
dataBinding:function(e){
var m = kgrid.data('kendoGrid');
var obj = ds.view()[0];
console.log('dataBinding columns before: ', m.columns);
//for(x in obj){
// if(x[0] == '_')
// continue;
// m.columns.push({field: x, width:'200px'});
//}
console.log('dataBinding columns after: ', m.columns);
}//,
//columns:[
// {field:'col1', width: '200px'},
//{field:'col2', width: '200px'},
//{field:'col3', width: '200px'},
//{field:'col4', width: '200px'}
//]
});
Also here is the link to my page: http://jsfiddle.net/deostroll/497zM/3/
I want to set some size to the column, and hence enable horizontal scrolling.
The only way I can see as of now you can do this is to completely destroy the grid and re-bind it every time new data arrives. And when it arrives we'd have to take the first item, read the properties and create the columns array. We'd have to set each object's width property here like mentioned below:
success: function (data) {
var cols = [];
var item = data[0];
$.each(item, function (key, val) {
cols.push({
field: key,
width: '325px'
});
});
theGrid.kendoGrid({
dataSource: {
data: data,
pageSize: 5
},
pageable: true,
columns: cols,
height: 225
});
} //end success
Fiddle: http://jsfiddle.net/deostroll/497zM/5/
My requirement is to show a page with multiple filters to apply to grid data.
Suppose we are talking about Orders and an order has the following attributes
public class Order {
public int OrderID
public DateTime OrderDate
public DateTime ShipmentDate
public int OrderTotal
public int OrderStatus
}
Inside the jqgrid object I am showing all the attributes except the OrderStatus
The requirement is to create a view that has
the jqGrid on the left part
a panel on the right
Inside the right panel the user will see a list of checkboxes that represents every possible OrderStatus value and he want to search using both methods (for example selecting the checkbox "Shipped Orders" and then filtering the grid with Amount greater than a value)
I have already configured the advanced filtering (multiplesearch:true) inside the jqGrid object and I am able to create complex filters combining fields and logical operators.
Any ideas on how I can submit even the data from the right panel when the user press the search button?
Update 1:
Preamble: Oleg sample is fantastic but unfortunately does not fits requirements of my customer :(
#Oleg: I do not understand why you think that:
If the data are outside of the grid
you will be show the order details on
the right pane only for selected row.
So the user will have not so good
overview of the data.
maybe my description was not so clear but I am not going to show any order detail. To better clarify my requirement I have modified your sample to show you the desired final UI which is as in the following image:
The customer want to filter the data in the grid using two methods or both together:
Using the multiplesearch facilities provided by the grid itself (thanks for the workaround mention)
Using the custom Search Panel (the one with the checkboxes on the right) provided
From a functional point of view the requirement is very easy to express: When the user click on a checkbox or make a search using the native multiplesearch I should post values to the server including also the checkboxes state.
To summarize I should:
Add the checkboxes state when a post is made through the native multiplesearch
Add the current multiplesearch state (if any) when the user click on a checkbox
Is there a way to do this?
I understand this requirement very good. In the close case I used checkboxes inside of jqGrid. The most advantage to having the information inside of jqGrid is not only the possibility of easy searching. If the data are outside of the grid you will be show the order details on the right pane only for selected row. So the user will have not so good overview of the data.
To be able to place many checkboxes in the table without permanent horizontal scrolling I rotated headers of the columns having "checkbox with the technique described in Vertical text inside table headers using a JavaScript-based SVG library. This rotation looks not perfect in IE, but in other browser it works perfect.
You can hold the data from the OrderStatus field in a hidden column and decode the bitmask to boolean which build checkboxes either on the client or on the server side.
Because use want to use multiplesearch:true I have to mention about a bug in jQuery.clone which follow to the bug in jqGrid multi-search in all versions of IE browsers. If you define more as one search filters only the first one will be used because the operation field of all other filters will be read as undefined. It's a pity, but the bug is also not fixed in the jQuery 1.4.3 just published. To be able to use multiplesearch:true you can use workaround suggestion by Jiho Han on trirand.com forum.
All together you can see in the demo example which produce the grid
where you can search for multiple fields
The corresponding code:
var myData = [
{ orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" },
{ orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" },
{ orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" }
];
// decode 'orderStatus' column and add additional boolean data based on the bitmap mask
for (var i=0, l=myData.length; i<l; i++) {
var myRow = myData[i];
var orderStatus = parseInt(myRow.orderStatus, 10);
myRow.airPost = (orderStatus & 2) != 0? "1": "0";
myRow.heavy = (orderStatus & 1) != 0? "1": "0";
}
var grid = jQuery('#list');
grid.jqGrid({
data: myData,
datatype: 'local',
caption: 'Order Details',
height: 'auto',
gridview: true,
rownumbers: true,
viewrecords: true,
pager: '#pager',
rownumbers: true,
colNames: ['Order ID', 'Order', 'Shipment', 'Air-Post', 'Heavy', 'RowVersion'],
colModel: [
{ name: 'orderID', index: 'orderID', key:true, width: 120, sorttype: 'int' },
{ name: 'orderDate', index: 'orderDate', width: 180,
sorttype: 'date', formatter: 'date' },
{ name: 'shipmentDate', index: 'shipmentDate', width: 180,
sorttype: 'date', formatter: 'date' },
{ name: 'airPost', width: 21, index: 'airPost', formatter: 'checkbox', align: 'center',
editoptions: { value: "1:0" }, stype: 'select', searchoptions: { value: "1:Yes;0:No" } },
{ name: 'heavy', width: 21, index: 'heavy', formatter: 'checkbox', align: 'center',
editoptions: { value: "1:0" }, stype: "select", searchoptions: { value: "1:Yes;0:No" } },
{ name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true }
]
}).jqGrid ('navGrid', '#pager', { edit: false, add: false, del: false, refresh: true, view: false },
{},{},{},{multipleSearch:true})
.jqGrid ('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
grid.jqGrid('columnChooser');
}
});
where rotateCheckboxColumnHeaders and the bugfix in the advanced search defined so
// we use workaround from http://www.trirand.com/blog/?page_id=393/bugs/in-multiple-search-second-and-subsequent-ops-are-sent-as-undefined-in-ie6/
// to fix the bug in the jQuery.clone (see http://bugs.jquery.com/ticket/6793 and
// dscussion on the http://api.jquery.com/clone/
jQuery.event.special.click = {
setup: function() {
if (jQuery(this).hasClass("ui-search")) {
jQuery(this).bind("click", jQuery.event.special.click.handler);
}
return false;
},
teardown: function() {
jQuery(this).unbind("click", jQuery.event.special.click.handler);
return false;
},
handler: function(event) {
jQuery(".ui-searchFilter td.ops select").attr("name", "op");
}
};
var rotateCheckboxColumnHeaders = function (grid, headerHeight) {
// we use grid as context (if one have more as one table on tnhe page)
var trHead = jQuery("thead:first tr", grid.hdiv);
var cm = grid.getGridParam("colModel");
jQuery("thead:first tr th").height(headerHeight);
headerHeight = jQuery("thead:first tr th").height();
for (var iCol = 0; iCol < cm.length; iCol++) {
var cmi = cm[iCol];
if (cmi.formatter === 'checkbox') {
// we must set width of column header div BEFOR adding class "rotate" to
// prevent text cutting based on the current column width
var headDiv = jQuery("th:eq(" + iCol + ") div", trHead);
headDiv.width(headerHeight).addClass("rotate");
if (!jQuery.browser.msie) {
if (jQuery.browser.mozilla) {
headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7);
}
else {
headDiv.css("left", (cmi.width - headerHeight) / 2);
}
}
else {
var ieVer = jQuery.browser.version.substr(0, 3);
// Internet Explorer
if (ieVer !== "6.0" && ieVer !== "7.0") {
jQuery("span", headDiv).css("left", 0);
headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2);
}
else {
headDiv.css("left", 3);
}
headDiv.parent().css("zoom",1);
}
}
}
};
If you do prefer to hold the checkboxes outside of the grid you can do the decoding of the bit-mask OrderStatus inside of onSelectRow event handler.
UPDATED: I really something misunderstood your requirements at the beginning. Look at the modified example. Now it looks like
and it is more close to what you need.
Just as a follow up I am including here another method that I have found to abtain the same result.
This method suppose to use the postData parameter of jqGrid. Inside the method I have defined various function that verify the checkboxes current status and sends a parameter to the server where it can be used for filtering.
This is a sample
postData: {
pending: function () {
if ($("#cb_pending").is(':checked')) {
return true;
} else {
return false;
}
}
}
The advantage of this solution respect to the one depicted by Oleg is that it is possible to use mixed logical operators (AND/OR) on the server side whereas using the filters section as in the Oleg answer it is not possible.
Happy coding!