I render a table with django-tables2.This is it:
class VehiclesTable(tables.Table):
id = tables.TemplateColumn(verbose_name=' ',template_name='editButton.html')
plate = tables.Column(verbose_name='plate')
vht_id = tables.Column(verbose_name='vht_i')
vlength = tables.Column(verbose_name='vlength')
vwidth = tables.Column(verbose_name='vwidth')
class Meta:
attrs = {'class': 'custom'}
I have a template column(id) that each cell of it has a button that each one renders a template. In the view that handles this template I want to pass the value of the cell next to the button cell (same row->plate). This value will be used to query the object that I want to render in a form on the new template with the button click. How can i fetch the value of the next django table cell(plate) when the user "hits" the button?
TemplateColumn renders the template using a context containing a record variable (as described in the documentation).
In your case, this means in editButton.html you can access the plate value via {{ record.plate }}.
Related
I want to have an input widget that is similar to the built-in multiselect input widget but where instead of checks a number is given, say for example in the pizza order app example, one would be able to pick 3 for the first topping, 0 for the second topping and 1 for the third topping.
Since input widgets are not modifiable and display widgets do not have the "value" field, I thought I could do it through the "submit" button event, but that uses widget.datasource.createItem() which is quite opaque and I don't know how I would get the data from the display widget and integrate it to create an item.
Based on your requirement, I created a simple implementation using a list widget and a client-side calculated model. I also used a multi-select widget to show the dynamic mapping of selections to the actual input widget.
Editor View
From a selected list of toppings, the calculated model will be populated and render the sublist of toppings together with an input field for the user to enter the number of desired toppings.
The multi-select widget is bound to a parameter in the datasource.
Here is the query function to populate the list onValueChange.
function generateTopingList(query,recordFactory,callback) {
var toppingList = [];
if(query.parameters.topingList){
query.parameters.topingList.forEach(function(e,i){
var newRecord = recordFactory.create();
newRecord.Name = e;
newRecord.Amount = 0;
toppingList.push(newRecord);
});
}
callback.success(toppingList);
}
The list widget will make use of this datasource and bind the name and amount field into a label and a text input.
Preview
I have a button to emulate a SAVE action To capture the entered values and display it in another label.
function showResults(selectedItems,resultWidget){
resultWidget.value = " \n";
selectedItems.forEach(function(e,i){
var toppingName = e.Name;
var enteredAmount = e.Amount;
//for display only
resultWidget.value += toppingName + " - " + enteredAmount + "\n";
});
}
See this simple video on how this works in action.
With regards to creating your own input widgets, app Maker gives you an option to create re-usable sections in your app through the concept of "Page Fragments". You can implement the logic separately, like in my case it's the list widget, then wrap it into a page fragment. You can then use this fragment in your pages.
I've been able to set the options on an AppMaker DropDown by doing this sort of thing:
google.script.run
.withSuccessHandler(function(oA){app.pages.Notes.descendants.Dropdown1.options=oA;})
.getSelectOptions();//oA is just an array
But I'd like to know how to do load different values in the options and value like we can do it in javascript with something like this:
function updateSelect(vA){
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i].option,vA[i].value);
}
}
And I tried this by trying to get a hold of the dom element as follows:
var elem=app.pages.myPage.descendants.myDropDown.getElement();
elem.options.length=0;//always gives me an error because options doesn't seem to exist in that object.
So for now I've been using the standard HTML dom elements in an AppMaker Html widget and that works okay as long as your select is on the first page. If it's not on the first page I have found that the onChange event can't load Widgets on pages that are not visible. It is interesting to note however that you can change the contents of HTML widgets even if they are on other non visible pages.
Anyway the simple question is how can one load one thing into value and another thing into option text in an AppMaker DropDown Widget?
<option value="value">text</option>
If you have a predefined array for your options and values you could do the following for your onAttach Event of your dropdown:
var options = ['one thing','two thing','three thing'];
var names = ['another one thing','another two thing','another three thing'];
widget.options = options;
widget.names = names;
In this case the values that would get recorded would be the options array, but the items that would be displayed would be from the names array. Hope this gets you on the right path.
I have a created a gridview and added a checkbox in item template. This grid has few columns along with DataKey (primary key). Due to performance gain, this grid will fetch the next set of recrods on each page change based on the page number click. So that is done.
Now when user selects a checkbox in page one and then go to page 2 and coming back to page one, then user will not see the checkbox checked as the user did earlier.
So is there a good way to persist the checkbox when user move page to page?
This checkbox be used as a flag to select the rows that can be deleted later by a button outside the grid.
Since you receive a new set each time a paging is selected, I suggest the following approach:
Create an array[] object via javascript that will add to list the datakey whenever a checkbox is selected and in turn remove it if the checkbox is deselected. Something like this:
var selectedDataKeys = [];
$('.checkboxclass').on('change', function() {
// Considering you assign the data key as id for the checkbox otherwise implement a way to retrieve the id.
var dataKey = $(this).prop('id');
// Determine if the dataKey is in the selected data keys array
var isContained = (selectedDataKeys.indexOf(dataKey) > -1 );
if($(this).is(':checked')) {
// If is contained is false - add to the array
if (!isContained)
selectedDataKeys.push(dataKey);
} else {
// If is contained is true - remove to the array
if (isContained){
selectedDataKeys = $.grep(selectedDataKeys, function(value) {
return value != dataKey;
});
}
}
});
From this point on the client user will have an active list of selected items, now its up to you to use that list to manipulate your grid display page. Either modify the display on document ready by comparing all the item on the grid display with the selectedDataKeys array or sending those keys and do the comparison server side.
Hope this helps.
i have made a list control. i want to display the name of the objects in it in a text control box
the code i am using here is
public function add(event:MouseEvent):void
{
var str:String;
str = mylistcontrol.dataProvider.getItemAt(0).toString();
mytextarea.text += str+ "has been added";
mytextarea.text += "\n";
}
The problem with this code is i am using index value of 0. however i want to display the name of object on which i have clicked or which is highlighted.
any ideas and thoughts?
When you say the name of the object do you mean the name of the ItemRenderer?
If that's the case one method you could use involves creating a custom event and a custom item renderer...
Create a custom ItemRenderer when clicked dispatch your CustomEvent which would a have a data property into which you can put anything you like.
I wrote a custom item editor for a datagrid in flex. My question is how to retrieve the pre-edited value of the datagrid cell after the item editor initializes and also in the custom item editors code.
I don't think it is possible to get the old value once you are in the item editor. I would do this manually by listening to the "itemEditBeginning" event and keeping a variable with the value of the cell. You can then reference that value through the "parent", "parentDocument" or "outerDocument" properties in the item editor, depending on whether you are using an inline item editor or a separate class.
In the "itemEditEnd" event you can access the old value as:
var oldValue:String = event.currentTarget.dataProvider[event.rowIndex].VALUE_FIELD;
and the new value as:
var txtControl:mx.controls.TextInput = event.currentTarget.itemEditorInstance as mx.controls.TextInput;
var newValue:String = txtControl.text;
If you are using a custom itemRenderer you need to change "mx.controls.TextInput" for your custom itemRenderer.