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

[emrah]

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.

 

[Princy]

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.

[emrah]

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>

[Shinu]

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.