I have used Struts2JqueryGrid and I did client side sorting by enable loadonce =true, but it will work while click the column header only. I want shot a column by default on pageload or gridload.
My code is
<sjg:grid id="grid_vehicleedit"
dataType="json"
href="%{remoteurl}"
loadonce="true"
gridModel="vchlst"
draggable="false"
hoverrows="false"
sortable="true"
viewrecords="true"
sortable="true"
>
<sjg:gridColumn name="vname" index="vname" sortable="true" title="Vehicle Name" key="true" />
<sjg:gridColumn name="imei" sorttype="int" sortable="true" title="Imei" index="imei" />
<sjg:gridColumn name="dtype" sortable="true" title="Splitter Type" width="80" index="dtype"/>
</sjg:grid>
Try adding these two attributes to your <sjg:grid> tag:
sortname="vname"
sortorder="asc"
And delete one of the occurrences of sortable="true". So you should end up with:
<sjg:grid id="grid_vehicleedit"
dataType="json"
href="%{remoteurl}"
loadonce="true"
gridModel="vchlst"
draggable="false"
hoverrows="false"
viewrecords="true"
sortable="true"
sortname="vname" // determines which column you want sorted on gridload
sortorder="asc" // default is ascending; use desc for descending
>
<sjg:gridColumn name="vname" index="vname" sortable="true" title="Vehicle Name" key="true" />
<sjg:gridColumn name="imei" index="imei" sorttype="int" sortable="true" title="Imei" />
<sjg:gridColumn name="dtype" index="dtype" sortable="true" title="Splitter Type" width="80" />
</sjg:grid>
Related
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 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.
<ext:Store ID="StoreSample" runat="server" RemotePaging="true" RemoteSort="true" AutoLoad="true"
ShowWarningOnFailure="false" >
<Proxy>
<ext:HttpProxy Url="~/Samples/OpenEdit/GetSampleList" Json="true">
</ext:HttpProxy>
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Id" Root="data">
<Fields>
<ext:RecordField Name="Id" Type="Int">
</ext:RecordField>
<ext:RecordField Name="SampleDescription" Mapping="Description">
</ext:RecordField>
<ext:RecordField Name="SampleStartDate" Mapping="StartDate" Type="Date">
</ext:RecordField>
<ext:RecordField Name="SampleEndDate" Mapping="EndDate" Type="Date" >
</ext:RecordField>
</Fields>
</ext:JsonReader>
</ext:Store>
In this store the fields SampleStartDate and SampleEndDate are of type Nullabe Datetime (Datetime?) in the model. In controller i am getting value for every field and i am converting this to StoreResult in the function GetSampleList. But in store i am always getting the value as 'undefined' in these two fields. But if i change the datatype from Datetime? to DateTime the in model i am getting all the values in store.
Can any one help me to get the nullable datetime value in store?
i am using this store in GridPanel
<Sample:GridPanel ID="GridPanelSample" runat="server" StoreID="StoreSample" Header="false"
AnchorHorizontal="right" AnchorVertical="96%" StandardPager="true" MonitorResize="true" TabIndex="15">
<TopBar>
</TopBar>
<ColumnModel>
<Columns>
<ext:Column runat="server" ColumnID="SampleDescription" Header="Description"
DataIndex="SampleDescription">
</ext:Column>
<ext:DateColumn runat="server" ColumnID="SampleStartDate" Header="StartDate"
DataIndex="SampleStartDate" Format="d MMM Y">
</ext:DateColumn>
<ext:DateColumn runat="server" ColumnID="SampleEndDate" Header="EndDate"
DataIndex="SampleEndDate" Format="d MMM Y">
</ext:DateColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true"
MoveEditorOnEnter="true">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:LockingGridView runat="server" ID="gridview1" />
</View>
<Listeners>
<ViewReady Handler="openEdit.setOpenEditGridColumnWidths();"></ViewReady>
</Listeners>
</Sample:GridPanel>
But SampleStartDate and SampleEndDate column is always empty
I think you need to configure the .DateFormat property of the <ext:RecordField>.
Example
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M$" />
Setting .DateFormat="M$" will automatically parse the "/Date(123...)/" value into a JavaScript Date object.
Hope this helps.
Finally i found the solution.
It was because i didn't covert the date type. It was always returning Microsoft AJAX serialized dates (Eg "/Date(1313467512730+0530)/"). This date i need to convert like "2011-08- 15T00:00:00:000". For this i used convert handler.
Code is like
<ext:RecordField Name="SampleStartDate" Mapping="StartDate" Type="Date">
<Convert Handler="return new Date(parseInt(value.substr(6)))" />
</ext:RecordField>
Then i am getting the nullable datetime field values in store.
Hope it will help you also
Thanks
I am using devexpress asp:GridView in asp.net with two columns: "status" and "percentage"
The column "status" is a GridViewDataComboBoxColumn which contain two values: "progress" and "completed"
The column "percentage" is a GridViewDataColumn.
What I want to do is:
If I select completed in status then the percentage should display the text '100'.
but I don't know how to trigger combobox events which is present inside asp:GridView
The code I have (so far) is:
<dxwgv:ASPxGridView ID="gridviewTaskProg" runat="server"
AutoGenerateColumns="False" DataSourceID="SqlDataSourceTasks"
onbeforeperformdataselect="gridviewTaskProg_BeforePerformDataSelect"
onrowupdating="gridviewTaskProg_RowUpdating" KeyFieldName="intProgressID"
oninitnewrow="gridviewTaskProg_InitNewRow"
onrowinserting="gridviewTaskProg_RowInserting"
oncancelrowediting="gridviewTaskProg_CancelRowEditing"
onstartrowediting="gridviewTaskProg_StartRowEditing">
<Columns>
<dxwgv:GridViewCommandColumn VisibleIndex="0">
<EditButton Visible="True">
</EditButton>
</dxwgv:GridViewCommandColumn>
<dxwgv:GridViewDataDateColumn FieldName="StartDateTime" VisibleIndex="1">
<PropertiesDateEdit DisplayFormatString="dd/MM/yyyy hh:mm tt"
EditFormat="Custom" EditFormatString="dd/MM/yyyy hh:mm tt"></PropertiesDateEdit>
</dxwgv:GridViewDataDateColumn>
<dxwgv:GridViewDataDateColumn FieldName="EndDateTime" VisibleIndex="2">
<PropertiesDateEdit DisplayFormatString="dd/MM/yyyy hh:mm tt"
EditFormat="Custom" EditFormatString="dd/MM/yyyy hh:mm tt"
dateonerror="Today"></PropertiesDateEdit>
</dxwgv:GridViewDataDateColumn>
<dxwgv:GridViewDataSpinEditColumn FieldName="Percentage" VisibleIndex="3">
<PropertiesSpinEdit DisplayFormatString="g" NumberFormat="Custom"></PropertiesSpinEdit>
</dxwgv:GridViewDataSpinEditColumn>
<dxwgv:GridViewDataComboBoxColumn FieldName="Status" VisibleIndex="4">
<PropertiesComboBox ValueType="System.String"><Items><dxe:ListEditItem Text="Progress" Value="Progress" /><dxe:ListEditItem Text="Completed" Value="Completed"/></Items></PropertiesComboBox>
</dxwgv:GridViewDataComboBoxColumn>
<dxwgv:GridViewDataMemoColumn Caption="Remarks" FieldName="Remarks"
VisibleIndex="5">
</dxwgv:GridViewDataMemoColumn>
</Columns>
</dxwgv:ASPxGridView>
Set grid ClientInstanceName to "grid1" (or any other name, just replace it in my code). Change status combo box column as follows:
<dxwgv:GridViewDataComboBoxColumn FieldName="Status" VisibleIndex="4">
<PropertiesComboBox ValueType="System.String">
<Items>
<dxe:ListEditItem Text="Progress" Value="Progress" />
<dxe:ListEditItem Text="Completed" Value="Completed"/>
</Items>
<ClientSideEvents
SelectedIndexChanged="function(s,e) {
if(s.GetValue()=='Completed')
grid1.GetEditor('Percentage').SetValue(100);
}"
/>
</PropertiesComboBox>
</dxwgv:GridViewDataComboBoxColumn>
How can i change the readonly property of 'percentage'?
#Filip: Exactly!
<ClientSideEvents SelectedIndexChanged="function(s, e) {
if(s.GetValue() == 'Completed') {
var txtEditor = grid1.GetEditor('Percentage');
txtEditor.SetValue(100);
txtEditor.SetEnabled(false);
}
}" />
I have a 'status' cluster of three columns. I want to have the header row span all three. I know I can use the colspan="3" parameter with the th tag in HTML. How do I accomplish this with BoundField?
Sample code snippet as it exists now...
<asp:BoundField DataField="Priority" HeaderText="Priority" />
<asp:TemplateField ItemStyle-Width="50">
<ItemTemplate>
<asp:ImageButton ID="btnMinus" CommandName="minus" runat="server" ImageUrl="~/Images/arrowUp_ico.gif" BorderWidth="1" BorderStyle="Ridge" />
<asp:ImageButton ID="btnPlus" CommandName="plus" runat="server" ImageUrl="~/Images/arrowDown_ico.gif" BorderWidth="1" BorderStyle="Ridge" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProjectName" HeaderText="Project" />
<asp:BoundField DataField="Group" HeaderText="Group" />
<asp:BoundField DataField="Assigned" HeaderText="Assigned" />
...etc.
I need the header text 'Priority' to span the itself and the next two columns.
As is usual for me, when it takes a long time to get an answer I figure it out myself. The solution is to go to the code behind in the init section (or equivalent, depending on your project) and add two lines...
myDataGrid.HeaderRow.Cells[n].ColumnSpan = 2;
MyDataGrid.HeaderRow.Cells[n+1].Visible = false;
This extends the first header cell (n) out to be two columns wide and removes the adjacent one. If you leave out the second line the header for that column just gets pushed to the right.