Let me start off by saying this is my first Flex project, so I've been reading a lot, learning a lot, but am still struggling to make this work.
I am trying to display records from an SQLite database within my Flex mobile application. I have the input form saving data correctly to the database, and I have a datagrid that is outputting the records (so I can confirm everything looks good). However, my problem is making the data readable.
I want the user to be able to select an identifier from either a drop down or a list (even if it's just a 1 column datagrid), and have the labels to the right update to reflect that information.
My thought was to have the datagrid setup as such:
<mx:DataGrid x="10" y="10" width="100" height="500" id="SiteSelector" dataProvider="{siteData}" includeIn="SiteDetails" change="SiteChoice(event)">
<mx:columns>
<mx:DataGridColumn headerText="Site Name" dataField="SiteName" />
</mx:columns>
</mx:DataGrid>
The datagrid shows the Site Name without issue from the database. The change function:
private function SiteChoice(event:ListEvent):void
{
var statement:SQLStatement = new SQLStatement();
statement.sqlConnection = connection;
statement.text = "SELECT * FROM SITES WHERE SITE_ID = ?"
statement.parameters[0] = SiteSelector.selectedItem.SITE_ID;
statement.execute();
siteDetails.source = statement.getResult().data;
}
I also have declared:
[Bindable] private var siteDetails:ArrayCollection = new ArrayCollection();
My question is, how do I get a label to reflect specific column data from the table? I believe I plug it with the siteDetails as the data provider, but how do I specify that I want, say for instance, the address or site contact to appear in a label?
<s:Label text="{siteDetails}" id="ExternalIPLBL"/>
I've been searching Google and the Adobe Developer Connection/livedocs/cookbooks pretty heavily over the last week and still have yet to come up with a working solution.
Try this:
first, you can display a field form an arraycollectiokn like this
siteDetails.getItemAt(0).Street}
The dynamic is the getItemAt(0) Value. Register an clickhandler to the datagrid and debug the event. Somewhere there, the selectedIndex is a part of that event.
By the way, id should start with small letters ->ExternalIPLBL
Set an Breakpoint in the eventhandler, try to find out, where your data are (selectedIndex) and set the label text in the eventhandler:
ExternalIPLBL.text = event.selectedIndex[Street].
BR
Frank
Related
I have created a custom button that will allow users to select with columns to output to CSV so the button is not created as part of the table initialization. I have a modal that pops up with checkboxes created off the column headers for selection. It is worth noting I have regex search on each column header. The issue is I am using server side processing and as a result the only exported rows are those visible. As a work around I have set it up to get the page.info().recordsDisplay and set the length of the page to that and draw. The modal pops up and says it is loading data from server once table is fully populated the HTML of the modal will change to the checkboxes for export. Once exported the table is reverted back to the default length. What I need to do is capture when the rows are fully rendered so I can do the HTML switch. Right now I am setting a timeout. The data can take a while to populate as there are some 13k rows if now search is applied. What is the best way to do this and is there a more efficient way?
var tableHeaders = [];
var table = $('#example').DataTable().columns().every( function () {
tableHeaders.push( $(this.header()).text() );
});
var pageLength = table.page.info().length;
table.context['0']._iDisplayLength = table.page.info().recordsDisplay;
table.draw();
There could be an issue with server-side processing parameters start/length that define the portion of data being requested from the server upon each draw.
If your source data has huge number of rows, chances are they're not sent all at once to make use of server-side processing. So, you can try to manipulate those parameters.
Alternatively, you may try to make use of draw event fired upon each redraw.
I am working in Ektron 8.6.
I have a FormBlock Server Control in my Template Page,It is having a DefualutFormID of a valid HTML form from workarea.The form in the workarea have got few form fields and their corresponding values.
While the template page is rendering I need to GET those form field values and re-set them with some other values.
In which Page –Cycle event I should do this coding?
I tried this code in Pre-Render Event,but I am unable to GET the value there,but I am able to set a value.
I tried SaveStateComplete event as well,no luck.
String s=FormBlock1.Fields["FirstName"].Value;
If(s=”some text”)
{
// Re-set as some other vale.
FormBlock1.Fields["FirstName"].Value=”Some other value”;
}
In which event I can write this piece of code?
Page_Load works fine for changing the value of a form field. The default behavior is for the Ektron server controls to load their data during Page_Init.
The real problem is how to get the default value. I tried every possible way I could find to get at the data defining an Ektron form (more specifically, a field's default value), and here's what I came up with. I'll admit, this is a bit of a hack, but it works.
var xml = XElement.Parse("<ekForm>" + cmsFormBlock.EkItem.Html + "</ekForm>");
var inputField = xml.Descendants("input").FirstOrDefault(i => i.Attribute("id").Value == "SampleTextField");
string defaultValue = inputField.Attribute("value").Value;
if (defaultValue == "The default value for this field is 42")
{
// do stuff here...
}
My FormBlock server control is defined on the ASPX side, nothing fancy:
<CMS:FormBlock runat="server" ID="cmsFormBlock" DynamicParameter="ekfrm"/>
And, of course, XElement requires the following using statement:
using System.Xml.Linq;
So basically, I wrap the HTML with a single root element so that it becomes valid XML. Ektron is pretty good about requiring content to be XHTML, so this should work. Naturally, this should be tested on a more complicated form before using this in production. I'd also recommend a healthy dose of defensive programming -- null checks, try/catch, etc.
Once it is parsed as XML, you can get the value property of the form field by getting the value attribute. For my sample form that I set up, the following was part of the form's HTML (EkItem.Html):
<input type="text" value="The default value for this field is 42" class="design_textfield" size="24" title="Sample Text Field" ektdesignns_name="SampleTextField" ektdesignns_caption="Sample Text Field" id="SampleTextField" ektdesignns_nodetype="element" name="SampleTextField" />
The TableContainer is declared in HTML like so:
<div dojoType="dojox.layout.TableContainer" jsId="myTable" id="myTable" cols="1">
<!-- stuff -->
</div>
I tried adding a row containing a TextBox programmatically like so:
var tb = new dijit.form.TextBox({
label: "Name"
});
myTable.addChild(tb);
The TextBox will be displayed below the table and no labels are shown. How can I place new rows with label inside the table?
I'm pretty sure this is a bug. It looks like once the TableContainer has been started the first time, adding children wont trigger a new layout() etc. A quick but hideous workaround would be to make the TableContainer "forget" that it has already been initialized and started, and then run startup() manually.
var tb = new dijit.form.TextBox({
label: "Name"
});
myTable.addChild(tb);
myTable._initialized = false;
myTable._started = false;
myTable.startup();
I take no responsibility for any unforeseen oddities this may cause though :-) Normally manipulating private members (the ones starting with an underscore) is a bad idea.
yeah there is some issue with tablecontainer ,the suggested work around for this issue would be
<div id='myTable'></div>
declare the div in the HTML but convert it into tableContainer in script then u can have the use of both the ways avoiding the bug
initialize the table container in script like
var myTable=new dojox.layout.TableCOntainer({cols:1},"myTable");
don't forget to startup our table container after adding the childrens
After this you can easily add any number of childs normally
I'm using Dojo 1.5 (including dojox). I have a dojox.grid.DataGrid where each row represents a user. When I click a row, I want to redirect to a URL like /users/USER_ID. The user ID is one of the fields in the grid, so all I need to do in my onRowClick callback is to grab the user ID for the row that was clicked.
The click event contains a rowIndex property, and, indeed, I found a (rather old) post elsewhere that suggested I should be able to do:
var row = dijit.byId('grid').model.getRow(e.rowIndex);
/* (Then grab the 0th field of the row, which is the user ID.) */
(Sorry, I've since lost the URL.)
But my grid object has no model attribute. What's up with that? Has the API changed? (My grid certainly is populated with data, which I can see, click, sort by column, et cetera).
So I'm stuck for now. Note, BTW, that it won't work to use rowIndex to directly access the grid's underlying dojo.data.ItemFileReadStore. That's because the grid is sortable, so there's no guarantee that the grid's rows will be in the same order as the store's.
Any hints would be deeply appreciated. I hope that the question is clear, and sufficiently general that any answers can help others in my predicament. Many thanks.
I have a similar scenario and I grab the value like this:
onRowClick: function(e) {
open_link(my_grid._getItemAttr(e.rowIndex, 'object_path'));
}
In this case my_grid is a reference to the datagrid and object_path is the column where I store the path to the object. open_link is of course a custom function of mine that as it implies, requests a server path.
So just change the specifics to suite your case and you should be fine.
I have two related ComboBoxes ( continents, and countries ). When the continents ComboBox changes I request a XML from a certain URL. When I receive that XML i change the DataProvider for the countries ComboBox, like this:
public function displayCountryArray( items:XMLList ):void
{
this.resellersCountryLoader.alpha = 0;
this.resellersCountry.dataProvider = items;
this.resellersCountry.dispatchEvent( new ListEvent( ListEvent.CHANGE ) );
}
I dispatch the ListEvent.CHANGE because I use it to change another ComboBox so please ignore that (and the 1st line ).
So, my problem is this: I select "ASIA" from the first continents, then the combobox DATA get's updated ( I can see that because the first ITEM is an item with the label '23 countries' ). I click the combo then I can see the countries.
NOW, I select "Africa", the first item is displayed, with the ComboBox being closed, then when I click it, the countries are still the ones from Asia. Anyway, if I click an Item in the list, then the list updates correctly, and also, it has the correct info ( as I said it affects other ComboBoxes ). SO the only problem is that the display list does not get updated.
In this function I tried these approaches
Converting XMLList to XMLCollection and even ArrayCollection
Adding this.resellersCountry.invalidateDisplayList();
Triggering events like DATA_CHANGE and UPDATE_COMPLETE
I know they don't make much sense, but I got a little desperate.
Please note that when I used 3.0.0 SDK this did not happen.
Sorry if I'm stupid, but the flex events are killing me.
Setting the dataprovider of the comboBox' dropdown seems to fix this problem.
this.resellersCountry.dataProvider = items;
this.resellersCountry.dropdown.dataProvider = items;
this.resellersCountry.dropdown.dataProvider = items;
works (Flex SDK 3.5)
Hope this bug fixed in 4.0
In addition to Christophe´s answer:
When you are using data binding in your ComboBox you need to use the BindingUtils to set the dropdown´s dataprovider:
MXML:
<mx:ComboBox id="cb_fontFamily"
width="100%"
dataProvider="{ model.fontFamilies }" />
Script:
private function init():void
{
BindingUtils.bindSetter(updateFontFamilies, model, "fontFamilies");
}
private function updateFontFamilies(fontFamilies:ArrayCollection):void
{
if (cb_fontFamily != null) cb_fontFamily.dropdown.dataProvider = fontFamilies;
}
Thanks to Christophe for pointing in the right direction.
Another workaround, outlined in an Adobe Community forum post, is to avoid re-assigning a different ArrayCollection object to the ComboBox, and instead re-using (and re-populating) the original one instead:
items.removeAll();
for each (var item:* in newItems)
{
items.addItem(item);
}