This is a migrated thread and some comments may be shown as answers.

Drag and Drop Rows

1 Answer 60 Views
Grid
This is a migrated thread and some comments may be shown as answers.
July
Top achievements
Rank 2
July asked on 07 Sep 2012, 09:04 PM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Antonio Stoilkov
Telerik team
answered on 12 Sep 2012, 10:01 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
July
Top achievements
Rank 2
Answers by
Antonio Stoilkov
Telerik team
Share this question
or