constrain reorder list drag area like Netflix

Is there a way to make the reorder list constrain the drag item to a column - like Netflix now does on the movie que ?

On the netflix site, when you drag a movie in the que to reorder it, the movie can only go up and down in the list ( you cant drag it all over the page like you can with the Ajax Reorder List...

Thanks for any help

bump anyone ?

Hi Uncleb,

I'm failed to logon the Netflix to get the effect due to the account issue.Based on your description,my understanding of what you want is that you want move a row from a list to another list. Just like move a row from a RecorderList to another.If I have miunderstood, please let me know.

Based on this knowledge, I'm afraid that we cannot achieve it by using RecorderList directly since it is difficult to drag an item across to another RecorderList.However, here is the information maybe you are looking for: http://www.isocra.com/articles/table_dnd.php .

I hope this helps.

Best Regards,

Jonathan

thanks Jonathan. The netflix control is a reorder style list that works almost the same way as ajax control, with a few differences.

The main difference is that when you drag an item, it can only go up or down in the list ( physically) The ajax reorder list allows the dragged item to be moved anywhere on the page ( though if it's not released on top of the reorder list , it does nothing)

Hard to explain without seeing it.

it similar to this...

http://demo.script.aculo.us/ajax/sortable_elements

Hi Uncleb,

Based on my research, I'm afraid we cannot find out a easy way to achieve your target except modify the source code. RecorderList is more complex than the most other controls in Ajax Control Toolkit. Fortunately, we can dip into the control since it is open source project. If you have any new finding , sharing them will be greatly appreciated.Thanks.

Best Regards,

Jonathan

ConfirmButtonExtender in DataView TemplateField - only works once!

I have a TemplateField in my DataView that is used to hold a link button to remove the item from the list. I have added a ConfirmButtonExtender to the template as well, and it works the first time I click the linkbutton, and if I click Cancel it will keep poping up when I click any of the linkbuttons again, but if I click OK to remove the item, the next time I click on a link button the ConfirmButtonExtender doesn't pop up to confirm. Below is the code where it is implemented.

<asp:TemplateFieldHeaderText="">

<ItemTemplate><asp:LinkButtonID="lnkRemoveIngredient"runat="server"Text="Remove"CommandName="Remove"CausesValidation="false"></asp:LinkButton><ajaxToolkit:ConfirmButtonExtenderID="cbelnkRemoveIngredient"runat="server"TargetControlID="lnkRemoveIngredient"ConfirmText="Are you sure?"/></ItemTemplate>

Just wondering if this is a known bug or if there is a way around this!

It always seems like I reply to my own posts, but I have approached this problem differently. Instead of using the ConfirmButtonExtender I have added a OnClientClick to the above mentioned linkbutton and the functionality works as desired.

<ItemTemplate>

<asp:LinkButtonID="lnkRemoveIngredient"runat="server"Text="Remove"CommandName="Remove"CausesValidation="false"OnClientClick="return confirm('Are you sure?');"></asp:LinkButton></ItemTemplate>

Easy enough... but still interested in why the ConfirmButtonExtender acts up in this scenario

Sounds kind of like:http://forums.asp.net/thread/1441672.aspx?

ConfirmButton not working

Hi,

I have a page with an update panel and a repeater inside the panel. I have a multi view inside the repeater item template. In that multiview, I have a view with a delete button and a confirm button extender. When you click on the delete button, the confirm alert appears (not always), but at the same time an asyncrhonous postback occurs, the record is deleted by the code behind page and the page is refeshed, but you have not clicked 'OK' nor "Cancel" yet.

Note: Using Beta

Here is the web page:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Templates.aspx.cs" Inherits="Templates" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat = "server" />
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories" TypeName="DataLayer.ProtocolCategory"></asp:ObjectDataSource>
Select a category:
<asp:DropDownList ID="CategoriesDropDown" runat="server"
DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
DataValueField="CategoryID" Width="250px"
AutoPostBack = "true" />
<br /><br /><hr /><br />
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ObjectDataSource ID="TemplatesDataSource" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetTemplates" TypeName="DataLayer.ProtocolTemplate">
<SelectParameters>
<asp:ControlParameter ControlID="CategoriesDropDown" DefaultValue="0" Name="CategoryID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<table border="1" width="100%" >
<thead>
<tr>
<td align="center" colspan="4">Available templates</td>
</tr>
<tr>
<td width="25%">Name</td>
<td width="70%">Description</td>
</tr>
</thead>
<tbody>
<asp:Repeater ID="TemplatesRepeater" runat="server"
DataSourceID="TemplatesDataSource" OnItemCommand="TemplatesRepeater_ItemCommand" >
<ItemTemplate>
<tr>
<asp:MultiView ID="ItemMultiView" runat="server" ActiveViewIndex="0">
<asp:View ID="ReadOnlyView" runat = "server">
<td>
<asp:Label ID="NameLabel" runat="server"
Text= '<%# Eval("TemplateName") %>' />
</td>
<td>
<asp:Label ID="DescriptionLabel" runat="server"
Text = '<%# Eval("Description") %>' />
</td>
<td>
<asp:Button ID="EditButton" runat ="server"
CommandName="edit" Text="Edit" />
</td>
<td>
<asp:Button ID="DeleteButton" runat = "server" UseSubmitBehavior="false"
CommandName = "delete" Text= "Delete"
CommandArgument = '<%# Eval("TemplateID") %>' />
<ajaxToolkit:ConfirmButtonExtender ID ="ConfirmButton" runat="server"
ConfirmText = "You are about to delete this template. Click ok to proceed"
TargetControlID = "DeleteButton" />
</td>
</asp:View>
<asp:View ID="EditView" runat="server">
<td>
<asp:TextBox ID="NameTextBox" runat ="server"
Text= '<%# Eval("TemplateName") %>' />
</td>
<td>
<asp:TextBox ID="DescriptionTextBox" runat="server"
Text = '<%# Eval("Description") %>' />
</td>
<td>
<asp:Button ID = "SaveButton" runat = "server"
CommandName= "save" Text = "Save"
CommandArgument = '<%# Eval("TemplateID") %>' />
</td>
<td>
<asp:Button ID = "CancelButton" runat = "server"
CommandName = "cancel" Text = "Cancel" />
</td>
</asp:View>
</asp:MultiView>
</tr>
</ItemTemplate>
<FooterTemplate>
<td>
<asp:TextBox ID="NameTextBox" runat ="server"
Text= '<%# Eval("TemplateName") %>' />
</td>
<td>
<asp:TextBox ID="DescriptionTextBox" runat="server"
Text = '<%# Eval("Description") %>' />
</td>
<td>
<asp:Button ID = "AddButton" runat = "server"
CommandName= "add" Text = "Add" />
</td>
</FooterTemplate>
</asp:Repeater>
</tbody>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CategoriesDropDown" EventName="SelectedIndexChanged" />
</Triggers>

</asp:UpdatePanel>
</div>
</form>
</body>
</html>

And a fraction of code behind:

protected void TemplatesRepeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "edit")
EditItem(e);
else if (e.CommandName == "cancel")
CancelItem(e);
else if (e.CommandName == "save")
SaveItem(e);
else if (e.CommandName == "delete")
DeleteItem(e);
else if (e.CommandName == "add")
AddItem(e);

}

