Question

I am developing a web page in which a rad grid displays the list of exams. I included a template column which shows count down timer when the exam is going to expire.

Code is as given below:

 <telerik:RadGrid ID="radGrid" runat="server" AutoGenerateColumns="false">
        <MasterTableView>
            <Columns>
 <telerik:GridTemplateColumn HeaderText="template" DataField="Date">
                    <ItemTemplate>
                        <script language="JavaScript" type="text/javascript">
                            TargetDate = '<%# Eval("Date") %>';
                            BackColor = "white";
                            ForeColor = "black";
                            CountActive = true;
                            CountStepper = -1;
                            LeadingZero = true;
                            DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
                            FinishMessage = "It is finally here!";
                        </script>

                        <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js" type="text/javascript"></script>

                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

I am giving DataTable as datasource to this grid. But my problem is , the template column is showing data only for the first record and the value taken is from the last row in the DataTable.

For Ex: If I give data as given below, I can see 3 records but with only the first record displaying the counter with last value(10/10/2010 05:43 PM).

02/02/2011 01:00 AM

08/09/2010 11:00 PM

10/10/2010 05:43 PM

Could you please help in this??

Thanks,
Mahesh

Answer 1

You are going to need to rewrite that javascript to work with multiple elements.

Hopefully this jsfiddle is enough of a working example to get you going.