Javascript on each item

2 posts, 0 answers
  1. Aldo
    Aldo avatar
    39 posts
    Member since:
    Feb 2011

    Posted 05 Jun 2013 Link to this post

    Hi,
    we're using JustGage (http://www.justgage.com/) to transform some <div> inside an ItemTemplate.

    The problem is that client side the javascript works ever and only on the first loaded item.
    We try to move the <script> tag inside the ItemTemplate, but in that way the script add more gauges ever in the first item <div>.

    How can we run the script for each item loaded ?

    <script type="text/javascript">
            $(document).ready(function () {
                        var gc = new JustGage({ id: "gaugeCosts", value: 4552, min: 0, max: 15000, title: "title 1" });
                        var gf = new JustGage({ id: "gaugeFaults", value: 12, min: 0, max: 100, title: "title 2" });
                        var gm = new JustGage({ id: "gaugeMaintenance", value: 95, min: 0, max: 100, title: "title 3" });
                });
        </script>

    <telerik:RadListView ID="rlDash" runat="server" onneeddatasource="rlDash_NeedDataSource" onitemcommand="rlDash_ItemCommand">
                <ItemTemplate>
                    <div class="itemDash">
                        <div class="itemDashText">
                            <div style="float:left;width:40%;margin-right:3px;">
                                <asp:Label runat="server" ID="lblID" Text='<%# Eval("id") %>' Visible="false"></asp:Label>
                                <asp:LinkButton runat="server" ID="lblDescription" CommandName="Select" CssClass="itemDashTitle" ToolTip="<%$ Resources:Locations, localita_ttVisualizza %>"><%# Eval("description") %></asp:LinkButton>
                                <asp:ImageButton runat="server" ID="btnDelete" Height="20px" Width="20px" CommandName="Delete" ImageUrl="~/Images/delete.png" ToolTip="<%$ Resources:Locations, localita_ttElimina %>"/>
                            </div>
                            <div style="float:right;width:50%;">
                                <div class="itemDashGauge" id="gaugeCosts">
                                </div>
                                <div class="itemDashGauge" id="gaugeFaults">
                                </div>
                                <div class="itemDashGauge" id="gaugeMaintenance">
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </telerik:RadListView>

  2. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 10 Jun 2013 Link to this post

    Hello Aldo,

    Please note that you can try out our RadGauge control to achieve the requested functionality:
    http://demos.telerik.com/aspnet-ajax/gauge/examples/overview/defaultcs.aspx

    As for the requirement - first, you will need to assign the runat="server" attribute to your divs so they generate a unique client ID. Then, you can traverse and modify the grid items using the following approach:
    Copy Code
    function pageLoad() {
        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
        var dataItems = masterTable.get_dataItems();
        for (var i = 0; i < dataItems.length; i++) {
            var item = dataItems[i];
        }
    }
    Alternatively, you can use this client event:
    Copy Code
    <ClientSettings>
        <ClientEvents OnRowCreated="rowCreated" />
    </ClientSettings>
    JavaScript:
    Copy Code
    function rowCreated(sender, args) {
        var item = args.get_item();
    }

    Having a reference to the item, you can use the latter of these methods to access the div so you can execute your custom implementation:
    ( first argument is the container element to search into, second one is the ID of the searched object ):
    Copy Code
    var container = item.get_element();
    // finding RadControl:
    var control = $telerik.findControl(container, "ControlID");
    // finding element:
    var element = $telerik.findElement(container, "ElementID");

    Hope this helps.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top