private void DeleteItem(RepeaterCommandEventArgs e)
{
int TemplateID = int.Parse((string) e.CommandArgument);
DataLayer.ProtocolTemplate.DeleteTemplate(TemplateID);
this.TemplatesRepeater.DataBind();
}

I have removed the update panel, but still does not work.

The first time the page is rendered (HTTP GET) no AjaxControlToolkit.ConfirmButtonBehavior are created.

When you click on the delete button a regular postback occurs, the row is deleted and I get the following error on a browser alert:

Line: 1960
Error: Sys.ArgumentException:Value must not be null for Controls and Behaviors
Parameter name:element

The page source code contains the following javascript code:

Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ConfirmButtonBehavior, {"ConfirmText":"You are about to delete this template. Click ok to proceed","id":"ConfirmButton"}, null, null, $get('DeleteButton'));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ConfirmButtonBehavior, {"ConfirmText":"You are about to delete this template. Click ok to proceed","id":"TemplatesRepeater_ctl00_ConfirmButton"}, null, null, $get('TemplatesRepeater_ctl00_DeleteButton'));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ConfirmButtonBehavior, {"ConfirmText":"You are about to delete this template. Click ok to proceed","id":"TemplatesRepeater_ctl01_ConfirmButton"}, null, null, $get('TemplatesRepeater_ctl01_DeleteButton'));
});

Obviously the first $create call fails because $get('DeleteButton') returns null since 'DeleteButton' does not exist.

If you continue clicking delete buttons you continue getting these errors, no confirmation alert message is shown.

Confirm button is the simplest control in Ajax Control Toolkit. I think at least this one should work :-(

I'm getting the exact same thing, except I am using a DataList instead of a Repeater.

I have decided not to use confirm button, instead I'm using the following:

 <script type="text/javascript"> function ConfirmDelete(e) { if (!window.confirm("You are about to delete this categorie.\nClick OK to proceed, cancel otherwise")) { e.returnValue = false; if (e.preventDefault) e.preventDefault(); return false; } } </script>

<asp:ImageButton ID="DeleteButton" runat ="server"
ImageUrl ="Images/delete.png" Height="16px" Width="16px"
CommandName ="delete" ToolTip="Delete"
CommandArgument ='<%# Eval("HospitalID")%>'
OnClientClick="ConfirmDelete(event);"
/>
Did this issue get resolved? I'm also finding that my ConfirmButton control is not in an Update panel.
Please try your scenario with the recently available10301 release of the Toolkit (andASP.NET AJAX 1.0). If the problem persists, then please reply with acomplete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

Conditional Modal popup?

I have a <asp:checkbox> control on my ASP.NET page as a column (template item) in a GridView. This check box is to mark certain thing as reviewed. When the user checks it, before I run my sql query to mark the sql table rows as reviewed, I would like to pop up a confirmation dialog to the user.

However, this confirmation is not always needed, based on a condition (i.e.) if the GridView row that this check box is on is currently highlighted i.e. selected, then I don't need a confirmation. But if some other GridView row was selected and the check box on some other row is checked then I would like to confirm with the user.

I checked the modalpopup in Ajax toolkit, but it seems like it pops up every time the target control is clicked. I need the ability to be able to decide when to show the popup and when not to.

Please help.

instead of assigning the modal popup to a target control. Assign the target control id to a hidden field, so just make a random hidden field on your form with the id modalTarget and set the popupcontrolid for the modal to be modalTarget. Now you have it set up so nothing can cause the modal to popup since users cant really interect with the hidden field. You are now free to use the Show() function to display the modal popup. So say you click the submit button and first want to check if the checkbox is clicked. all you have to do if it is checked is something like this

if(checkbox.Checked == true)
{
modalPopup1.Show();
}

modalPopup1.Show(); will allow you to show the popup any time u want :)

