I have a JQGRid with two hierarchical level. I want to perform row selection when I expand a subgrid from the parent, because if I click on the plus icons, the row of the master grid is not selected.
I am trying to fire this code whene the sub grid is expanded, but it doers not work:
function showSubGrid(subgrid_id, row_id)
{
jQuery("#<%= jqGrid.ClientID %>").setSelection(row_id, true);
showSubGrid_jqGrid(subgrid_id, row_id);
}
This javascript function is fired whene the subgrid is expanded from the parent. Here is my server side code:
<trirand:JQGrid ID="jqMasterGrid" runat="server" Height="400px" AutoWidth="False" OnSorting="jqMasterGrid_OnSorting">
<Columns>
<trirand:JQGridColumn DataField="COD_VALUTAZIONE" Width="220" HeaderText = "Codice Valutazione" PrimaryKey="True" Sortable="True" />
<trirand:JQGridColumn DataField="InfAsp" Width="170" TextAlign="Center" Sortable="True"/>
<trirand:JQGridColumn DataField="LineaAsp" Width="170" TextAlign="Center" Sortable="True"/>
<trirand:JQGridColumn DataField="SuperAsp" Width="170" TextAlign="Center" Sortable="True"/>
<trirand:JQGridColumn DataField="Eccellente" Width="170" TextAlign="Center" Sortable="True"/>
</Columns>
<ToolBarSettings
ShowAddButton="false" ShowDeleteButton="false" ShowEditButton="false" ShowRefreshButton="false"
ShowSearchButton="false" ShowViewRowDetailsButton="false" ToolBarPosition="Hidden" ShowSearchToolBar="False" ShowInlineDeleteButton="False" ShowInlineEditButton="True" />
<HierarchySettings HierarchyMode="Parent" />
<ClientSideEvents SubGridRowExpanded="showSubGrid"/>
<ClientSideEvents LoadComplete="jqLoadComplete"></ClientSideEvents>
<PagerSettings PageSize="2000" />
</trirand:JQGrid>
Can you please help?
Use this in your parent jqgrid:
HierarchySettings HierarchyMode="Parent" SelectOnExpand="true"
By using this code when you will expand a row in parent jqgrid then the row in parent jqgrid will be selected.
Okay try something like this
subGridRowExpanded: function (subgrid_id, row_id) {
$("#grid").jqGrid('setSelection', "row_id");
}
I can not test my code right now, but if this doesn't work then let me know.
Related
I have a data grid that that has a title, price, qty and total column. The title, price and qty data is loaded from an xml file and the total is populated with a labelFunction to multiply the price by the qty.
I'm able to populate the total for each row with a labelFunction by returning a string to the row under the total column, but I'm having trouble figuring out how to get the overall total for the total column. I'd like to get the overall total and display it in a textBox/somewhere else outside of the datagrid.
I'm able to get the total by using the updateEsimate function, but it'll only send the total using itemEditEnd on the datagrid (which means i'd have to click on eat qty row for it to tally up) and I'd like it to give me the total automatically once it loads.
Help Please!
(some sample code)
public function updateEstimate(event:DataGridEvent):void
{
// TODO Auto-generated method stub
var sum:Number = 0;
for(var i:int=0; i<orderGrid.dataProvider.length ; i++) {
sum += Number(orderGrid.dataProvider.getItemAt(i).total);
totaltxt.text = sum.toString();
}
totaltxt.text = sum.toString();
}
public function getTotal(item:Object, column:DataGridColumn):String
{
var sum:Number = item.price * item.quantity;
return sum.toString();
}
<mx:XMLListCollection id="xmlProdListColl"
source="{productXML.lastResult.offer}"
/>
</fx:Declarations>
<mx:DataGrid id="orderGrid" x="44" y="0" width="640" height="155"
dataProvider="{xmlProdListColl}"
doubleClickEnabled="true" editable="true"
itemEditEnd="orderGrid_itemEditEndHandler(event); updateEstimate(event)">
<mx:columns>
<mx:DataGridColumn headerText="Title" dataField="title" editable="false"/>
<mx:DataGridColumn headerText="Price" dataField="price" editable="false"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
<mx:DataGridColumn headerText="Total" labelFunction="getTotal" editable="false"/>
</mx:columns>
</mx:DataGrid>
<s:RichText id="totaltxt" width="147" height="84" fontSize="18" text="" textAlign="center"
verticalAlign="middle" />
From what i see you calculate the totals in getTotal() to display the totals but are not settings the "total" property in the actual object. And it is the total property that you use in updateEstimate(). So whenever you would edit the quantities you still would see correct total in the datagrid but the value in the textfield would remain the same
I am not a big fan of binded dataProviders because you never know when data is available and it's hard to modify it (like we need it here). I prefer my own dataProvider variables that are strong typed and that I can modify as I wish :)
So I would do it this way:
I assume, your XML looks somethign like this and you don't have the "total" value in it:
<root>
<lastResult>
<offer>
<title>Title</title>
<price>20</price>
<quantity>1</quantity>
</offer>
<offer>
<title>Title 2</title>
<price>30</price>
<quantity>2</quantity>
</offer>
</lastResult>
At some point in your code you will have your XML. This is where you modify it adding a total property and pass the dataProvider to the grid:
private var _orderDataProvider:XMLListCollection;
private function gotData():void
{
var list:XMLList = new XMLList(productXML.lastResult.offer);
_orderDataProvider = new XMLListCollection(list);
updateEstimate(); // call this before we assign the dataprovider to the grid, so we will have totals in items
orderGrid.dataProvider = _orderDataProvider;
}
public function updateEstimate(event:DataGridEvent = null):void
{
// update all totals in all items and the "Estimated total" in one go
var sum:Number = 0;
for (var i:int = 0; i < _orderDataProvider.length; i++)
{
var item:Object = _orderDataProvider.getItemAt(i);
item.total = item.quantity * item.price;
sum += Number(_orderDataProvider.getItemAt(i).total);
}
totaltxt.text = sum.toString();
}
MXML:
<mx:DataGrid id="orderGrid"
x="44"
y="0"
width="640"
height="155"
doubleClickEnabled="true"
editable="true"
itemEditEnd="updateEstimate(event)">
<mx:columns>
<mx:DataGridColumn headerText="Title"
dataField="title"
editable="false"/>
<mx:DataGridColumn headerText="Price"
dataField="price"
editable="false"/>
<mx:DataGridColumn headerText="Quantity"
dataField="quantity"/>
<mx:DataGridColumn headerText="Total"
dataField="total"
editable="false"/>
</mx:columns>
</mx:DataGrid>
<s:RichText id="totaltxt"
width="147"
height="84"
fontSize="18"
text=""
textAlign="center"
verticalAlign="middle"/>
Now as you see this is not the ideal code because we update totals in ALL items every time on edit although you edit only one entry but we don't have to mess with several functions, so as long as you don't have 1000 entries in your list it should be fine.
You can use the CollectionEvent on the XMLListCollection instead. This will get dispatched at the beginning and when any updates are made to the data:
public function updateEstimate(event:CollectionEvent):void{
// your update code
}
<mx:XMLListCollection id="xmlProdListColl"
collectionChange="updateEstimate(event)"
source="{productXML.lastResult.offer}"/>
Is it possible to select or deselect the check box ( silverlight devexpress grid check box ) based on Grid header checkbox column , using client side events or server side events.
Sample Code :
<dxg:GridControl.View>
<dxg:TableView NavigationStyle="Cell" VerticalContentAlignment="Top" AllowColumnFiltering="True" AllowFilterEditor="True" ShowTotalSummary="True" Foreground="Black" ShowGroupPanel="False" AllowEditing="False" >
</dxg:TableView>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="EID" Fixed="Left" Width="70" VerticalAlignment="Top" AllowFocus="False" FilterPopupMode="CheckedList"></dxg:GridColumn>
<dxg:GridColumn FieldName="EN" Header="Name" Width="180" AutoFilterCondition="Contains" Fixed="Left" VerticalAlignment="Top" AllowFocus="False" FilterPopupMode="CheckedList" />
<dxg:GridColumn FieldName="DOJ" Header="Date Of Joining" Width="110" AllowFocus="False" FilterPopupMode="CheckedList" />
<dxg:GridColumn FieldName="CEX" Width="170" Visible="True" AutoFilterCondition="Like" AllowFocus="False" FilterPopupMode="CheckedList" />
<dxg:GridColumn FieldName="CheckBoxColumn" Width="170" Visible="True" AutoFilterCondition="Like" AllowFocus="False" FilterPopupMode="CheckedList" />
</dxg:GridControl.Columns>
<dxg:GridControl.GroupSummary>
<dxg:GridSummaryItem SummaryType="Count" />
</dxg:GridControl.GroupSummary>
<dxg:GridControl.TotalSummary>
<dxg:GridSummaryItem FieldName="EID" ShowInColumn="EN" SummaryType="Count"/>
</dxg:GridControl.TotalSummary>
</dxg:GridControl>
You have to modify the cell template in order to achieve what you want.
It will be something like this:
<dxg:GridColumn VisibleIndex="38" Header="h1" FieldName="h1" Name="h1">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxe:CheckEdit IsChecked="True" HorizontalAlignment="Center">
</dxe:CheckEdit>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
After creating the new template you can access your Column and load its content in order to modify the element within it:
var checkBox = MyGrid.Columns["h1"].CellTemplate.LoadContent() as DevExpress.Xpf.Editors.CheckEdit
Then
checkBox.IsChecked = true
Hope it helps!
I'm using a spark Datagrid in an mobile Flex (4.6) application. When a row is selected in the grid I want to trigger a function and use the content of the selected item in that same function. This is my Datagrid
<s:DataGrid id="patientGrid" x="317" y="211" width="393" height="177"
dataProvider="{patientInfo}" gridClick="patientSelect(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="FirstName" headerText="First Name"/>
<s:GridColumn dataField="LastName" headerText="Last Name"/>
<s:GridColumn dataField="DateOfBirth" headerText="Date Of Birth"/>
<s:GridColumn dataField="Gender" headerText="Gender"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
And when a item is selected the patientselected function needs the ability to work with the content of that selected item.
I hope my question is clear, and thanks for helping!
Use the GridSelectionEvent.SELECTION_CHANGE event instead for two reasons:
it will provide information on which cells have been selected
it is fired whenever the selection changes (if you only react on mouse clicks, you ignore keyboard navigation/selection)
.
<s:DataGrid id="dg" selectionChange="onSelectionChange(event)" />
private function onSelectionChange(event:GridSelectionEvent):void {
var index:int = event.selectionChange.rowIndex;
var patient = dg.dataProvider.getItemAt(index);
patientSelect(patient);
}
I've got a simple app that is currently getting information form a database and just displaying the content into a datagrid.
Instead of having this information displayed in a datagrid, I'd like to display it in a couple of labels (first name, last name, phone, etc.), but I'm not really sure how to.
Currently on creationComplete I call my php query function - which looks like this.
public function getPeople() {
return mysql_query("SELECT * FROM tbl_people ORDER BY pers_name ASC");
}
Then I'm just putting my results into a datagrid
<mx:DataGrid id="empdg" x="22" y="184" dataProvider="{amfcall.getPeople.lastResult}" click="showName()">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="pers_id" editable="false"/>
<mx:DataGridColumn headerText="Name" dataField="pers_name"/>
<mx:DataGridColumn headerText="Image" dataField="pers_img"/>
<mx:DataGridColumn headerText="Job" dataField="pers_job"/>
<mx:DataGridColumn headerText="Bio" dataField="pers_bio"/>
</mx:columns>
</mx:DataGrid>
Eventually my query will be modified and will only ever return 1 row from the database. So how do I get the results to display in labels instead of the datagrid?
Your question is vague at best, but here's me trying anyway:
<s:Label text="First Name: {data.firstName}" />
<s:Label text="Last Name: {data.lastName}" />
<s:Label text="Phone: {data.phone}" />
I recommend you read up on how on to do binding and look up examples on data driven Flex application, like this one on my blog.
I have a datagrid with a single column rendered with another datagrid. I'm doing this to implement a rowspan-like display (with a hbox beneath the child datagrid) showing messages under each row.
When I tab and reach the end of a row, I want the focus to pass to the next row i.e the next child datagrid and on a specific cell of that row.
This is the simplified code calling the renderer :
<mx:DataGrid width="100%"
showHeaders="false"
selectable="false"
id="ParentDatagrid"
dataProvider="{arrayActs}"
paddingBottom="0" paddingTop="0"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn itemRenderer="components.ColumnRendererDatagrid"/>
</mx:columns>
</mx:DataGrid>
And the renderer (ColumnRendererDatagrid) code :
<mx:DataGrid
id="dgLocal" width="100%" height="23" borderSides=""
dataProvider="{data}" showHeaders="false"
editable="true" selectable="false">
<mx:columns>
<mx:DataGridColumn />
<mx:DataGridColumn />
<mx:DataGridColumn />
<mx:DataGridColumn />
<mx:DataGridColumn />
</mx:columns>
</mx:DataGrid>
<mx:HRule width="100%" />
<mx:Label id="message" text="Error Message" width="100%" />
For the moment, I'm using the following snippet in ColumnRendererDatagrid to check when tabbing reaches the end of the row and bubble up the event :
if(dgLocal.editedItemPosition.columnIndex == 13){
dispatchEvent(new Event(MOVE_FOCUS_DOWN, true));
From there I'm struggling on how to drill down into the renderer to set the focus once the higher component get this event. Any help would be really appreciated. Thx
Ok, here is the solution I came up with. This is the code in the parent's event handler (handling the MOVE_FOCUS_DOWN):
//Find the postition of the item that sent the event :
for each( var row:Object in ParentDatagrid.dataProvider ) {
if( (event.target as ColumnRendererDatagrid).data == row) {
break;
}
i++;
}
//Get the renderer of the next item :
var render:IListItemRenderer = ParentDatagrid.itemToItemRenderer(arrayActes.getItemAt(i+1));
(render as ColumnRendererDatagrid).dgLocal.editedItemPosition = {rowIndex:0, columnIndex:1}
(obviously checks should be made in real code to see if the next object exists) which is of type ColumnRendererDatagrid. From there I just set the focus/editing position.