In my Wijmo FlexGrid, in one Dropdown Column having dropdown values (decimal, Percentage). I need to show percentage symbol if I choose percentage as dropdown values, and decimal (n2) if Dropdown value is selected decimal
You need to set the format of the column based on the value using itemFormatter or formatItem event. Here is a fiddle demonstrating similar requirement: http://jsfiddle.net/5Ltfpzst/
grid.itemFormatter = function (panel, r, c, cell) {
if (panel.cellType === wijmo.grid.CellType.Cell && c == 3) {
var cellData = panel.getCellData(r, 0);
if (cellData < 5) {
panel.columns[c].format = 'n1';
} else {
panel.columns[c].format = 'p0';
}
}
}
Related
This is likely embarrassingly easy but I'm new and I've been beating my head against the wall on this for a while now. What I am attempting to do is basically a modified version of the "Hello App Maker!" If else test.
The necessary info I have the following widgets attached to the appropriate data sources:
Dropdown widget called source_name (string - list)
Label widget I've called name (string)
Text Box widget called qty_duration (number)
Label widget I've called hours (number)
I have a dropdown widget called source_name with 5 options. On selection I have the value appear in a label widget I've called name. If the option selected from the drop down widget is ever LABOUR I am trying to then have the value of a Text Box widget called qty_duration appear in a label widget I've called hours
On the source_name dropdown event - onValueChange I have the following code:
// Define variables for the input and output widgets
var nameWidget = app.pages.Apex_job_details.descendants.name;
var outputWidget = app.pages.Apex_job_details.descendants.hours;
var techhours = app.pages.Apex_job_details.descendants.qty_duration;
var nothing = 0;
// If a name is LABOUR, add the qty to the output widget Else output 0.
if (nameWidget == 'LABOUR') {
outputWidget.text = techhours;
} else {
outputWidget = nothing;
}
It's not giving me any errors, but it's also not outputting to the hours label. If I edit the code as follows just to muck with it:
// Define variables for the input and output widgets
var nameWidget = app.pages.Apex_job_details.descendants.name;
var outputWidget = app.pages.Apex_job_details.descendants.hours;
var techhours = app.pages.Apex_job_details.descendants.qty_duration;
var nothing = 0;
// If a name is LABOUR, add the qty to the output widget Else output 0.
if (nameWidget == 'LABOUR') {
outputWidget.text = techhours;
} else {
outputWidget.text = nothing;
}
I'm not sure what I'm doing wrong.
Assuming all labels and input widgets are inside a table row you will want to adjust your code as follows:
var tablerow = widget.parent;
var nameWidget = tablerow.descendants.name.text;
var outputWidget = tablerow.descendants.hours;
var techhours = tablerow.descendants.qty_duration.value;
if(nameWidget === 'LABOUR') {
outputWidget.text = techhours;
} else {
outputWidget.text = null;
}
By using widget.parent in the onValueChange event of the dropdown you will automatically reference the table row and then by using descendants you are referencing only the descendants of that table row. This will bridge the error by using an absolute reference when using table rows. If it still doesn't work let me know.
I am new at Acrobat, Need some help in conditional Formatting,
I have 2 text fields. If I enter a number >0 but <10 the bg colour of the second box should turns yellow. If I enter a number <20 but >10 it should turns orange.
Please help to understand Acrobat DOM elements.
Let's assume the field where you enter the numbers is called "myField". Then, we would add the following to the Calculate event of the field where the background should change:
var mf = this.getField("myField") ;
if (mf.value > 0 && mf.value < 10) {
event.target.fillColor = color.yellow ;
} else {
if (mf.value >= 10 && mf.value < 20) {
event.target.fillColor = ["RGB", 1, 0, 0.2] ;
} else {
event.target.fillColor = ["T"] ;
}
}
and that should do it.
Note that there is no pre-defined orange color, and you'd have to get the correct color value array (I think the one I used is kind of an orange).
If you add the code to the calculate event of another field, you'd have to replace event.target with this.getField("myOtherField") (or whatever the field name is).
In Kendo UI Grid, After grouping grouped column sorting is not working, remaining column sorting is working fine.
Can anyone give me idea on how to sort grouped column from client side.
Thank you!!
When you group your data in kendo grid it automatically sort groups asc.
You can read about this behavior in docs
But what you need is change group sorting on column header click.
on dataBound event try to look at grid dataSource.sort() collection and if need change group sorting direction.
Something like this:
//Get the grid object
var grid = $("#grid").data("kendoGrid");
// Get the datasource bound to the grid
var ds = grid.dataSource;
// Get current sorting
var sort = ds.sort();
// Display sorting fields and direction
if (sort) {
for (var i = 0; i < sort.length; i++) {
if(sort[i].field == " myField"){
grid.dataSource.group({field:"myField", dir: sort[i].dir });
}
}
}
Kendo UI Grid Grouping gives you ListSortDirection.Ascending sorting by default. If you want to do something else you have to set it. If you are using the WebApi interface and generating a kendoRequest for the Kendo.mvc.dll method .ToDataSourceResult(kendoRequest); then you may try something like this:
var sort = kendoRequest.Sorts.FirstOrDefault();
var group = kendoRequest.Groups.FirstOrDefault();
if(sort != null && group != null) {
if(sort.Member == group.Member && sort.SortDirection == ListSortDirection.Descending) {
kendoRequest.Groups[0].SortDirection = sort.SortDirection;
}
}
var result = data.ToDataSourceResult(kendoRequest);
I have 6 dropdown lists (with identical options), and I am manually setting them in my codebehind. All six should have different values. When I log the values I am setting them to, I get the correct assumed values to be set to. However, when the page renders, all six of them are set to the same freaking value.
I have tried setting the values with all of the following:
// set index, find by text
dd1.SelectedIndex = dd1.Items.IndexOf(dd1.Items.FindByText(val1));
// set with selected value
dd2.SelectedValue = val2;
// set index, find by value
dd3.SelectedIndex = dd3.Items.IndexOf(dd3.Items.FindByValue(val3));
// set list item, selected = true
((ListItem)dd4.Items.FindByValue(val4)).Selected = true;
The dropdown lists' set of options are generated prior to me trying to set them:
foreach (Station st in stations) {
ListItem li = new ListItem() { Text = st.fromto, Value = st.fromto};
dd1.Items.Add(li);
dd2.Items.Add(li);
dd3.Items.Add(li);
dd4.Items.Add(li);
dd5.Items.Add(li);
dd6.Items.Add(li);
}
I then look in the database to see if any values exist for a specific reference id in my app. If so, it indicates that I need to set one or more (up to 6) dropdowns:
var existingStations = db.LOGOPS_STATIONs.Where(x => x.XREF_LOGOP_MAIN_ID == logopRefId);
if (existingStations.Count() > 0) {
int i = 1;
foreach (LOGOPS_STATION s in existingStations) {
if (i < 7) {
string text= s.FROM_STATION;
if (i == 1) dd1.SelectedIndex = dd1.Items.IndexOf(dd1.Items.FindByText(text));
// for the heck of it, set the next one manually...
else if (i == 2) dd2.SelectedIndex = 2;
// try and set one with forcing select
else if (i == 3) ((ListItem)dd3.Items.FindByText(text)).Selected = true;
// good ol normal
else if (i == 4) dd4.SelectedValue = text;
... and so on ...
}
}
}
So, the dropdowns are all populated (when I log in the codebehind they're fully populated). And when I log the actual values when they're being set, they're set to the value as expected. However, when the page loads, they're all set to the same thing
At any rate, not sure what else to do. I have turned on and off different event validation hookups. I have disabled all JS to see if that was manipulating values, and it's not. I have tried explicitly setting like this
dd1.SelectedIndex = 2;
dd2.SelectedIndex = 8;
Oddly enough, that doesn't work either. For real, when does setting SelectedIndex to a unique control with a unique id not set the item?
I had to create a separate list item for each dropdown instead of them all sharing the same li in the foreach loop. And then a step further, had to set Selected = false in the constructor of the ListItem
I assumed that you could 'reuse' code for each instance of the dropdown population, but each dropdown needed it's own unique ListItem
Maybe there's a better way, but this solution seems to have solved the problem
I have a supposedly common problem to solve (done easily with other grid controls I'm familiar with).
In jqgrid, i'm quite stumped.
I have a jqgrid with inline editing enabled. I would like to add some scripting so that when editing a row (or adding a new row), the value of ColumnC is automatically computed as ColumnA * ColumnB as default. The user can change the values in any column at any time. I want this value to be computed as soon as the user enters it and not wait till the data is saved.
My approach so far has been to attach a dataEvent of type "change" to ColumnA and ColumnB -
dataEvents: [
{ type: 'change', fn: function(e) {
var rowid = $("#myGrid").jqGrid('getGridParam','selrow');
var rowData = $("#myGrid").getRowData(rowid);
var cell1 = rowData['ColumnA'];
var cell2 = rowData['ColumnB'];
var newValue = cell1 * cell2;
$("#myGrid").jqGrid('setCell', rowid, 'ColumnC', newValue);
}
},
]
Obviously, cell1 & cell2 don't actually return the value but the whole cell content as already discovered by other users here How to get a jqGrid cell value. The only way to get a cell value seems to be to use a custom regex user function that strips out that value.
Apart from that, is there a better/alternate way to achieve what I need? Something as simple as jqGrid - How to calculated column to jqgrid? though obviously that won't cut it for me since it will only displaying data and user cannot update it.
Any help would be appreciated.
UPDATE: After guidance from Oleg, I was able to extend getTextFromCell to support what I need.
function getTextFromCell(cellNode) {
var cellValue;
//check for all INPUT types
if (cellNode.childNodes[0].nodeName == "INPUT") {
//special case for handling checkbox
if (cellNode.childNodes[0].type == "checkbox") {
cellValue = cellNode.childNodes[0].checked.toString();
}
else {
//catch-all for all other inputs - text/integer/amount etc
cellValue = cellNode.childNodes[0].value;
}
}
//check for dropdown list
else if (cellNode.childNodes[0].nodeName == "SELECT") {
var newCell = $("select option:selected", cellNode);
cellValue = newCell[0].value;
}
return cellValue;
}
function getCellNodeFromRow(grid,rowId,cellName) {
var i = getColumnIndexByName(grid, cellName);
var cellValue;
//find the row first
$("tbody > tr.jqgrow", grid[0]).each(function() {
//The "Id" column in my grid is at index 2...
var idcell = $("td:nth-child(2)", this);
var currRowId = getTextFromCell(idcell[0])
if (currRowId == rowId) {
cellValue = getTextFromCell($("td:nth-child(" + (i + 1) + ")", this)[0]);
return false;
}
});
return cellValue;
}
The code in getCellNodeFromRow is not the most efficient. There is a .each() loop for find the matching row node. I can see this being slow when the grid has thousands of rows. Is there a better/more efficient way to find the row node? I have the row Id already.
Look at the demo from the answer. It uses cell editing, but the same technique work for inline editing too. Just click on any cell in the "Amount" column and modify the numerical value. You will see that the value in the "Total" row (footer) will be changed dynamically during the cell is still in the editing mode. I think it is what you need.
you can achieve this using onCellSelect event of jqgrid as below
//global section
var columnA;
var ColumnB;
var ColumnC;
var currentRow;
//
onCellSelect: function (rowid, iCol, aData) {
currentRow = rowid;
var ColumnA = $('#grid').getCell(rowid, 'MyCol');
var ColumnB = $('#grid').getCell(rowid, 'MyCol');
$("#grid").jqGrid('editRow', rowid, true );
$("#myMenu").hide();
if (rowid && rowid !== lastsel) {
if (lastsel) jQuery('#grid').jqGrid('restoreRow', lastsel);
$("#grid").jqGrid('editRow', rowid, true );
lastsel = rowid;
}
else if (rowid && rowid === lastsel)
{ $("#grid").jqGrid('editRow', rowid, true ); }
//if it is in editable mode
// when you view the html using firebug it will be like the cell id change to
//format like "rowid_ColumnName"
$('#' + currentRow + '_ColumnC').val(ColumnA*ColumnB);
// or you can use achieve this using following jqgrid method at
//appropriate place
$("#myGrid").jqGrid('setCell', rowid, 'ColumnC', ColumnA*ColumnB);
}