Unknown server tag 'telerik:GridDragDropColumn'

[sameer]

Hi ALL,

I am using telerik rad grid , but i am unable to find the <telerik:GridDragDropColumn> tag.

MY grid code look like:

<

 

div style="float: left; padding: 0 6px 0 10px">

 

 

<h2 style="color: #9c3608">

 

Pending Orders

</h2>

 

 

<telerik:RadGrid runat="server" ID="grdPendingOrders" OnNeedDataSource="grdPendingOrders_NeedDataSource"

 

 

AllowPaging="True" Width="350px" OnRowDrop="grdPendingOrders_RowDrop" AllowMultiRowSelection="true"

 

 

PageSize="30" EnableHeaderContextMenu="true">

 

 

<MasterTableView DataKeyNames="QuestionnairePK" TableLayout="Fixed">

 

 

<Columns>

 

 

<telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false" /> --> i am unable to write this tag. its throwing error like 'Unknown server tag 'telerik:GridDragDropColumn'.

 

 

</Columns>

 

 

</MasterTableView>

 

 

<ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">

 

 

<Resizing AllowColumnResize="true" />

 

 

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

 

 

<ClientEvents OnRowDropping="onRowDropping" />

 

 

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

 

 

</ClientSettings>

 

 

<PagerStyle Mode="NumericPages" PageButtonCount="4" />

 

 

</telerik:RadGrid>

 

</

 

div>


Thanks in advance
sameer

 

[Rosen]

Hello Sameer,

Could you please verify that the version of RadControls for ASP.NET AJAX you are using is Q2 2010 (version 2010.2.713) or later.

Regards,
Rosen
the Telerik team

[sameer]

I am using the version  2010.1.309.35.

Regards,
sameer

[Rosen]

Sameer,

As I have stated in my previous post, the GridDragDropColumn is introduced in Q2 2010 release, but the version you are using is Q1 2010, therefore you should upgrade to a later (Q2 2010+) version in order to use the column in question.

Greetings,
Rosen
the Telerik team

[Brad]

Is there any way to mimic this feature/functionality in older versions?  I'm at a client where they simply will not entertain the "risk" of upgrading (their perception)... I'm stuck back in 2008 land with them and it won't be changing any time soon...

This is exactly what I'm looking for and even if it takes some effort (compared to a canned implementation from the newest version) I'd love to deliver this for the end users who thus far haven't asked for drag-n-drop much but this time they have a screen where it really makes sense to implement drag-n-drop...

[Cori]

Hello Sameer,

The RadGrid has always had drag-and-drop functionality, the only function of the GridDragDropColumn is to provide a visual handler that so the user knows they can drag the row. You can pretty much just add a TemplateColumn with that image in it and it will function pretty much the same way as the GridDragDropColumn does. The only difference would be that you can grab the entire row, where as when you use the GridDragDropColumn you can only grab the handler to move the rows.

I hope that helps.

[tomekm]

When using GridTemplateColumn with asp:Image inside, user needs to click row first and then can move it. Any ideas how to make it in one action? Maybe onmousedown event of image would select row?

[Veli]

Hi Rychu,

For RadGrid versions prior to Q2 2010 that do not have the GridDragDropColumn, you can use the following workaround:

1. Create a GridTemplateColumn with an <img> element that has a CSS class of rgDrag:

<telerik:GridTemplateColumn>
    <ItemTemplate>
        <img src="rgDrag.gif" alt="rgDrag.gif" class="rgDrag" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

2. Use RadGrid's client-side OnRowDragStarted event to cancel the action if you are not dragging by the drag handle:

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings AllowRowsDragDrop="true">
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowDragStarted="gridRowDragStarted" />
    </ClientSettings>
</telerik:RadGrid>

function gridRowDragStarted(sender, args)
{
    if (!args.get_domEvent()._isDragHandle)
    {
        args.set_cancel(true);
    }
}

3. Use RadGrid's ItemCreated event to register an onmousedown handler for RadGrid's data items:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        e.Item.Attributes["onmousedown"] = "startRowDrag(this, event);";
    }
}

4. Start the row drag from within the startRowDrag() function if the target of the event is the drag handle (identified by the rgDrag css class) :

function startRowDrag(row, args)
{
    var target = args.target || args.srcElement;
    if (target.className.indexOf("rgDrag") > -1)
    {
        args._isDragHandle = true;
        var tableView = $find(row.id.split("__")[0]);
        var grid = $find(tableView.get_owner().get_id());

        tableView.get_dataItems();
        $find(row.id).set_selected(true);

        var origFunc = Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent;
        Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent = function ()
        {
            var el = arguments[0].target || arguments[0].srcElement;
            return origFunc.apply(grid, arguments) || el.tagName.toLowerCase() == "img";
        }

        grid._mouseDown(args);

        Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent = origFunc;
    }
}

That's it. You now have a drag-drop column that is used to drag grid items. Attaching a test page to demonstrate.

Greetings,
Veli
the Telerik team

[Noonecares]

Hi all,

in my current version of DNN 6 and Telerik Version 2011.2.915.35 (I think in any versions) you have to care about some details.
I used this way of drag-drop for more then one rows combined with a checkboxColumn.
If you are using it in 2 diferent modules in dotnetnuke you have to care about the naming of the functions or maybe naming of the grids.
however you have to be sure that you are calling the right functions in your different grids on the same page.
i.e. I renamed my functions like this "gridRowDragStarted_ModuleID_" + ModuleID

You only have to care about this if you have different modules with the same drag n drop functions on the same page and the functions are doing different stuff.
i.e. Iam using 2 different modules on one page. One is selecting only one row and another module has got a grid where you can select more then 1 row using a checkboxcolumn. Both grids are calling maybe the same functions (you dont know. You have to make the different functions unique!).

You also have to care about using the same module twice on a page but they have different javascript in that functions (this works if you are dynamically add the javascript at page_init() and read out the unique moduleID and add this moduleID into the names of the functions.)
like this:
RadGrid.ClientSettings.ClientEvents.OnRowDragStarted = "gridRowDragStarted_ModuleID_" + this.ModuleId;

If you want to make it perfect you have to make this functions unique inside a module, too. Cause if you have a copy of the grid in the same module you will have the same moduleID and the problem occures again :-)
So take care about this case of problems.

greets noone