Thanks for the neat idea. One question though, after the popup shows, how would I check if the ok was selected or the cancel?

ex:

if (selectedRowIndex != checkBoxRowIndex)

{

modalpopup1.Show();

}

// check if the Ok button was clicked (how to check that??)

if yes

call UpdateSQLRows();

else // cancel button clicked

do nothing.

i have never used these but you might wanna try setting the okControlID so you can use that to determine what the user clicked. or just write onClick events for your buttons

OkControlID - The ID of the element that dismisses the modal popupOnOkScript - Script to run when the modal popup is dismissed with the OkControlIDOkCancelID - The ID of the element that cancels the modal popupOkCancelScript - Script to run when the modal popup is dismissed with the CancelControlID

Thanks, I will work on that.

Conditional confirmation pop up?

I have a <asp:checkbox> control on my ASP.NET page as a column (template item) in a GridView. This check box is to mark certain thing as reviewed. When the user checks it, before I run my sql query to mark the sql table rows as reviewed, I would like to pop up a confirmation dialog to the user.

However, this confirmation is not always needed, based on a condition (i.e.) if the GridView row that this check box is on is currently highlighted i.e. selected, then I don't need a confirmation. But if some other GridView row was selected and the check box on some other row is checked then I would like to confirm with the user.

I checked the modalpopup in Ajax toolkit, but it seems like it pops up every time the target control is clicked. I need the ability to be able to decide when to show the popup and when not to.

Please help.

Sounds like this can be solved by a simple if statement in your JavaScript that generates the popup. I found however that the client-side onchange event for checkboxes only fires when the focus has changed, so in this case I capture the onclick and keyup event for the checkbox, for example:

myCheckbox.InputAttributes.Add("onclick","EVENT");
myCheckbox.InputAttributes.Add("onkeyup","EVENT");

Hope this helps...

-Damien

In the client side onclick event handler for the check box, would I be able to know which row on the Server side GridView was selected before checking the checkbox.?

Should this hidden field be a server side control or just a regualr HTML hidden field?

My intent is to be able to pass to the client side javascript function, the GridView's selected row index and the row index of the row on which the clicked check box is sitting.

And then inside the JavaScript function ex: SomeValidationFunction(), I would compare the values of both the indexes, if they are equal then I return true and if not then I popup the confirmation.

So, In a nut shell, the main deal is to make the server side's GridView's row index values available to the onclick function...and how do I do it ( from the onclick() function, without going to the server) is the question?.

You could do this by passing the row index to yourSomeValidationFunction as a parameter. When you add these events to the checkbox, you can do this during the data binding event, just append the parameter(s) you need when you add the function call.

When I append the parameters during the databinding event, my parameters wont be having values. Will I be able to value the parameters when the check box is clicked later on?

Could you please provide a snippet of code as to appending parametes to a function call and valuing them...if its not too much to ask.

Thank you.

In theRowDataBound event, you can use theGridViewRowEventArgs (in this example's case, the parameter is named "e". Then this code will add the javascript event to the checkbox:

myCheckbox.InputAttributes.Add("onclick","EVENT(" + e.Row.RowIndex + ")");
myCheckbox.InputAttributes.Add("onkeyup","EVENT(" + e.Row.RowIndex + ")");

Hope this helps you out...

-Damien

Hi Damien

I have added the below code to the RowDataBound event handler for my GridView. When I add the onclick() attributes to the check box, it no more causes a postback.

<script type="text/javascript" language="javascript">
function ReviewConfirmation() {
var confirmation = confirm("Do you really want to mark reviewed?");
return confirmation;
}
</script>

protected void gvAlertSummary_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkRevSummary = (CheckBox)e.Row.FindControl("chkRevSummary");
chkRevSummary.Attributes.
chkRevSummary.Attributes.Add("onclick","return ReviewConfirmation()");
}
}

I have noticed that previously there used to be a _doPostBack() call in the onclick() for the checkbox, after adding the code for the attributes, I no more see the _doPostBack, which got replaced by the attributes that I have added. How should I work around this problem.

Also, how do I add the EVENT attribute to this check box.

Thanks for you help.