...

View Full Version : numericstepper in datagrid with dynamic stepsize



aghering
12-07-2011, 10:20 AM
hello,

i have a datagrid where it gets his records from a MySQL server using php, now i want to add numeric stepper for one of the columns. where this isnít the problem where i get stuck.

The problem that Iím having is that I want the stepSize to be dynamic. I want to solve this using the following method. Each record has a value named product_multiplier this contains the value of what the stepsize needs follow.

To give a better image of what I am dealing with I will gave a example:
Lets say I have 3 records,
Product name, price, amount, multiplier
Pencils, 1.00, 5,5
Sheets, 2.50,1,1
Cups, 4.00, 6, 6

Each record have a different multiplier and so I want that the numeric stepsize to adjust to the record it is editing. Is this possible and can I get an example to accomplish this.

Inigoesdr
12-07-2011, 02:00 PM
Should be possible. Do you have your NumericStepper added already? If so post the code.

aghering
12-07-2011, 03:21 PM
this is how my datagrid mxml code looks like



<mx:DataGrid id="DG_orderProducts" textAlign="center" dragMoveEnabled="true" dropEnabled="true" editable="true"
itemEditEnd="updateCellInfo(event);" dragDrop="dragDropHandler(event);" width="992" x="4" height="211" y="431">
<mx:columns>
<mx:DataGridColumn headerText="Product Beschrijving" dataField="product_name" width=".30" editable="false" sortDescending="true"/>
<mx:DataGridColumn headerText="eenheid" dataField="product_unit" width=".10" editable="false"/>
<mx:DataGridColumn headerText="prijs, ex btw" dataField="product_price" width=".10"/>
<mx:DataGridColumn headerText="Aantal" dataField="product_amount" width=".10">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper stepSize="1" minimum="1" maximum="9900"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="btw Totaal" dataField="product_taxtotal" width=".10" editable="false"/>
<mx:DataGridColumn headerText="sub Totaal" dataField="product_subtotal" width=".10" editable="false"/>
<mx:DataGridColumn headerText="Product Totaal" dataField="product_pricetotal" width=".10" editable="false"/>
</mx:columns>
</mx:DataGrid>

Inigoesdr
12-08-2011, 02:08 AM
Here is one way to do it:

<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.DataGridEvent;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.NumericStepper;

// Handle the itemEditBegin event.
private function modifyEditedData(event:DataGridEvent):void
{
// Get the name of the column being editted.
var colName:String = DG_orderProducts.columns[event.columnIndex].dataField;

if(colName == "product_amount")
{
// Handle the event here.
event.preventDefault();

// Creates an item editor.
DG_orderProducts.createItemEditor(event.columnIndex,event.rowIndex);

// All item editors must implement the IDropInListItemRenderer interface
// and the listData property.
// Initialize the listData property of the editor.
IDropInListItemRenderer(DG_orderProducts.itemEditorInstance).listData =
IDropInListItemRenderer(DG_orderProducts.editedItemRenderer).listData;

// Copy the cell value to the NumericStepper control.
DG_orderProducts.itemEditorInstance.data = DG_orderProducts.editedItemRenderer.data;

// Update the step size
NumericStepper(DG_orderProducts.itemEditorInstance).stepSize = DG_orderProducts.selectedItem.product_multiplier;
}
}

]]>
</mx:Script>

<mx:DataGrid id="DG_orderProducts" textAlign="center" dragMoveEnabled="true" dropEnabled="true" editable="true"
itemEditBegin="modifyEditedData(event);" itemEditEnd="updateCellInfo(event);" dragDrop="dragDropHandler(event);" width="992" x="4" height="211" y="431">
<mx:columns>
<mx:DataGridColumn headerText="Product Beschrijving" dataField="product_name" width=".30" editable="false" sortDescending="true"/>
<mx:DataGridColumn headerText="eenheid" dataField="product_unit" width=".10" editable="false"/>
<mx:DataGridColumn headerText="prijs, ex btw" dataField="product_price" width=".10"/>
<mx:DataGridColumn headerText="Aantal" dataField="product_amount" width=".10">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper stepSize="1" minimum="1" maximum="9900"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="btw Totaal" dataField="product_taxtotal" width=".10" editable="false"/>
<mx:DataGridColumn headerText="sub Totaal" dataField="product_subtotal" width=".10" editable="false"/>
<mx:DataGridColumn headerText="Product Totaal" dataField="product_pricetotal" width=".10" editable="false"/>
</mx:columns>
</mx:DataGrid>

