Drop from listbox to grid

6 posts, 2 answers
  1. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 14 May 2014 Link to this post

    Hi
    I'm trying to drop a listbox row into a full grid.
    The grid have 10 row and there is no extra space into the grid where dropped my listbox row. I thought the event had to be fired even if I dropped the row on a grid row but nothing happens.

    Thanks
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 15 May 2014 in reply to Stefania Link to this post

    Hi Stefania,

    Please have a look into this forum thread which discuss about the same scenario.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 15 May 2014 in reply to Shinu Link to this post

    Thanks it works.
    Now I have another problem
    My listbox and grid are inside an another grid (nestedviewtaemplate)
    How can I get it in js?

    var gridId = "<%= Grid1.ClientID %>"; //here I have to find my subgrid
     
                   function OnClientDropping(sender, args) {
                       var target = args.get_htmlElement();
                       droppedOnGrid(args);
                       return;
                   }
     
                   function droppedOnGrid(args) {
     
     
                       var target = args.get_htmlElement();
                       while (target) {
                           if (target.id == gridId) {
                               args.set_htmlElement(target);
                               return;
                           }
     
                           target = target.parentNode;
                       }
                       args.set_cancel(true);
                   }
     
                   function dropOnHtmlElement(args) {
                       if (droppedOnGrid(args))
                           return;
                   }

    this is my grid structure

    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource"
                   AllowPaging="True" OnItemCommand="RadGrid_ItemCommand" AllowSorting="True" OnPreRender="RadGrid_PreRender"
                   OnItemDataBound="RadGrid_ItemDataBound" AllowFilteringByColumn="True"
                   ShowGroupPanel="True" PageSize="15"
                   meta:resourcekey="DistributionListRadGridResource1">
                ...
                   <MasterTableView AutoGenerateColumns="False" EditMode="InPlace" DataKeyNames="Id"
                       Name="DistributionList" CommandItemDisplay="Top">                 
                       <CommandItemSettings AddNewRecordText="" RefreshText="" />
                       <NestedViewTemplate>
                           <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%"
                               Height="200px" meta:resourcekey="RadSplitter2Resource1"
                               ResolvedRenderMode="Classic" SplitBarsSize="">
                               <telerik:RadPane ID="RadPane2" runat="server" Index="0" ResizeWithParentPane="true"
                                   Width="90%" Scrolling="None" meta:resourcekey="RadPane2Resource1"
                                   ResolvedRenderMode="Classic">
                                   <telerik:RadGrid ID="RadGrid2" runat="server" AllowFilteringByColumn="True"
                                       Width="100%" OnNeedDataSource="AddressBookRadGrid_NeedDataSource" AllowPaging="True"
                                       AllowSorting="True" Culture="it-IT" EnableEmbeddedSkins="False"
                                       OnItemCommand="RadGrid2_ItemCommand"
                                       OnItemDataBound="RadGrid2_ItemDataBound" >                                  
                                       <MasterTableView AllowFilteringByColumn="False" AutoGenerateColumns="False" CommandItemDisplay="Top"
                                           DataKeyNames="Id,Ambiente,INT2" Name="AddressBook" EditMode="InPlace">
                                           <CommandItemSettings RefreshText="" AddNewRecordText="" />
                                           <Columns>
                                               ...
                                           </Columns>                                    
                                     
                                       </MasterTableView>                                  
                                   </telerik:RadGrid>
                               </telerik:RadPane>
                               <telerik:RadSplitBar ID="RadSplitBar2" runat="server" Index="1"
                                   meta:resourcekey="RadSplitBar2Resource1" ResolvedRenderMode="Classic">
                               </telerik:RadSplitBar>
                               <telerik:RadPane ID="RadPane1" runat="server" Index="2" Scrolling="None"
                                   Width="11%" meta:resourcekey="RadPane1Resource1" ResolvedRenderMode="Classic">
                                 ...
                                   <telerik:RadListBox ID="AddressBookListBox" runat="server" Culture="it-IT" DataTextField="FullName"
                                       OnClientDropped="OnClientDropping"
                                       DataValueField="Id" EnableDragAndDrop="True" Height="173px"
                                       Width="100%" OnDropped="ListBox_Dropped"
                                       meta:resourcekey="AddressBookListBoxResource1" ResolvedRenderMode="Classic">
                                        
                                       <ButtonSettings TransferButtons="All" />
                                   </telerik:RadListBox>
                               </telerik:RadPane>
                           </telerik:RadSplitter>
                       </NestedViewTemplate>
                       <NestedViewSettings>
                           <ParentTableRelation>
                               <telerik:GridRelationFields DetailKeyField="INT1" MasterKeyField="Id" />
                           </ParentTableRelation>
                       </NestedViewSettings>
                       <Columns>
                        ...
                       </Columns>                  
                   </MasterTableView>              
               </telerik:RadGrid>
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 May 2014 in reply to Stefania Link to this post

    Hi Stefania,

    Please try to attach the ItemDataBound event of Parent RadGrid and access the NestedViewTemplate RadGrid there and then attach the client side OnGridCreated event of NestedGrid and access the ClientID as follows.

    C#:
    protected void MainGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridNestedViewItem)
        {
            GridNestedViewItem item = (GridNestedViewItem)e.Item;
            RadSplitter splitter = (RadSplitter)item.FindControl("RadSplitter2");
            RadPane pane = (RadPane)splitter.FindControl("RadPane2");
            //accessing grid inside nestedviewtemplate
            RadGrid nestedGrid = (RadGrid)splitter.FindControl("NestedGrid");
            nestedGrid.ClientSettings.ClientEvents.OnGridCreated = "OnGridCreated";
        }
    }

    JavaScript:
    var gridId;
    function OnGridCreated(sender, args) {
        gridId = sender;
    }

    Thanks,
    Shinu.
  6. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 16 May 2014 in reply to Shinu Link to this post

    Hi Shinu,
    I change  the js part and it works

    function OnGridCreated(sender, args) {
                        gridId = sender.get_id();                  
                    }

    But when I try to move the listbox row on the parent grid I have the following error:
    TypeError: args.set_cancel is not a function

    function droppedOnGrid(args) {
     
     
                       var target = args.get_htmlElement();
                       while (target) {
                           if (target.id == gridId) {
                               args.set_htmlElement(target);
                               return;
                           }
     
                           target = target.parentNode;
                       }
                       args.set_cancel(true);
                   }


  7. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 May 2014 in reply to Stefania Link to this post

    Hi Stefania,

    Please modify the JavaScript as follows which works fine at my end.

    JavaScript:
    function droppedOnGrid(args) {
        var target = args.get_htmlElement();
        while (target) {
            if (target.id == gridId) {
                args.set_htmlElement(target);
                return;
            }
            target = target.parentNode;
        }
        args.get_domEvent().preventDefault();
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017