I am converting a VSTO Excel add-in to a Web Excel add-in (using JavaScript API for Office). In my VSTO C# code I have the following line:
worksheet.Rows[rowStart + ":" + rowEnd].Group()
and a similar line for columns:
worksheet.Columns[colStart + ":" + colEnd].Group();
What is the equivalent API call for Office-JS? Could not find a relevant entry in the API Docs
I'm afraid that that kind of grouping is not yet supported in office.js. Please vote up the suggestion in the Office Developer Suggestion box: Grouping and ungrouping rows and columns.
See --> https://learn.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-ranges-group
https://learn.microsoft.com/en-us/javascript/api/excel/excel.range?view=excel-js-preview#excel-excel-range-group-member(1)
Here is how I did it. First thing I noticed was that I wanted certain groups to be collapsed by default. I accomplished this w/ hidden = true which combined w/ grouping, its more of a hide by default.
const Rng_Group_Obj = {
"group": {
"groupOptionString": {
"ByRows": "ByRows",
"ByColumns": "ByColumns",
},
},
"columnHidden": true,
"rowHidden": true,
}
function Do_Group_Rng(rng, ByColumns, ByRows, Opt_Hidden_By_Default) {
if (ByColumns == true) {
rng.group(Rng_Group_Obj.group.groupOptionString.ByColumns)
if (Opt_Hidden_By_Default == true) { rng.columnHidden = Rng_Group_Obj.columnHidden }
}
if (ByRows == true) {
rng.group(Rng_Group_Obj.group.groupOptionString.ByRows)
if (Opt_Hidden_By_Default == true) { rng.rowHidden = Rng_Group_Obj.rowHidden }
}
return true;
}
var ws = context.workbook.worksheets.getActiveWorksheet()
var rng = ws.getRange("G:K")
Do_Group_Rng(rng,true,false,true)
var rng = ws.getRange("4:7")
Do_Group_Rng(rng, false, true, true)
Related
I have a custom excel output class that I'm using to parse the grid, and in some cases replace the data in the grid with template data. In this particular instance, the data i want to output is multi-line. I have it working to that point but the exported sheet is one line high so you can't see lines two thru-seven in the field.
desired result:
actual result:
Here's a relevant section of my code. It's the parsing loop that applies the templates and strips html, but adds line breaks first.
if (me.ColumnTemplates && $.isArray(me.ColumnTemplates)) {
for (let c = 0; c < me.ColumnTemplates.length; c++) {
let ct = me.ColumnTemplates[c];
if (ct.template(dr).includes("</br>")) {
sheet.rows[r + 1].cells[ct.cellIndex - 1].wrap = true;
}
me.elem.innerHTML = ct.template(dr).replace(/<\/br>/g, "\n");
sheet.rows[r + 1].cells[ct.cellIndex - 1].value = me.elem.textContent || me.elem.innerText || "";
}
}
any help would be appreciated. I would like to either have a setting that makes this "just work" or have a way to compute the needed height and set it manually. Either is fine.
I'm not aware of a way to auto-size it, but you can set row height it via sheets.rows.height:
<script>
var workbook = new kendo.ooxml.Workbook({
sheets: [{
rows: [{
cells: [{ value: "this row is 100px high" }],
height: 100
}, {
cells: [{ value: "this row is 200px high" }],
height: 200
}]
}]
});
</script>
example found here
Updating your code to utilize each in the template html you can do something like the following:
if (me.ColumnTemplates && $.isArray(me.ColumnTemplates)) {
for (let c = 0; c < me.ColumnTemplates.length; c++) {
let ct = me.ColumnTemplates[c];
if (ct.template(dr).includes("</br>")) {
sheet.rows[r + 1].cells[ct.cellIndex - 1].wrap = true;
sheet.rows[r + 1].height = (ct.template(dr).match(/<\/br>/g) || []).length * 20 + 20; //20 was default row height.
}
me.elem.innerHTML = ct.template(dr).replace(/<\/br>/g, "\n");
sheet.rows[r + 1].cells[ct.cellIndex - 1].value = me.elem.textContent || me.elem.innerText || "";
}
}
Set column width to auto
Solution 1
When kendo grid bound to data source in JavaScript/jQuery
excelExport: function(e) {
var columns = e.workbook.sheets[0].columns;
columns.forEach(function(column){
// also delete the width if it is set
delete column.width;
column.autoWidth = true;
});
}
more details
Solution 2
When kendo grid is taking data source from action controller not bound to data source in jQuery then add event to call a JavaScript function on excel export
function exportToExcelSheetColumnWidthChange(e) {
var columns = e.workbook.sheets[0].columns;
columns.forEach(function (column) {
delete column.width;
column.autoWidth = true;
});
};
Add event to the kendo grid control
.Events(e => e.ExcelExport("exportToExcelSheetColumnWidthChange"))
I have a jqGrid PHP project where I have been able with the below code to make rows background color and editable = false, based on the value of a cell in that row.
$rowattr = <<<ROWATTR
function (rd) {
if (rd.br_re_ending == "OTFN") {
return { "style": "background-color:#FF9999; background-image:none;", "editable": false };
}
}
ROWATTR;
$grid->setGridEvent('rowattr', $rowattr);
What I am now trying to do is to similarly use the value of a cell to determine if another cell in that same row should be editable or not. I have tried several options like the below, but with no avail.
$rowattr = <<<ROWATTR
function (rd) {
if (rd.br_ch_flag_extrameals == "STD") {
return { "setColProp", "br_ch_ch2_mon", "editable": True };
}
}
ROWATTR;
$grid->setGridEvent('rowattr', $rowattr);
Can someone please provide some help or guidance in how to achieve this?
Thanks,
Adri
I am trying to use Leaflet realtime plugin (https://github.com/perliedman/leaflet-realtime), they mentioned in the documentation that we can keep previous updates by adding start:false in the constructor.
var map = L.map('map'),
realtime = L.realtime({
url: 'https://wanderdrone.appspot.com/',
crossOrigin: true,
type: 'json'
}, {
interval: 3 * 1000, start:false
}).addTo(map);
Anyone have better idea on how to do that ?
plnkr has a good demo:
http://plnkr.co/edit/NmtcUa?p=preview
If you set start: false, automatic updates will be disabled. This means you will have to call the layer's update method yourself, providing any GeoJSON data you want to add or update; you can also remove added features with the remove method. These methods can be used if you want to use something other than server polling.
You can use the following code that I copied from plnkr while changed a little bit, because L.realtime inherit L.geoJson. And L.geoJson have 'layeradd'.
realtime.on('layeradd', function(e) {
var coordPart = function(v, dirs) {
return dirs.charAt(v >= 0 ? 0 : 1) +
(Math.round(Math.abs(v) * 100) / 100).toString();
},
popupContent = function(fId) {
var feature = e.features[fId],
c = feature.geometry.coordinates;
return 'Wander drone at ' +
coordPart(c[1], 'NS') + ', ' + coordPart(c[0], 'EW');
},
bindFeaturePopup = function(fId) {
realtime.getLayer(fId).bindPopup(popupContent(fId));
},
updateFeaturePopup = function(fId) {
realtime.getLayer(fId).getPopup().setContent(popupContent(fId));
};
map.fitBounds(realtime.getBounds(), {maxZoom: 3});
Object.keys(e.enter).forEach(bindFeaturePopup);
Object.keys(e.update).forEach(updateFeaturePopup);
});
I'm relatively new to js and now have to implement a handsontable into our project.
This worked well so far, but I am hitting a roadblock with globalization.
Basically, we use comma as a decimal seperator, but when I try and copy something like "100,2" into a cell designated as 'numeric,' it will show as 1002.
If the same value is entered in a cell designated as 'text' and the type is changed to numeric afterwards, the value will be shown correctly.
For this I already had to add 'de' culture to the table sourcecode.(basically copying 'en' and changing the values currently relevant to me.)
numeral.language('de', {
delimiters: {
thousands: '.',
decimal: ','
},//other non-relevant stuff here
When I copy the values directly from the table and insert them to np++ they show as 100.2 etc. However, when inserting them into handsontable the arguments-array looks as follows:
[Array[1], "paste", undefined, undefined, undefined, undefined]
0: Array[4]
0: 1 //row
1: 1 //column
2: "100.2" //previous value
3: 1002 //new value
Here's what I have tried currently:
hot.addHook("beforeChange", function () {
if (arguments[1] === "paste") {
hot.updateSettings({
cells: function (row, col, prop) {
var cellProperties = {
type: 'numeric',
language: 'en'
};
return cellProperties;
}
});
//hot.updateSettings({
// cells: function (row, col, prop) {
// var cellProperties = {
// type: 'text',
// };
// return cellProperties;
// }
//});
}
}, hot);
hot.addHook("afterChange", function () {
if (arguments[1] === "paste") {
ChangeMatrixSettings(); //reset cell properties of whole table
}
}, hot);
I hope I've made my problem clear enough, not sure if I missed something.
Are there any other ways to get the correct values back into the table? Is this currently not possible?
Thanks in advance.
You asked more than one thing, but let me see if I can help you.
As explained in handsontable numeric documentation, you can define a format of the cell. If you want '100,2' to be shown you would format as follows
format: '0.,'
You can change that to what you really need, like if you are looking for money value you could do something like
format: '0,0.00 $'
The other thing you asked about is not on the latest release, but you can check it out how it would work here
I have since implemented my own validation of input, due to other requirements we have for the table mainly in regards to showing invalid input to user.
function validateInputForNumeric(parameter) {
var value = parameter[3];
var row = parameter[0];
var col = parameter[1];
if (decimalSeperator === '') {
var tmpculture = getCurrCulture();
}
if (value !== null && value !== "") {
if (!value.match('([a-zA-Z])')) {
if (value.indexOf(thousandSeperator) !== -1) {
value = removeAndReplaceLast(value, thousandSeperator, ''); //Thousandseperators will be ignored
}
if (value.indexOf('.') !== -1 && decimalSeperator !== '.') {
//Since numeric variables are handled as '12.3' this will customize the variables to fit with the current culture
value = removeAndReplaceLast(value, '.', decimalSeperator);
}
//Add decimalseperator if string does not contain one
if (numDecimalPlaces > 0 && value.indexOf(decimalSeperator) === -1) {
value += decimalSeperator;
}
var index = value.indexOf(decimalSeperator)
var zerosToAdd = numDecimalPlaces - (value.length - index - 1);
for (var j = 0; j < zerosToAdd; j++) {
//Add zeros until numberOfDecimalPlaces is matched for uniformity in display values
value += '0';
}
if (index !== -1) {
if (numDecimalPlaces === 0) {
//Remove decimalseperator when there are no decimal places
value = value.substring(0, index)
} else {
//Cut values that have to many decimalplaces
value = value.substring(0, index + 1 + numDecimalPlaces);
}
}
if (ErrorsInTable.indexOf([row, col]) !== -1) {
RemoveCellFromErrorList(row, col);
}
} else {
AddCellToErrorList(row, col);
}
}
//console.log("r:" + row + " c:" + col + " v:" + value);
return value;
}
The inputParameter is an array, due to handsontable hooks using arrays for edit-events. parameter[2] is the old value, should this be needed at any point.
This code works reasonably fast even when copying 2k records from Excel (2s-4s).
One of my main hindrances regarding execution speed was me using the handsontable .getDataAtCell and .setDataAtCell methods to check. These don't seem to handle large tables very well ( not a critique, just an observation ). This was fixed by iterating through the data via .getData method.
In trying to implement a filterToolbar search in jquery, but when I write in the textbox it doesnt send the value, the search field nor the operator: I used an example, here is the code in html file
jQuery(document).ready(function () {
var grid = $("#list");
$("#list").jqGrid({
url:'grid.php',
datatype: 'xml',
mtype: 'GET',
deepempty:true ,
colNames:['Id','Buscar','Desccripcion'],
colModel:[
{name:'id',index:'id', width:65, sorttype: 'int', hidden:true, search:false},
{name:'examen',index:'nombre', width:500, align:'left', search:true},
{name:'descripcion',index:'descripcion', width:100, sortable:false, hidden:true, search:false}
],
pager: jQuery('#pager'),
rowNum:25,
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: 'auto',
caption: 'Examenes',
height: "100%",
loadComplete: function() {
var ids = grid.jqGrid('getDataIDs');
for (var i=0;i<ids.length;i++) {
var id=ids[i];
$("#"+id+ " td:eq(1)", grid[0]).tooltip({
content: function(response) {
var rowData = grid.jqGrid('getRowData',this.parentNode.id);
return rowData.descripcion;
},
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
},
close: function() {
$(this).tooltip("widget").stop(false, true).show().slideUp("fast");
}
}).tooltip("widget").addClass("ui-state-highlight");
}
}
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
$("#list").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false,
defaultSearch: 'cn', ignoreCase: true});
});
and in the php file
$ops = array(
'eq'=>'=', //equal
'ne'=>'<>',//not equal
'lt'=>'<', //less than
'le'=>'<=',//less than or equal
'gt'=>'>', //greater than
'ge'=>'>=',//greater than or equal
'bw'=>'LIKE', //begins with
'bn'=>'NOT LIKE', //doesn't begin with
'in'=>'LIKE', //is in
'ni'=>'NOT LIKE', //is not in
'ew'=>'LIKE', //ends with
'en'=>'NOT LIKE', //doesn't end with
'cn'=>'LIKE', // contains
'nc'=>'NOT LIKE' //doesn't contain
);
function getWhereClause($col, $oper, $val){
global $ops;
if($oper == 'bw' || $oper == 'bn') $val .= '%';
if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
return " WHERE $col {$ops[$oper]} '$val' ";
}
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
$where = getWhereClause($searchField,$searchOper,$searchString);
}
I saw the query, and $searchField,$searchOper,$searchString have no value
But when I use the button search on the navigation bar it works! I dont konw what is happening with the toolbarfilter
Thank You
You use the option stringResult: true of the toolbarfilter. In the case the full filter will be encoded in filters option (see here). Additionally there are no ignoreCase option of toolbarfilter method. There are ignoreCase option of jqGrid, but it works only in case of local searching.
So you have to change the server code to use filters parameter or to remove stringResult: true option. The removing of stringResult: true could be probably the best way in your case because you have only one searchable column. In the case you will get one additional parameter on the server side: examen. For example if the user would type physic in the only searching field the parameter examen=physic will be send without of any information about the searching operation. If you would need to implement filter searching in more as one column and if you would use different searching operation in different columns you will have to implement searching by filters parameter.
UPDATED: I wanted to include some general remarks to the code which you posted. You will have bad performance because of the usage
$("#"+id+ " td:eq(1)", grid[0])
The problem is that the web browser create internally index of elements by id. So the code $("#"+id+ " td:eq(1)") can use the id index and will work quickly. On the other side if you use grid[0] as the context of jQuery operation the web browser will be unable to use the index in the case and the finding of the corresponding <td> element will be much more slowly in case of large number rows.
To write the most effective code you should remind, that jQuery is the wrapper of the DOM which represent the page elements. jQuery is designed to support common DOM interface. On the other side there are many helpful specific DOM method for different HTML elements. For example DOM of the <table> element contain very helpful rows property which is supported by all (even very old) web browsers. In the same way DOM of <tr> contains property cells which you can use directly. You can find more information about the subject here. In your case the only thing which you need to know is that jqGrid create additional hidden row as the first row only to have fixed width of the grid columns. So you can either just start the enumeration of the rows from the index 1 (skipping the index 0) or verify whether the class of every row is jqgrow. If you don't use subgrids or grouping you can use the following simple code which is equivalent your original code
loadComplete: function() {
var i, rows = this.rows, l = rows.length;
for (i = 1; i < l; i++) { // we skip the first dummy hidden row
$(rows[i].cells(1)).tooltip({
content: function(response) {
var rowData = grid.jqGrid('getRowData',this.parentNode.id);
return rowData.descripcion;
},
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
},
close: function() {
$(this).tooltip("widget").stop(false, true).show().slideUp("fast");
}
}).tooltip("widget").addClass("ui-state-highlight");
}
}