I have the situation where I need to update a grid based on what has been selected in a combo box. The layout is such that the combo box is part of a form on top and the grid is at the bottom.
First use dojo connect to bind the onChange event of your combo boxes to a function like below:
dojo.connect(selectFilterGroup, 'onChange', updateFilter);
dojo.connect(selectFilterParameter, 'onChange', updateFilter);
Then in the function call the filter function on your grid:
var updateFilter = function () {
var filterParams = {};
var group = selectFilterGroup.get('value');
var parameter = selectFilterParameter.get('value');
if (group != '') filterParams['group_name'] = group;
if (parameter != '') filterParams['parameter'] = parameter;
myGrid.filter(filterParams);
}
In these examples, selectFilterGroup and selectFilterParameter are both dijits representing combo boxes.
Another way to do this, depending on how you have constructed your grid and combo boxes is to use the displayedValue property for the filter
var group = selectFilterGroup.get('displayedValue');
Related
I have a boolean field for which I am using a radio group for which allowNull=true and no default value has been set. It currently looks like the below
I want the same to look like below (as I don't want to show the null option)
Note: Want to achieve this without changing the allowNull value and also without setting default value to true or false.
Adding the following to the onAttach event handler did the trick for me:
setTimeout(function(){
var elem = widget.getElement();
var children = elem.children[1];
var grandChildren = children.children;
var grandChild = grandChildren[0];
grandChild.parentNode.removeChild(grandChild);
},100);
I am using Google Sheets with a series of buttons. I want to click the button to increase the value in a specific row.
For example:
When I click on "Player 1" button, it will go to Player 1 row, then when I click on the "Rebound" button, it will add a value of 1 in that cell. Then, if I click the "Steal" button, it will add value in Player 1's row, and under the "Steal" column. The same goes for all of the other "player" buttons. I am having trouble finding out how to do this. I want to create a basketball box score when I can score the game with button clicks. Thank you in advance.
Google Script:
function increment(){
// define the cell to be incremented
var cell = SpreadsheetApp.getActiveSheet().getRange("B2");
// get and set the cell value
var cellValue = cell.getValue();
cell.setValue(cellValue + 1); // this increments by 1 but could be any number
}
The Google Script that I have allows my to increase the value by one for cell B2 alone. I would like to be able to use the Player Buttons to select the row and the Rebound, Turnover, Steal button to select the column and add value. I am very new to coding and scripting. Sorry.
There exists:
An setActiveSelection function you could use to select a range of cells when a Player button is clicked, and
A getSelection function you could use when an "event" button is pressed (rebound, turnover, or steal) to get the current selection and then select the correct portion of that.
Player Buttons
I think each of your player functions is going to have to call a custom function, ie, selectPlayerOneRange(), selectPlayerTwoRange(). Something like this:
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
function selectPlayerOneRange() {
sheet.setActiveSelection("B2:D2");
}
function selectPlayerTwoRange() {
...
Action Buttons
Similarly, each of your action buttons will require their own script. I might do something like this:
function getSelectedRow() {
var sel = ss.getSelection();
var range = sel.getActiveRange();
var row = range.getRow();
return row;
}
function incrementRebound() {
var row = getSelectedRow();
var col = 2;
var cell = sheet.getRange(row, col);
// Your increment code here:
var cellValue = cell.getValue();
cell.setValue(cellValue + 1);
}
function incrementSteal() {
var row = getSelectedRow();
var col = 4;
...
Is it possible to allow the user to dynamically show or hide columns in the Table widget? Or would that require creating a custom table? If a custom table, what would the basic steps for that be?
Any assistance is much appreciated. Thank you.
In AppMaker, there are no columns, only rows. The way you organize the widgets inside the rows is what gives you the column like display. But to answer your question... YES, it is possible to allow the user to dynamically hide and show columns in a table widget and it's very very very easy to achieve.
Take into consideration the following example as a demo:
Say you have a datasource with three fields; name, email and assignments. In a new page in app maker, drop a table widget towards the center of the canvas and select that as its datasource. Then add three button widgets on top of the table widget and align them horizontally. Change the text widget of the left button to "Hide Name". Then change the text of the middle button to "Hide Emails" and then change the text of the right button to "Hide Assigns". It should resemble something like this:
Now, click the left label widget inside the table row (not inside the table header), and change its name property to "name". Do similar with the middle label widget and change its name property to "email" and also with the right label widget changing its name property to "assign". Take a look at the example below:
Next, we need to add some logic to the onClick events of our button that will dynamically show and hide the columns. Click on the "Hide Name" button and and the following code to the onClick event:
var visibility;
if(widget.text === "Hide Name"){
widget.text = "Show Name";
visibility = false;
} else {
widget.text = "Hide Name";
visibility = true;
}
var table = widget.root.descendants.Table1.descendants;
table.Table1nameHeader.visible = visibility;
var tableRows = table.Table1Body.children._values;
for(var i=0; i<tableRows.length; i++){
var row = tableRows[i];
row.children.name.visible = visibility;
}
We also need to add similar code to the "Hide Email" button. Click on that button and add the following code to the onClick event:
var visibility;
if(widget.text === "Hide Email"){
widget.text = "Show Email";
visibility = false;
} else {
widget.text = "Hide Email";
visibility = true;
}
var table = widget.root.descendants.Table1.descendants;
table.Table1emailHeader.visible = visibility;
var tableRows = table.Table1Body.children._values;
for(var i=0; i<tableRows.length; i++){
var row = tableRows[i];
row.children.email.visible = visibility;
}
And finally, we do the same thing with the "Hide Assigns" button. Click on it and add the following code to the onClick event:
var visibility;
if(widget.text === "Hide Assigns"){
widget.text = "Show Assigns";
visibility = false;
} else {
widget.text = "Hide Assigns";
visibility = true;
}
var table = widget.root.descendants.Table1.descendants;
table.Table1assignmentsHeader.visible = visibility;
var tableRows = table.Table1Body.children._values;
for(var i=0; i<tableRows.length; i++){
var row = tableRows[i];
row.children.assign.visible = visibility;
}
That should be all. It's time to preview the app. Please do so and the result should be something like this:
I hope it helps!
One more alternative to the solution provided by Morfinismo is rendering dynamic tables. The idea is to render table's header using Grid Widget and to render table's body using List Widget with Grid inside each row. Grid's datasources could be populated using Model's Metadata. More details and screenshots could be found in option #4 in this answer.
I am using the jqGrid for ASP.NET MVC, and have a grid with a subgrid. In that subgrid, I have added a button to the toolbar like so:
ToolBarSettings = new ToolBarSettings()
{
ShowRefreshButton = true,
CustomButtons = new List<JQGridToolBarButton>()
{
new JQGridToolBarButton()
{
Text = "Custom",
Position = ToolBarButtonPosition.Last,
OnClick="CustomClick" }
}
},
etc...
}
The CustomClick is a javascript callback, and it fires without any problems, but I am having trouble getting the parent grid row id in the CustomClick callback.
How can I get the parent row id in the CustomClick function?
Thanks, Dennis
The child Grid id itself contains the parentKey. when ever a child grid is created the id of the child grid is ParentGridName_ParentKey_ChildGridName. So you can get the Parent key
Below is the code for custom button :
<CustomButtons>
<Trirand:JQGridToolBarButton ToolTip="Custom button" OnClick="GetParentKey" />
</CustomButtons>
Then inside GetParentKey function you can get the parentKeyID as follows :
function GetParentKey()
{
var GridId = this.id.toString().split('_');
var parentKey = GridId[1];
}
Inside of CustomClick function you has as this the DOM element of the table from which navigator the custom button are clicked. There are no "parent row", but you can get the id of the currently selected row (if any exist) per
var rowid = $(this).jqGrid('getGridParam', 'selrow');
see example from the following answer oder search for another examples to the navButtonAdd method.
for (iss = 0; iss < listOfProductIds2.length; iss++)
{
// Alert.show(listOfProductIds2[iss]);
var productMain:VBox=new VBox();
var p1:HBox=new HBox();
var l1:Label=new Label();
var b1:Button=new Button();
var spacer:Spacer=new Spacer();
spacer.width=300;
b1.label="Remove";
b1.setConstraintValue("id","");
b1.addEventListener(MouseEvent.CLICK,removeProduct);
l1.text="Product "+iss;
p1.setActualSize(500,500);
p1.addChild(l1);
p1.addChild(spacer);
p1.addChild(b1);
productMain.addChild(p1);
}
function removeProduct(event:MouseEvent):void
{
// How do i know which button is clicked
}
Use event.currentTarget (instead of event.target) because event.target might be the Label component or some styling component within the button, but currentTarget is assured to be the object with which the listener was registered.
To get a handle to the button that was clicked you can just cast the currentTarget to a button.
function removeProduct(event:MouseEvent):void
{
var b1:Button = Button(event.currentTarget);
}
The method setConstraintValue is for setting layout constraints, not setting id. The id property is used by mxml for creating variable names for objects. You can get/set id as you would get/set any other property (say width) - but neither have I seen anyone doing that nor do I see any need to do that in the first place.
event.target should point to the Button you clicked on, shouldn't it ? However you should probably give ids to the buttons to be able to differenciate them (since you create them dynamically.)
Look at event.target.
If ids are assigned dynamically as in the example given b1.id = "button_" + listOfProductIds2[iss]
Then the function that processes the click event would look at the currenttarget, and what I usually do is do a string replace on the part of the id that you know is not dynamic like "button_" with "", which leaves you with the name of the product.