Drop from listbox to grid

[Stefania]

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

[Shinu]

Hi Stefania,

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

Thanks,
Shinu.

[Stefania]

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>

[Shinu]

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.

[Stefania]

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);
               }

[Shinu]

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.