Aug 17, 2017, 5:52 PM
[CLOSED] Grid image command column shifts grid cells
I have a grid with an image command column and Check box selection model. When you click the command column, everything shifts to the left, hiding the checkbox selection checkboxes. Then you have to click the command again to actually execute the command.
<%@ Page Language="vb" %>
<!DOCTYPE html>
<script runat="server">
Private ReadOnly Property TestData() As Object()
Get
Dim now As DateTime = DateTime.Now
Return New Object() {New Object() {"PC5a8AdEsKHJssf0dQSY0yq+YbvdbZh5gKZkr9oGZcI10gcqXrzw+fN6otHwujgdYpe8+6M/AEParkzJIvI3mPLG4Unt2mo0p370OuZUTpQbFaRU2NpWjQ==", "3m Co", 71.72, 0.02, 0.03, now},
New Object() {"Vzsg+QuKvBT+YrxSc4Fjo4PbnXc30rhsQyRK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QubnXc30rhsQyRK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsgnXc30rhsQyRK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+Y0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4Fjo4PbnXc30rhsQyRKP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4Fjo4PbnXc30rhsQyRK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxScK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4FnRzYx1JedUuIbn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4Fjo4Px1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4Fjo4Pn1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4Fjo4PbnXUu2Ibn5uVP68cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ==", "Boeing Co.", 75.43, 0.53, 0.71, now},
New Object() {"jWDvWMKf+WEkV9o+y/n5XiajTQtE2Hzv0VguMIxWRbbHkFtWKmkx4e3eFwGeLs7T7BrVxfHglj05sWJ8G7+MkaPdQHIoPdQP0KfLvSngH9BANF3EV1bwzA==", "Government Motors Corporation", 30.27, 1.09, 3.74, now}}
End Get
End Property
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not Ext.Net.X.IsAjaxRequest Then
Me.Store1.DataSource = Me.TestData
'attempt to select second row
Dim rowID As String = "Vz+EvcgoZ2PjG8HeRGsg+QuKvBT+YrxSc4Fjo4PbnXc30rhsQyRK0V2fnRzYx1JedUu2Ibn5uVP6a4G8cpltKVZz4kasruS0oSxq+GqxA1mhzS6kPE/2rQ=="
Dim sm As CheckboxSelectionModel = grdComposite.GetSelectionModel
sm.ClearSelection()
sm.SelectedRows.Add(New SelectedRow(rowID))
Ext.Net.X.Call("setGridPageById", rowID)
End If
End Sub
Protected Sub MyData_Refresh(sender As Object, e As StoreReadDataEventArgs)
Me.Store1.DataSource = Me.TestData
Me.Store1.DataBind()
End Sub
</script>
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var overIt = function () {
console.log('over handler');
}
<%-- var setGridPage = function() {
var grd = <%= grdComposite.ClientID%>;
grd.getStore().loadPage(grd.getStore().findPage(grd.getView().getSelection()[0]));
}--%>
var setGridPageById = function (recordId) {
var grd = <%= grdComposite.ClientID %>,
store = grd.getStore(),
idProperty = grd.getStore().getModel().idProperty,
record = store.findRecord(idProperty, recordId);
if (record) {
store.loadPage(store.findPage(record));
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:Viewport ID="vp1" runat="server" Layout="FitLayout" Scrollable="Both">
<Items>
<ext:GridPanel
ID="grdComposite"
runat="server"
Title="Grid"
BodyPadding="15"
Padding="10"
HeightSpec="100%"
>
<Store>
<ext:Store
ID="Store1"
runat="server"
RemoteSort="false"
OnReadData="MyData_Refresh"
PageSize="5">
<Model>
<ext:Model runat="server" IDProperty="EncryptedID">
<Fields>
<ext:ModelField Name="EncryptedID" />
<ext:ModelField Name="company" Type="string" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
<ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange" />
<ext:DateColumn
runat="server"
Text="Last Updated"
Width="120"
DataIndex="lastChange"
Format="HH:mm:ss" />
<ext:ImageCommandColumn width="50" Align="Center" runat="server" ID="cmdEditAllocation" >
<Commands>
<ext:ImageCommand
Icon="ApplicationEdit"
ToolTip-Text="Edit Allocation"
CommandName="edit" >
</ext:ImageCommand>
</Commands>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel
runat="server"
ID="grdCompositeSelectionModel"
AllowDeselect="false"
Mode="Single">
</ext:CheckboxSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
Last edited by fabricio.murta; Aug 21, 2017 at 5:12 PM.
