Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,642
    Thanks
    2
    Thanked 405 Times in 397 Posts
    Should be possible. Do you have your NumericStepper added already? If so post the code.

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Super Moderator Inigoesdr's Avatar
    Join Date
    Mar 2007
    Location
    Florida, USA
    Posts
    3,642
    Thanks
    2
    Thanked 405 Times in 397 Posts
    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>

  • Users who have thanked Inigoesdr for this post:

    aghering (12-13-2011)

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 Attached Thumbnails numericstepper in datagrid with dynamic stepsize-error.jpg  
    Last edited by aghering; 12-12-2011 at 01:21 PM.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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">


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •