Manually add item to list from javascript

4 posts, 0 answers
  1. Bobby
    Bobby avatar
    2 posts
    Member since:
    Feb 2012

    Posted 11 Feb 2013 Link to this post

    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

  2. Chris
    Chris avatar
    58 posts
    Member since:
    Feb 2012

    Posted 11 Feb 2013 Link to this post

    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 ;)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bobby
    Bobby avatar
    2 posts
    Member since:
    Feb 2012

    Posted 11 Feb 2013 Link to this post

    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
  5. Chris
    Chris avatar
    58 posts
    Member since:
    Feb 2012

    Posted 11 Feb 2013 Link to this post

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