Javascript on each item

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

    Posted 05 Jun 2013 Link to this post

    we're using JustGage ( 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" });

    <telerik:RadListView ID="rlDash" runat="server" onneeddatasource="rlDash_NeedDataSource" onitemcommand="rlDash_ItemCommand">
                    <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 style="float:right;width:50%;">
                                <div class="itemDashGauge" id="gaugeCosts">
                                <div class="itemDashGauge" id="gaugeFaults">
                                <div class="itemDashGauge" id="gaugeMaintenance">

  2. Eyup
    Eyup avatar
    4074 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:

    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
        <ClientEvents OnRowCreated="rowCreated" />
    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.

    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.
Back to Top