aghering
12-12-2011, 12:47 PM
hi,
sorry for the late respons but i have been sick.
thank for your reply and try what you have posted. i will give a respons if it works.

i have implemented your suggestion and at first i had a problem because my itemeditend was still using text input so it gave a problem.
i changed all the controls referring to a textinput control. after that adobe flex didn't show any errors in the code but when testing the application
after i update the amount with the numericstepper that works fine. i get a flash error and i guess it has to do with the itemeditend function but can't see the problem.

i will post my entire code so you can see how i am working (i am still a beginner with flex 3 and as3 so i expect that it isn't superclean)


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="initProducts();" width="1000" height="652">
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.events.DataGridEvent;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.managers.PopUpManager;
public var callerProducts:manage_order;
import mx.events.MenuEvent;
import mx.collections.*;
[Bindable]
public var menuBarCollection:XMLListCollection;
import mx.events.FlexEvent;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.NumericStepper;

public function initProducts():void // verkrijg records van database
{ Gateway.call(onProducts, "Products.Product");
menuBarCollection = new XMLListCollection(menubarXML); }

public function onProducts(r:Object):void // vul datagrid met de records verkregen van init()
{ DG_products.dataProvider = r; }

public function category_menu(q:String):void
{ Gateway.call(onProducts, "Products.Product", q); }

private var menubarXML:XMLList =
<>
<menuitem label="Alle producten" data="top">
<menuitem label="Alle producten" data="cat_all"/>
</menuitem>

<menuitem label="Gehakt" data="top">
<menuitem label="Gehakt" data="cat_gehakt"/>
</menuitem>

<menuitem label="Gourmetschotel" data="top">
<menuitem label="Gourmetschotel" data="cat_gourmet"/>
</menuitem>

<menuitem label="Kant en klaar maaltijden" data="top">
<menuitem label="Kant en klaar maaltijden" data="cat_maaltijden"/>
</menuitem>

<menuitem label="Rollades" data="top">
<menuitem label="Rollades" data="cat_rollades"/>
</menuitem>
<menuitem label="Vlees" data="top">
<menuitem label="kalfs" groupName="vlees" data="cat_kalfs"/>
<menuitem label="kip" groupName="vlees" data="cat_kip"/>
<menuitem label="lams" groupName="vlees" data="cat_lams"/>
<menuitem label="rund" groupName="vlees" data="cat_rund"/>
<menuitem label="varken" groupName="vlees" data="cat_varken"/>
<menuitem label="kalkoen" groupName="vlees" data="cat_kalkoen"/>
<menuitem label="wild" groupName="vlees" data="cat_wild"/>
</menuitem>

<menuitem label="Vleeswaren" data="top">
<menuitem label="Vleeswaren" data="cat_vleeswaren"/>
</menuitem>

<menuitem label="Vlugklaar" data="top">
<menuitem label="Vlugklaar" data="cat_vlugklaar"/>
</menuitem>

<menuitem label="Tapas" data="top">
<menuitem label="Tapas" data="cat_tapas"/>
</menuitem>

</>;

private function menuHandler(event:MenuEvent):void {
if (event.item.@data != "top")
{
switch(String(event.item.@data))
{
case "cat_all":
category_menu("" as String);
break;
case "cat_vleeswaren":
category_menu(" AND product_category = 'vleeswaren' " as String);
break;
case "Gehakt":
category_menu(" AND product_category = 'gehakt' " as String);
break;
case "cat_gourmet":
category_menu(" AND product_category = 'gourmetschotel' " as String);
break;
case "cat_maaltijden":
category_menu(" AND product_category = 'maaltijden kant en klaar' " as String);
break;
case "cat_rollades":
category_menu(" AND product_category = 'rollades' " as String);
break;
case "cat_kalfs":
category_menu(" AND product_category = 'kalfsvlees' " as String);
break;
case "cat_kip":
category_menu(" AND product_category = 'kip' " as String);
break;
case "cat_lams":
category_menu(" AND product_category = 'lams' " as String);
break;
case "cat_rund":
category_menu(" AND product_category = 'rundvlees' " as String);
break;
case "cat_varken":
category_menu(" AND product_category = 'varkenvlees' " as String);
break;
case "cat_kalkoen":
category_menu(" AND product_category = 'kalkoen' " as String);
break;
case "cat_wild":
category_menu(" AND product_category = 'wild' " as String);
break;
case "cat_vlugklaar":
category_menu(" AND product_category = 'vlugklaar' " as String);
break;
case "cat_tapas":
category_menu(" AND product_category = 'tapas' " as String);
break;
}
}
}

private function clean_orderProducts():void
{
DG_orderProducts.dataProvider = null
Gateway.call(onProducts, "Products.Product");
}

public function dragDropHandler(event:DragEvent):void
{
var dragObj:Array= event.dragSource.dataForFormat("items") as Array;
if(dragObj[0].product_unit != "gram")
{
dragObj[0].product_amount = 1;
dragObj[0].product_taxtotal = Math.round( (dragObj[0].product_amount * dragObj[0].product_price / 100) * dragObj[0].product_tax * 100 ) /100;
dragObj[0].product_subtotal = Math.round( (dragObj[0].product_amount * dragObj[0].product_price) * 100 ) /100;
dragObj[0].product_pricetotal = Math.round( ( dragObj[0].product_subtotal + dragObj[0].product_taxtotal ) * 100) /100;
}
else
{
var Calc_Amount:Number = dragObj[0].product_amount

dragObj[0].product_taxtotal = Math.round( (dragObj[0].product_amount * dragObj[0].product_price / Calc_Amount / 100) * dragObj[0].product_tax * 100 ) /100;
dragObj[0].product_subtotal = Math.round( (dragObj[0].product_amount * dragObj[0].product_price / Calc_Amount) * 100 ) /100;
dragObj[0].product_pricetotal = Math.round( ( dragObj[0].product_subtotal + dragObj[0].product_taxtotal ) * 100) /100;
}
}


// Handle the itemEditBegin event.
private function modifyEditedData(event:DataGridEvent):void
{
// Get the name of the column being editted.
var colName:String = DG_orderProducts.columns[event.columnIndex].dataField;

if(colName == "product_amount")
{
// Handle the event here.
event.preventDefault();

// Creates an item editor.
DG_orderProducts.createItemEditor(event.columnIndex,event.rowIndex);

// All item editors must implement the IDropInListItemRenderer interface
// and the listData property.
// Initialize the listData property of the editor.
IDropInListItemRenderer(DG_orderProducts.itemEditorInstance).listData =
IDropInListItemRenderer(DG_orderProducts.editedItemRenderer).listData;

// Copy the cell value to the NumericStepper control.
DG_orderProducts.itemEditorInstance.data = DG_orderProducts.editedItemRenderer.data;

// Update the step size
NumericStepper(DG_orderProducts.itemEditorInstance).stepSize = DG_orderProducts.selectedItem.product_multiplier;
}
}

private function updateCellInfo(event:DataGridEvent):void
{
var grid:DataGrid = event.target as DataGrid;
var field:String = event.dataField;
var row:Number = Number(event.rowIndex);

var myEditor:NumericStepper = NumericStepper(event.currentTarget.itemEditorInstance);
var newAmnt:Number;
var newPrice:Number;

var VAT:Number = Number(grid.dataProvider.getItemAt(row)['product_tax']);
var Unit:String = grid.dataProvider.getItemAt(row)['product_unit'];

switch(field)
{
case 'product_amount':
newAmnt = Number(myEditor.value);
newPrice = Number(grid.dataProvider.getItemAt(row)['product_price']);
break;
case 'product_price':
newPrice = Number(myEditor.value);
newAmnt = Number(grid.dataProvider.getItemAt(row)['product_amount']);
break;
}

if (Unit == 'gram')
{
var CalcAmount:Number;
CalcAmount = Number(grid.dataProvider.getItemAt(row)['product_multiplier']);

grid.dataProvider.getItemAt(row)['product_taxtotal'] = Math.round( (newAmnt * newPrice / CalcAmount / 100) * VAT * 100 ) /100;
grid.dataProvider.getItemAt(row)['product_subtotal'] = Math.round( (newAmnt * newPrice / CalcAmount) * 100 ) /100;
grid.dataProvider.getItemAt(row)['product_pricetotal'] = Math.round( ( Number(grid.dataProvider.getItemAt(row)['product_taxtotal']) + Number(grid.dataProvider.getItemAt(row)['product_subtotal']) ) * 100 ) /100;
}
else
{
grid.dataProvider.getItemAt(row)['product_taxtotal'] = Math.round( (newAmnt * newPrice / 100) * VAT * 100 ) /100;
grid.dataProvider.getItemAt(row)['product_subtotal'] = Math.round( (newAmnt * newPrice) * 100 ) /100;
grid.dataProvider.getItemAt(row)['product_pricetotal'] = Math.round( ( Number(grid.dataProvider.getItemAt(row)['product_taxtotal']) + Number(grid.dataProvider.getItemAt(row)['product_subtotal']) ) * 100 ) /100;
}
}
]]>
</mx:Script>
<mx:MenuBar labelField="@label" itemClick="menuHandler(event);" dataProvider="{menuBarCollection}" height="34" top="0" left="0" width="100%" color="#030303" fillAlphas="[0.75, 0.5, 0.8, 0.8]" fillColors="[#F1ECEC, #FEFEFE]" fontSize="12" fontWeight="bold"/>

