Drag and Drop Rows

[July]

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>&nbsp;&nbsp;
                        <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>&nbsp;&nbsp;
                        <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>&nbsp;&nbsp;
                    </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

[Antonio Stoilkov]

Hello,

I am not sure I understand you correctly. However, if you want to change the drop indicator styles you could by using the CSS selector below:

body div.GridItemDropIndicator
{
    /* Custom CSS */
}

Additionally, if your scenario is different you could describe it by providing step by step instructions so we could advise you with the best possible solution.

Kind regards,
Antonio Stoilkov
the Telerik team