Javascript on each item

[Aldo]

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>

[Eyup]

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