Manually add item to list from javascript

[Bobby]

Hi,

I am using a RadListView. I understand how to add, edit, and delete an item when the command buttons are inside the radlistview but I am not sure how to trigger add, edit, or delete functionality from a button or link that is not inside the RadListView. I would have assumed there would be a client side function that allows me to accomplish this but I do not see a function that would accomplish my goals. I used the appendData function to add data via the client side and this works fine. However, when there is a post back, that data is lost. How can I cause the data that was appended using appendData to post to the server, so I can update my data on the server with the new information?

Thanks,
Bobby

[Christophe]

You could use your RadAjaxManager to do so with something like this:
This is your javascript handler for your button:

function SendAjaxRequests(arg) {
    var ajaxMgr = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxMgr.ajaxRequest(arg);
}

Your RadButton:

<telerik:RadButton ID="rtbMyCommand" runat="server" Text="MyCommand" OnClientClicked="SendAjaxRequests('YOUROBJECTHERE')">
</telerik:RadButton>

Here's your RadAjaxManager

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            ClientEvents-OnResponseEnd="OnResponseEnd">
<!--.... Bla bla bla do what ever you need to ajaxify your controls here, but there is no need to do so to achieve what you are asking -->
        </telerik:RadAjaxManager>

in your code behind:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    string command = e.Argument.Split(':')[0];
    string args = e.Argument.Split(':').Length > 0 ? e.Argument.Split(':')[1] : null;

    switch (command)
    {
        case "Insert":
            Insert(args);
            break;
        case "Delete":
           Delete(args);
           break;
        case "Blabl":
           Blabla(args);
           break;
        default:
            break;
    }
}

You'll notice that you could also define a hendler for OnResponseEnd : ClientEvents-OnResponseEnd="OnResponseEnd"
This is where I would append your data with your js code if the db has been updated properly.

Let me know how you go mate ;)

[Bobby]

Hi Chris,

Thank you for the reply. I ended up wrapping my RadListView in an UpdatePanel and used triggers to wire up the Linkbuttons that were outside of the RadListView. Below is a snippet of my code.

<asp:UpdatePanel ID="raUpdatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <telerik:RadListView ID="researchAreaSelections" runat="server" ItemPlaceholderID="ras" DataKeyNames="Text">
                        <LayoutTemplate>
                            <ul class="researchAreaSelections">
                                <asp:PlaceHolder ID="ras" runat="server" />
                            </ul>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <li>
                                <span class="title">
                                    <asp:Label ID="selectionTitle" runat="server" CssClass="selectionValue" Text='<%# Eval("Text") %>' ></asp:Label>
                                </span>
                                <asp:Button ID="researchAreaSelectionRemove" runat="server" CssClass="remove" Text="remove" CommandName="Delete" CommandArgument='<%# Eval("Text") %>' />
                            </li>
                        </ItemTemplate>
                    </telerik:RadListView>
                </ContentTemplate>
            </asp:UpdatePanel>

<telerik:RadListView ID="parentResearchAreas" runat="server" ItemPlaceholderID="researchAreas">
                <LayoutTemplate>
                    <li class="active researchAreaList">
                        <a href="#" class="section">Research Areas</a>
                        <ul>
                            <asp:PlaceHolder ID="researchAreas" runat="server" />
                        </ul>
                    </li>
                </LayoutTemplate>
                <ItemTemplate>
                    <li>
                        <asp:LinkButton ID="itemLink" runat="server" CssClass="researchArea" CommandName="Update" Text='<%# Eval("Text") %>' CommandArgument='<%# Eval("Text") %>'></asp:LinkButton>
                    </li>
                </ItemTemplate>
            </telerik:RadListView>

Initially, I could not get the trigger an update on my update panel but I finally found out be searching the internet that I had to register each of my LinkButton that are inside of the outside RadListView as a post back control. So, I used the following code to data bind to the list view and get a reference to each link button and registered them accordingly.

void ParentResearchAreas_ItemDataBound(object sender, RadListViewItemEventsArgs e)
{
    if(e.Item.ItemType == RadListViewItemType.AlternatingItem || e.Item.ItemType == RadListViewItemType.DataItem)
    {
        LinkButton link = e.Item.Find("itemLink") as LinkButton;
        ScriptManager.GetCurrent(this).RegisterPostBackControl(link);
    }
}

Then, when the link button triggered a command on the List view, I just updated the information in my update panel and everything worked like a charm. Sorry for the long explanation, but I just wanted to detail my steps just in case anyone else has a similar issue.

Thank you for your prompt reply. I really appreciate it.

Thanks,
Bobby

[Christophe]

Thanks for sharing Bobby & Glad you found a way to sort it out.