Hi!
I have a grid with drag and drop rows, all is works correclty but i have a bug.
I need show the "spot line" such as captura.
It is special css??
this is my code:
<div class="tabContainter">
<telerik:RadCodeBlock ID="codeBlock" runat="server">
<script type="text/javascript">
function GridCreated(sender, eventArgs) {sender.add_rowDragging(RowDraggingIcon);}
function RowDraggingIcon(sender, eventArgs) { rowDraggingIcon(sender, eventArgs); }
</script>
</telerik:RadCodeBlock>
<div class="exampleView">
<div class="title">
<asp:Label ID="lblShowAsTitle" runat="server" />
</div>
<div class="label">
<asp:Label ID="lblShowAS" runat="server" />
</div>
</div>
<div class="clear">
</div>
<div class="exampleView">
<div id="Manage" runat="server" class="exampleView">
<telerik:RadGrid runat="server" ID="MyGrid" AutoGenerateColumns="false" Skin="Vista"
AllowMultiRowSelection="True" PageSize="10" AllowPaging="true" EnableViewState="false">
<MasterTableView DataKeyNames="StringMaskId,Id" CommandItemDisplay="Top" EditMode="InPlace">
<Columns>
<telerik:GridClientSelectColumn CommandName="Select" UniqueName="Select" HeaderStyle-Width="30px"
Resizable="false" />
<telerik:GridEditCommandColumn HeaderStyle-Width="25px" UniqueName="EditCommandColumn"
ButtonType="ImageButton" EditImageUrl="/UI/Images/grid_edit.png" Resizable="false">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn UniqueName="btnDelete" ConfirmDialogType="RadWindow" ButtonType="ImageButton"
CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="300px" HeaderStyle-Width="25px"
Resizable="false" ImageUrl="/UI/Images/cross.png" />
<telerik:GridTemplateColumn DataField="Id" HeaderText="Id" UniqueName="Id" Visible="false"
ConvertEmptyStringToNull="true">
<InsertItemTemplate>
<telerik:RadTextBox ID="lblId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Id") %> '
Width="150px" ReadOnly="true" Enabled="false" CssClass="labelGrid" />
</InsertItemTemplate>
<EditItemTemplate>
<telerik:RadTextBox ID="txtId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Id") %> '
Width="150px" CssClass="labelGrid" ReadOnly="true" />
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="Position" HeaderText="Position" UniqueName="Position" Visible="false" HeaderStyle-Width="1px"
ConvertEmptyStringToNull="true">
<EditItemTemplate>
<asp:Label ID="lblPosition" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Position") %> '
Width="150px" CssClass="labelGrid" ReadOnly="true" />
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Position") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Type" DataField="TypeId">
<EditItemTemplate>
<telerik:RadComboBox runat="server" ID="cbType" EnableLoadOnDemand="True" DataTextField="CDetailText"
DataValueField="CDetailId" HighlightTemplatedItems="true" Width="90%" CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="cbType_SelectedIndexChanged"/>
<br />
<asp:RequiredFieldValidator ID="frSecurity" runat="server" ErrorMessage="*" CssClass="validator"
Display="Dynamic" ControlToValidate="cbType"></asp:RequiredFieldValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblDatatype" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Type") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Char" DataField="Char" HeaderStyle-Width="80px" FilterControlWidth="40px" >
<EditItemTemplate>
<telerik:RadTextBox ID="txtChar" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Char") %> '
Width="50px" CssClass="labelGrid" MaxLength="1" />
<br />
<asp:CustomValidator ID="cvChar" runat="server" ErrorMessage="*" CssClass="validator"
Display="Dynamic" ControlToValidate="txtChar" OnServerValidate="cvChar_ServerValidate"></asp:CustomValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblChar" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Char") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Match" DataField="MatchId">
<EditItemTemplate>
<telerik:RadComboBox runat="server" ID="cbMatch" EnableLoadOnDemand="True" DataTextField="CDetailText"
DataValueField="CDetailId" HighlightTemplatedItems="true" Width="90%" CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="cbMatch_SelectedIndexChanged"/>
<br />
<asp:RequiredFieldValidator ID="frMatch" runat="server" ErrorMessage="*" CssClass="validator"
Display="Dynamic" ControlToValidate="cbMatch"></asp:RequiredFieldValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblMatch" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Match") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Amount" DataField="Amount" HeaderStyle-Width="110px" FilterControlWidth="40px">
<EditItemTemplate>
<telerik:RadNumericTextBox ID="txtAmount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Amount") %> '
CssClass="labelGrid" ShowSpinButtons="true" Width="50px" Type="Number" MinValue="0"
MaxValue="99">
<NumberFormat GroupSeparator="" DecimalDigits="0" />
</telerik:RadNumericTextBox>
<br />
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblAmount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Amount") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<CommandItemTemplate>
<div class="quickAdd">
<asp:LinkButton ID="lnkqQuitInsert" runat="server" CommandName="InitInsert">
<asp:ImageButton ID="imgQuickAdd" runat="server" ImageUrl="/UI/Images/add.png" />
<asp:Label ID="lblQuickAdd" runat="server" /></asp:LinkButton>
<asp:LinkButton ID="lnkDeleteSelected" CommandName="SelectRow" runat="server" OnClick="DeleteSelectedItems">
<asp:ImageButton ID="imgDeleteSelected" runat="server" ImageUrl="/UI/Images/cross.png" />
<asp:Label ID="lblDeleteSelected" runat="server" /></asp:LinkButton>
<asp:LinkButton ID="lnkDeleteAllValues" runat="server" OnClick="DeleteValues">
<asp:ImageButton ID="imgDeleteAllValues" runat="server" ImageUrl="/UI/Images/delete_all.png" />
<asp:Label ID="lblDeleteAllValues" runat="server" /></asp:LinkButton>
</div>
</CommandItemTemplate>
</MasterTableView>
<ClientSettings AllowRowsDragDrop="True">
<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
<PagerStyle Mode="NumericPages" />
</telerik:RadGrid>
</div>
</div>
</div>
the js file:
function rowDraggingIcon(sender, eventArgs) {
var row = sender._draggedRow;
row.innerHTML = "<img src='/UI/Images/fields.png' />";
row.style.width = 0 + "px";
row.style.height = 0 + "px";
}
thanks
I have a grid with drag and drop rows, all is works correclty but i have a bug.
I need show the "spot line" such as captura.
It is special css??
this is my code:
<div class="tabContainter">
<telerik:RadCodeBlock ID="codeBlock" runat="server">
<script type="text/javascript">
function GridCreated(sender, eventArgs) {sender.add_rowDragging(RowDraggingIcon);}
function RowDraggingIcon(sender, eventArgs) { rowDraggingIcon(sender, eventArgs); }
</script>
</telerik:RadCodeBlock>
<div class="exampleView">
<div class="title">
<asp:Label ID="lblShowAsTitle" runat="server" />
</div>
<div class="label">
<asp:Label ID="lblShowAS" runat="server" />
</div>
</div>
<div class="clear">
</div>
<div class="exampleView">
<div id="Manage" runat="server" class="exampleView">
<telerik:RadGrid runat="server" ID="MyGrid" AutoGenerateColumns="false" Skin="Vista"
AllowMultiRowSelection="True" PageSize="10" AllowPaging="true" EnableViewState="false">
<MasterTableView DataKeyNames="StringMaskId,Id" CommandItemDisplay="Top" EditMode="InPlace">
<Columns>
<telerik:GridClientSelectColumn CommandName="Select" UniqueName="Select" HeaderStyle-Width="30px"
Resizable="false" />
<telerik:GridEditCommandColumn HeaderStyle-Width="25px" UniqueName="EditCommandColumn"
ButtonType="ImageButton" EditImageUrl="/UI/Images/grid_edit.png" Resizable="false">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn UniqueName="btnDelete" ConfirmDialogType="RadWindow" ButtonType="ImageButton"
CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="300px" HeaderStyle-Width="25px"
Resizable="false" ImageUrl="/UI/Images/cross.png" />
<telerik:GridTemplateColumn DataField="Id" HeaderText="Id" UniqueName="Id" Visible="false"
ConvertEmptyStringToNull="true">
<InsertItemTemplate>
<telerik:RadTextBox ID="lblId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Id") %> '
Width="150px" ReadOnly="true" Enabled="false" CssClass="labelGrid" />
</InsertItemTemplate>
<EditItemTemplate>
<telerik:RadTextBox ID="txtId" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Id") %> '
Width="150px" CssClass="labelGrid" ReadOnly="true" />
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="Position" HeaderText="Position" UniqueName="Position" Visible="false" HeaderStyle-Width="1px"
ConvertEmptyStringToNull="true">
<EditItemTemplate>
<asp:Label ID="lblPosition" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Position") %> '
Width="150px" CssClass="labelGrid" ReadOnly="true" />
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Position") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Type" DataField="TypeId">
<EditItemTemplate>
<telerik:RadComboBox runat="server" ID="cbType" EnableLoadOnDemand="True" DataTextField="CDetailText"
DataValueField="CDetailId" HighlightTemplatedItems="true" Width="90%" CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="cbType_SelectedIndexChanged"/>
<br />
<asp:RequiredFieldValidator ID="frSecurity" runat="server" ErrorMessage="*" CssClass="validator"
Display="Dynamic" ControlToValidate="cbType"></asp:RequiredFieldValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblDatatype" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Type") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Char" DataField="Char" HeaderStyle-Width="80px" FilterControlWidth="40px" >
<EditItemTemplate>
<telerik:RadTextBox ID="txtChar" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Char") %> '
Width="50px" CssClass="labelGrid" MaxLength="1" />
<br />
<asp:CustomValidator ID="cvChar" runat="server" ErrorMessage="*" CssClass="validator"
Display="Dynamic" ControlToValidate="txtChar" OnServerValidate="cvChar_ServerValidate"></asp:CustomValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblChar" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Char") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Match" DataField="MatchId">
<EditItemTemplate>
<telerik:RadComboBox runat="server" ID="cbMatch" EnableLoadOnDemand="True" DataTextField="CDetailText"
DataValueField="CDetailId" HighlightTemplatedItems="true" Width="90%" CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="cbMatch_SelectedIndexChanged"/>
<br />
<asp:RequiredFieldValidator ID="frMatch" runat="server" ErrorMessage="*" CssClass="validator"
Display="Dynamic" ControlToValidate="cbMatch"></asp:RequiredFieldValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblMatch" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Match") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="Amount" DataField="Amount" HeaderStyle-Width="110px" FilterControlWidth="40px">
<EditItemTemplate>
<telerik:RadNumericTextBox ID="txtAmount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Amount") %> '
CssClass="labelGrid" ShowSpinButtons="true" Width="50px" Type="Number" MinValue="0"
MaxValue="99">
<NumberFormat GroupSeparator="" DecimalDigits="0" />
</telerik:RadNumericTextBox>
<br />
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblAmount" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Amount") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<CommandItemTemplate>
<div class="quickAdd">
<asp:LinkButton ID="lnkqQuitInsert" runat="server" CommandName="InitInsert">
<asp:ImageButton ID="imgQuickAdd" runat="server" ImageUrl="/UI/Images/add.png" />
<asp:Label ID="lblQuickAdd" runat="server" /></asp:LinkButton>
<asp:LinkButton ID="lnkDeleteSelected" CommandName="SelectRow" runat="server" OnClick="DeleteSelectedItems">
<asp:ImageButton ID="imgDeleteSelected" runat="server" ImageUrl="/UI/Images/cross.png" />
<asp:Label ID="lblDeleteSelected" runat="server" /></asp:LinkButton>
<asp:LinkButton ID="lnkDeleteAllValues" runat="server" OnClick="DeleteValues">
<asp:ImageButton ID="imgDeleteAllValues" runat="server" ImageUrl="/UI/Images/delete_all.png" />
<asp:Label ID="lblDeleteAllValues" runat="server" /></asp:LinkButton>
</div>
</CommandItemTemplate>
</MasterTableView>
<ClientSettings AllowRowsDragDrop="True">
<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
<PagerStyle Mode="NumericPages" />
</telerik:RadGrid>
</div>
</div>
</div>
the js file:
function rowDraggingIcon(sender, eventArgs) {
var row = sender._draggedRow;
row.innerHTML = "<img src='/UI/Images/fields.png' />";
row.style.width = 0 + "px";
row.style.height = 0 + "px";
}
thanks