<mx:HRule width="992" x="8" height="4" y="419"/>
<mx:Label text="Geselecteerd" top="401" left="10" right="897" bottom="241"/>
<mx:Label text="klik op prijs of aantal om deze aan te passen" textAlign="right" fontSize="9" color="#D7D9D9" bottom="232" top="401" left="666" right="108"/>
<mx:DataGrid id="DG_orderProducts" textAlign="center" dragMoveEnabled="true" dropEnabled="true" editable="true"
itemEditBegin="modifyEditedData(event);" itemEditEnd="updateCellInfo(event);" dragDrop="dragDropHandler(event);" width="992" x="4" height="211" y="431">
<mx:columns>
<mx:DataGridColumn headerText="Product Beschrijving" dataField="product_name" width=".30" editable="false" sortDescending="true"/>
<mx:DataGridColumn headerText="eenheid" dataField="product_unit" width=".10" editable="false"/>
<mx:DataGridColumn headerText="prijs, ex btw" dataField="product_price" width=".10"/>
<mx:DataGridColumn headerText="Aantal" dataField="product_amount" width=".10">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper stepSize="1" minimum="1" maximum="9900"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="btw Totaal" dataField="product_taxtotal" width=".10" editable="false"/>
<mx:DataGridColumn headerText="sub Totaal" dataField="product_subtotal" width=".10" editable="false"/>
<mx:DataGridColumn headerText="Product Totaal" dataField="product_pricetotal" width=".10" editable="false"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Opschonen" id="btn_orderProductsClean" width="93" height="16" click="clean_orderProducts();" x="900" y="401"/>

<mx:DataGrid id="DG_products" textAlign="center" dragEnabled="true" dragMoveEnabled="true" width="100%" x="0" height="318" y="42">
<mx:columns>
<mx:DataGridColumn headerText="Product Beschrijving" dataField="product_name" width=".35"/>
<mx:DataGridColumn headerText="eenheid" dataField="product_fullunit" width=".12"/>
<mx:DataGridColumn headerText="prijs, inc btw" dataField="product_price_inc" width=".10"/>
<mx:DataGridColumn headerText="categorie" dataField="product_category" width=".10"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>

aghering
12-12-2011, 03:51 PM
found the answer to problem, datagridcollumn expects a default of a .text value so i added the following to the datagridcollumn



editorDataField="value"

result:
<mx:DataGridColumn headerText="Aantal" editorDataField="value" dataField="product_amount" width=".10">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum