Go Back   CodingForums.com > :: Client side development > Flash & ActionScript > Adobe Flex

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-07-2011, 10:20 AM   PM User | #1
aghering
New to the CF scene

 
Join Date: Dec 2011
Posts: 5
Thanks: 1
Thanked 0 Times in 0 Posts
aghering is an unknown quantity at this point
Question numericstepper in datagrid with dynamic stepsize

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.
aghering is offline   Reply With Quote
Old 12-07-2011, 02:00 PM   PM User | #2
Inigoesdr
Super Moderator


 
Inigoesdr's Avatar
 
Join Date: Mar 2007
Location: Florida, USA
Posts: 3,604
Thanks: 2
Thanked 399 Times in 392 Posts
Inigoesdr is a jewel in the roughInigoesdr is a jewel in the roughInigoesdr is a jewel in the rough
Should be possible. Do you have your NumericStepper added already? If so post the code.
Inigoesdr is offline   Reply With Quote
Old 12-07-2011, 03:21 PM   PM User | #3
aghering
New to the CF scene

 
Join Date: Dec 2011
Posts: 5
Thanks: 1
Thanked 0 Times in 0 Posts
aghering is an unknown quantity at this point
this is how my datagrid mxml code looks like

Code:
<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>
aghering is offline   Reply With Quote
Old 12-08-2011, 02:08 AM   PM User | #4
Inigoesdr
Super Moderator


 
Inigoesdr's Avatar
 
Join Date: Mar 2007
Location: Florida, USA
Posts: 3,604
Thanks: 2
Thanked 399 Times in 392 Posts
Inigoesdr is a jewel in the roughInigoesdr is a jewel in the roughInigoesdr is a jewel in the rough
Here is one way to do it:
Code:
	<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>
Inigoesdr is offline   Reply With Quote
Users who have thanked Inigoesdr for this post:
aghering (12-13-2011)
Old 12-12-2011, 12:47 PM   PM User | #5
aghering
New to the CF scene

 
Join Date: Dec 2011
Posts: 5
Thanks: 1
Thanked 0 Times in 0 Posts
aghering is an unknown quantity at this point
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)
Code:
<?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>
Attached Thumbnails
Click image for larger version

Name:	error.jpg
Views:	60
Size:	49.4 KB
ID:	10597  

Last edited by aghering; 12-12-2011 at 01:21 PM..
aghering is offline   Reply With Quote
Old 12-12-2011, 03:51 PM   PM User | #6
aghering
New to the CF scene

 
Join Date: Dec 2011
Posts: 5
Thanks: 1
Thanked 0 Times in 0 Posts
aghering is an unknown quantity at this point
found the answer to problem, datagridcollumn expects a default of a .text value so i added the following to the datagridcollumn

Code:
editorDataField="value"

result:
<mx:DataGridColumn headerText="Aantal" editorDataField="value" dataField="product_amount" width=".10">
aghering is offline   Reply With Quote
Reply

Bookmarks

Tags
datagrid, dynamic, nummericstepper

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:47 PM.


Advertisement
Log in to turn off these ads.