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

[Solved] drag from grid to treeview with load on demand grid

15 Answers 203 Views

Grid

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

Toby asked on 18 Aug 2009, 01:02 PM

Hi,

I have followed the example on http://www.telerik.com/community/code-library/aspnet-ajax/general/multi-row-drag-and-drop-from-radgrid-to-radtreeview.aspx using the code from http://www.telerik.com/ClientsFiles/095951_087985_MultiRowDragAndDropFromRadGridToRadTreeView.zip

it all seems to work fine - but then the server calls back on the ItemsGrid_RowDrop event when iterating through the draggeditems if i try to get the value of one of the grid colums using

    
                    protected void ItemsGrid_RowDrop(object sender, GridDragDropEventArgs e) 
        
                    {            
        
                        if ((!String.IsNullOrEmpty(e.HtmlElement)) && 
        
                        (e.DraggedItems.Count > 0)) 
        
                        { 
        
                            string nodeValue = nodeValueHiddenField.Value.Trim(); 
        
                            Telerik.Web.UI.RadTreeNode node = Treeview.FindNodeByValue(nodeValue); 
        
                            foreach (GridDataItem draggedItem in e.DraggedItems) 
        
                            { 
        
                                string itemId = draggedItem["ITEMID"].Text; 
        
                                //node.Nodes.Add(new RadTreeNode(draggedItem["Column1"].Text, draggedItem["Column2"].Text)); 
        
                            } 
        
                        } 
        
                    }

draggedItem["ITEMID"].Text is always " " i assume this is because the grid has rebinded (it is blank at this point) what is the best way around this - can i cause the grid not to rebind when dragging from it.

thanks
Toby

15 Answers, 1 is accepted

answered on 21 Aug 2009, 08:10 AM

Hi Toby,

I see now. Unfortunately, RadGrid does not support rebinding on drag-start, as rebinding also involves clearing most of RadGrid's settings, including dragged items.

A suggestion I can make would be to manually save your dragged items' data into a hidden field on the page. You can use RadGrid's client-side OnRowDropping event to save row data before the page posts backs. In the server-side RowDrop event, you can now access your hidden field and get your dragged item values.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 21 Aug 2009, 08:42 AM

Hi,

Would it make any difference if I were to use Declarative ClientSide databinding i.e. (http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx ) instead of binding it like this (http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx )

Is this something that is going to be fixed in a future version as it seems quite bad that if you are using webservices to populate a grid drag and drop can only be implimented with a hack?

Also if you turn off paging when binding to a webservice the row count is not reflected properly (it still seems to think there are only 10 items on the client side) and templates only work up to the current page size - these seem like pretty major bugs as well....

I have come from using CompmentArt components and were dissatisfied with all the javascript hacks there were required to impliment more advanced features and I was hoping that wouldn't be the case with Telerik.

answered on 24 Aug 2009, 02:12 PM

Hello Toby,

None of the two client-side binding approaches are supported in a scenario with server-side RowDrop event. The way client-side binding works: RadGrid's structure needs to be created on the server (columns, rows, etc.), but populated with dummy data, so that data is properly bound on the client after page load. Thus, no data ever reaches the server. Note, that the server-side RowDrop event cannot get any data from the client when using client-side binding. Hence the need to save your cell values onto the page.

Template controls are also not supported by RadGrid with client-side binding. Generally, ASP.NET up to 3.5 does not support client-side binding with templates. This is an expected feature for ASP.NET 4.0 and we have a couple of blog posts with demos of client-side binding and templates. Both of them demonstrate templates and client-side binding as implemented in ASP.NET 4.0

Vladimir Enchve's blog post

Atanas Korchev's blog post

Regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 24 Aug 2009, 04:40 PM

gridclientbinding.zip

Hmm,

It seems RadGrid should work in this scenario. The demo example you referred to demonstrates a RadGrid with a GridTemplateColumn and an image inside, where you can find the image in the client-side RowDataBound event of the grid, and set its src property.

You can also find attached a small project I have created to demonstrate RadGrid with client-side binding. You can see the implementation of a GridTemplateColumn with an image, and the client-side OnRowDataBound event in which we take the image name as a property of the data item, find the image in the template column and set its src property.

To have RadGrid create all items properly, you can set a PageSize value greater than the maximum amount of items returned from your data source (with AllowPaging="false"). This will have all your items created without paging.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 25 Aug 2009, 10:33 AM

incase anyone else is trying to do this here is the code to impliment saving the dragged items to a hidden field

    
            function onGridRowDropping(sender, args) { 
        
                                if (currentNode) { 
        
                                    // store destination node                         
        
                                    $get("nodeValueHiddenField").value = currentNode.get_value(); 
        
                                    args.set_destinationHtmlElement("nodeValueHiddenField"); 
        
                                    // store grid data in hidden field (cannot be done server side) 
        
                                    $get("GridValueHiddenField").value = ""; 
        
                                    var itemsArray = args.get_draggedItems(); 
        
                                    for (i = 0; i < itemsArray.length; i++) { 
        
                                        var itemId = itemsArray[i].get_dataItem()["ITEMID"]; 
        
                                        $get("GridValueHiddenField").value += itemId +","; 
        
                                    }                                                                         
        
                                } 
        
                                else { 
        
                                    args.set_cancel(true); 
        
                                } 
        
                            }

