This is a migrated thread and some comments may be shown as answers.

Javascript on each item

1 Answer 100 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Aldo
Top achievements
Rank 2
Aldo asked on 05 Jun 2013, 10:40 AM
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>

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 10 Jun 2013, 10:43 AM
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.
Tags
ListView
Asked by
Aldo
Top achievements
Rank 2
Answers by
Eyup
Telerik team
Share this question
or