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

access rad grid cells and template column items and set them values from javascript

3 Answers 498 Views
Grid
This is a migrated thread and some comments may be shown as answers.
emrah
Top achievements
Rank 1
emrah asked on 22 Jun 2009, 09:05 AM
Hello All,


i  need access rad grid template columns ( there is mumeric text boxes in columns ) and i need access this controls from javascript runtime ?

Example :


my grid :


 

<telerik:RadGrid ID="GridBudget" runat="server" GridLines="None" Skin="Default" AllowCustomPaging="True"

 

 

ShowHeader="true" ShowFooter="true" AutoGenerateColumns="False" Width="100%"

 

 

OnItemDataBound="GridBudget_ItemDataBound">

 

 

<PagerStyle NextPageText="&amp;gt;" PrevPageText="&amp;lt;" />

 

 

<MasterTableView AllowCustomSorting="true" NoMasterRecordsText="Listelenecek rn bulunamad."

 

 

GroupLoadMode="Client" CellSpacing="-1">

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="cID" HeaderText="ID" SortExpression="BUDGET.ID"

 

 

Display="false" HeaderStyle-HorizontalAlign="Center" UniqueName="BUDGET.ID" DataType="System.Int32"

 

 

Visible="false">

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="BUDGET_NAME" HeaderText="BšT€E ADI" SortExpression="BUDGET.NAME"

 

 

HeaderStyle-HorizontalAlign="Center" UniqueName="BUDGET.NAME" DataType="System.String">

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn HeaderText="TOTAL" HeaderStyle-HorizontalAlign="Center"

 

 

UniqueName="EnterBudgetTemplate">

 

 

<ItemTemplate>

 

 

<telerik:RadNumericTextBox ID="txtTotal" runat="server" Culture="Turkish (Turkey)"

 

 

InvalidStyleDuration="100" MinValue="0" Type="Currency" Value="0" Width="100px">

 

 

<NumberFormat NegativePattern="-n" PositivePattern="n" />

 

 

<ClientEvents OnValueChanged="GridNumericChanged" />

 

 

</telerik:RadNumericTextBox>

 

 

</ItemTemplate>

 

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="JANUARY HeaderStyle-HorizontalAlign="Center"

 

 

DataField="MONTH1" UniqueName="M1_TEMPLATE">

 

 

<ItemTemplate>

 

 

<telerik:RadNumericTextBox ID="txtM1" runat="server" Culture="Turkish (Turkey)" InvalidStyleDuration="100"

 

 

MinValue="0" Type="Currency" Value="0" Width="75px">

 

 

<NumberFormat NegativePattern="-n" PositivePattern="n" />

 

 

</telerik:RadNumericTextBox>

 

 

</ItemTemplate>

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridTemplateColumn HeaderText="FEBRUARY" HeaderStyle-HorizontalAlign="Center"

.
.
.

and i have 12 months like these in columns.

and when user write a value in 'txtTotal' textboxes . i need to calculate a value per month and set them via javascript


function GridNumericChanged()

{
    

 

 

var grid = $find("<%=GridBudget.ClientID %>");

 

 

var MasterTable = grid.get_masterTableView();

 

 

var Rows = MasterTable.get_dataItems();

 

 

 

for (var i = 0; i < Rows.length; i++)

 

{

 

var row = Rows[i];

 

 

...??

}

can anybody help me for reach template column and cells from client side.

thank you.

 

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 22 Jun 2009, 10:06 AM
Hello Emrah,

Check out the following code library submission which explains on how to access the controls embedded inside templates in the grid:
Accessing server controls in a grid template on the client
In the application provided, a global registry is used to store the ID's of the required server controls. Looping over all registered elements the required server control's id can be accessed.

Hope this helps..
Princy.
0
emrah
Top achievements
Rank 1
answered on 22 Jun 2009, 10:32 AM
it seems too complicated for my scenario.

i need  one function and loop on grid items and template columns. and edit cells. and set new values.

function GridNumericChanged()

{
    

 var grid = $find("<%=GridBudget.ClientID %>");

 

 var MasterTable = grid.get_masterTableView();

 

 var Rows = MasterTable.get_dataItems(); 
 

 

for (var i = 0; i < Rows.length; i++)

 

{

 

 

var row = Rows[i];

 

 

 

...??

}

can u complete my code above ? it should be possible to reach items like that.

in my grid.

my bound column :

<telerik:GridBoundColumn DataField="cID" HeaderText="ID" SortExpression="BUDGET.ID"

 

 

 

 

 

 

Display="false" HeaderStyle-HorizontalAlign="Center" UniqueName="BUDGET.ID" DataType="System.Int32"

 

 

 

 

 

 

Visible="false">

 

 

 

 

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

 

 

 

 

</telerik:GridBoundColumn>


and my template column :




<telerik:GridTemplateColumn HeaderText="TOTAL" HeaderStyle-HorizontalAlign="Center"

 

 

 

UniqueName="EnterBudgetTemplate">

 

 

 

<ItemTemplate>

 

 

 

<telerik:RadNumericTextBox ID="txtTotal" runat="server" Culture="Turkish (Turkey)"

 

 

 

InvalidStyleDuration="100" MinValue="0" Type="Currency" Value="0" Width="100px">

 

 

 

<NumberFormat NegativePattern="-n" PositivePattern="n" />

 

 

 

<ClientEvents OnValueChanged="GridNumericChanged" />

 

 

 

</telerik:RadNumericTextBox>

 

 

 

</ItemTemplate>

 

 

 

 

 

 

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

 

 

 

</telerik:GridTemplateColumn>

0
Shinu
Top achievements
Rank 1
answered on 29 Jul 2009, 02:35 PM
Hi,

I guess you want to set the second RadNumericTextBox value in OnValueChanged event of first RadNemericTextBox. If so try out the following code and see whether it helps.

JavaScript:
 
<script type="text/javascript"
function GridNumericChanged(sender, args) 
    var row = $find(sender.get_element().parentNode.parentElement.parentNode.id); 
    var grid = $find("<%=RadGrid1.ClientID %>"); 
    var MasterTable = grid.get_masterTableView(); 
    var Rows = MasterTable.get_dataItems();  
    for (var i = 0; i < Rows.length; i++) 
    { 
        var row = Rows[i]; 
        var textbox1 = row.findControl("RadNumericTextBox1"); // Get reference to first textbox in template column 
        if(textbox1.get_id() == sender.get_id()) 
        { 
            var textbox2 = row.findControl("RadNumericTextBox2"); // Get reference to second textbox in template column 
            // Your code to find the value for second textbox 
            textbox2.set_value(0.00); // Set the second textbox value 
        } 
    }     
</script> 

-Shinu.
Tags
Grid
Asked by
emrah
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
emrah
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or