then on the server side you can just parse the comma separate list of items.

answered on 25 Aug 2009, 02:16 PM

Hi Toby,

Why don't you try in the client-side OnGridCreated event of RadGrid. This event is fired after every postback when your client-side RadGrid object is created. Thus, after you postback to the server and process your dropped items, you rebind your grid on next page load. Also, do not forget to always give it a fresh set of data before calling dataBind().

You cannot set the page size on the client. The very idea is that the page size is needed by RadGrid on the server, so that it knows how many items it needs to create.

Sincerely yours,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 25 Aug 2009, 02:43 PM

perfect thats fixed it, it now rebinds the grid properly after dragging.

With regards to the page size issue, I understand that you shouldn't be able to change the page size if you are binding data from the serverside, but if you want no pages when binding to a web service it would be nice to be able to specify the page size otherwise you have to use an abitary value (such as 200) to make the templates work properly, this also causes problems inbetween reloading as for a second the grid has the full row count before it has rebound to the data (you see it flash up quickly with the 200 odd rows before the correct amount shows)

answered on 25 Aug 2009, 03:03 PM

Hello Toby,

Seems like a fair trade-off, having in mind that client-side binding with templates is not a supported scenario at all.

Anyway, if you come up with a way to get the number of returned items from RadGrid's client-side data source on the server, you can set RadGrid's page size to that number. For example, if you use server-side web service call to only get the row count from your service, you can set RadGrid's PageSize properly. Then, back on the client, you now have a RadGrid with exactly the needed number of rows.

Best wishes,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 25 Aug 2009, 04:27 PM

ill try that.

Sorry! Another small issue :

When there is a larger (70ish) amount of items in the grid - sometimes the last item is not correctly displayed with the icon - also if you try and drag that item is null - looking at the generated html - its seems the no more records row is in there for some reason

    
            </tr><tr style="display: table-row;" class="rgAltRow" id="ItemsGrid_ctl00__47"> 
        
                    <td> 
        
                                                         <img id="ItemsGrid_ctl00_ctl98_ItemImage" src="/Images/treeview/usergroup.gif" style="border-width: 0px; width: 20px;"> 
        
                                                    </td><td>8663</td><td>Elizabeth</td><td>xxx</td> 
        
                </tr><tr style="display: table-row;" class="rgRow" id="ItemsGrid_ctl00__48"> 
        
                    <td> 
        
                                                         <img id="ItemsGrid_ctl00_ctl100_ItemImage" src="/Images/treeview/usergroup.gif" style="border-width: 0px; width: 20px;"> 
        
                                                    </td><td>8667</td><td>Mark</td><td>xxx</td> 
        
                </tr><tr style="display: table-row;" class="rgAltRow" id="ItemsGrid_ctl00__49"> 
        
                    <td> 
        
                                                         <img id="ItemsGrid_ctl00_ctl102_ItemImage" src="/Images/treeview/usergroup.gif" style="border-width: 0px; width: 20px;"> 
        
                                                    </td><td>8671</td><td>Dawn</td><td>xxx</td> 
        
                </tr><tr style="display: table-row;" class="rgRow" id="ItemsGrid_ctl00__50"> 
        
                    <td> 
        
                                                         <img id="ItemsGrid_ctl00_ctl104_ItemImage" src="/Images/treeview/usergroup.gif" style="border-width: 0px; width: 20px;"> 
        
                                                    </td><td>8679</td><td>Lucy</td><td>xxx</td> 
        
                </tr><tr class="rgNoRecords" style="display: none;"> 
        
                    <td colspan="4" style="text-align: left;"><div>No records to display.</div></td> 
        
                </tr> 
        
                <tr class="rgAltRow" id="ItemsGrid_ctl00__51"><td></td><td>8680</td><td>Lorraine</td><td>xxx</td></tr></tbody> 
        
            </table><input value="{&quot;selectedIndexes&quot;:[&quot;7&quot;],&quot;reorderedColumns&quot;:[],&quot;expandedItems&quot;:[],&quot;expandedGroupItems&quot;:[],&quot;expandedFilterItems&quot;:[],&quot;deletedItems&quot;:[],&quot;hidedColumns&quot;:[],&quot;showedColumns&quot;:[],&quot;popUpLocations&quot;:{},&quot;draggedItemsIndexes&quot;:[]}" autocomplete="off" id="ItemsGrid_ClientState" name="ItemsGrid_ClientState" type="hidden"> 
        
                            </div> 
        
                    </div> 
        
                                </div>

see "no records to display" is above the last record ( <tr class="rgAltRow" id="ItemsGrid_ctl00__51"><td></td><td>8680</td><td>Lorraine</td><td>xxx</td></tr>)