Radgrid Get changed value in cell @ cleint side using java script

[Surjit Singh]

Hi Team-

I do have radgrid  in my application.I want Javascript Validations on Submit button of row.(Client side validations)
Below code in Java script gives me orignal values loaded in MasterTableView  but not changed values.
I am geting orignal values loaded in Textbox not changed by user.
***************************************************************************************************************************************************
JavaScript Code is below
 

//Check Validations for grid like Mandatory and
function Validations(sender, args)
{
              var itemIndex = args.get_commandArgument();                                 
              var row = sender.get_masterTableView().get_dataItems()[itemIndex]; //to access the row   
              var cellvalue = row._element.cells[2].innerHTML; // to access the cell value    
              alert(cellvalue);

} 

I also Tried ,

 

 

 

 

var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

 

 

 

 

var oldValues = masterTable.extractOldValuesFromItem(0);

 

alert(oldValues);

 

 

 

But it gives me error.

GRID Code is below
**<radG:RadGrid ID="RadGrid1" runat="server" OnDeleteCommand="RadGrid1_DeleteCommand"
AllowFilteringByColumn="true" AllowSorting="true" OnItemDataBound="RadGrid1_ItemDataBound"
DataSourceID="SqlDataSource1" GridLines="None" Skin="Outlook" Width="93%" OnItemInserted="RadGrid1_ItemInserted"
OnItemUpdated="RadGrid1_ItemUpdated">
<MasterTableView CommandItemDisplay="Bottom" AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1"
AllowAutomaticDeletes="True" AutoGenerateColumns="False" AllowAutomaticInserts="True"
DataKeyNames="id" ClientDataKeyNames="id" >
<FilterItemStyle HorizontalAlign="left" />
<HeaderStyle ForeColor="Navy" />
<ItemStyle BackColor="White" Height="20px" />
<AlternatingItemStyle BackColor="#E5E5E5" Height="20px" />
<Columns>
<radG:GridTemplateColumn AllowFiltering="False" UniqueName="TemplateColumn">
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl="../frames/images/ADMIN/Grid-settings.png" runat="Server" />
</ItemTemplate>
<ItemStyle Width="10px" />
</radG:GridTemplateColumn>
<radG:GridBoundColumn Display="false" ReadOnly="True" DataField="id" DataType="System.Int32"
UniqueName="id" Visible="true" SortExpression="id" HeaderText="Id">
<ItemStyle Width="100px" />
</radG:GridBoundColumn>
<radG:GridBoundColumn EditFormColumnIndex="0" DataField="Agent_Name" UniqueName="Agent_Name"
HeaderText="Agent Name" SortExpression="Agent_Name" AllowFiltering="true" AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains">
<ItemStyle Width="500px" HorizontalAlign="Left" />
</radG:GridBoundColumn>
<radG:GridBoundColumn EditFormColumnIndex="1" DataField="Phone1" UniqueName="Phone1"
HeaderText="Phone-1" SortExpression="Phone1" AllowFiltering="true" AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains" >
<ItemStyle Width="500px" HorizontalAlign="Left" />
</radG:GridBoundColumn>
<radG:GridBoundColumn EditFormColumnIndex="0" DataField="Phone2" UniqueName="Phone2"
HeaderText="Phone-2" SortExpression="Phone2" AllowFiltering="true" AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains">
<ItemStyle Width="500px" HorizontalAlign="Left" />
</radG:GridBoundColumn>
<radG:GridBoundColumn EditFormColumnIndex="1" DataField="Address" UniqueName="Address"
HeaderText="Address" SortExpression="Address" AllowFiltering="true" AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains">
<ItemStyle Width="500px" HorizontalAlign="Left" />
</radG:GridBoundColumn>
<radG:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">
<ItemStyle Width="50px" />
</radG:GridEditCommandColumn>
<radG:GridButtonColumn ConfirmText="Delete this record?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
UniqueName="DeleteColumn">
<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
</radG:GridButtonColumn>
</Columns>
<EditFormSettings ColumnNumber="2">
<FormTableItemStyle HorizontalAlign="left" Wrap="False"></FormTableItemStyle>
<FormCaptionStyle HorizontalAlign="left" CssClass="EditFormHeader"></FormCaptionStyle>
<FormMainTableStyle HorizontalAlign="left" BorderColor="black" BorderWidth="0" CellSpacing="0"
CellPadding="3" BackColor="White" Width="100%" />
<FormTableStyle HorizontalAlign="left" BorderColor="black" BorderWidth="0" CellSpacing="0"
CellPadding="2" BackColor="White" />
<FormTableAlternatingItemStyle HorizontalAlign="left" BorderColor="blue" BorderWidth="0"
Wrap="False"></FormTableAlternatingItemStyle>
<EditColumn ButtonType="ImageButton" InsertText="Add New Agent" UpdateText="Update"
UniqueName="EditCommandColumn1" CancelText="Cancel Edit">
</EditColumn>
<FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
</EditFormSettings>
<ExpandCollapseColumn Visible="False">
<HeaderStyle Width="19px"></HeaderStyle>
</ExpandCollapseColumn>
<RowIndicatorColumn Visible="False">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<CommandItemSettings AddNewRecordText="Add New Agent" />
</MasterTableView>
<ClientSettings EnableRowHoverStyle="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
<Resizing AllowRowResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
AllowColumnResize="True" ClipCellContentOnResize="False"></Resizing>
<ClientEvents OnRowDblClick="RowDblClick" OnCommand="Validations" />
</ClientSettings>
</radG:RadGrid>*

************************************************************************************************************************************************

 

***************************************************************************************************************************************************

Please suggest its very urgent.

Many Thanks
Shashank

[Veli]

Hello Surjit,

In the Validations() javascript function, you are accessing the original values in the data item, not the edited values in the edit form. sender.get_masterTableView().get_dataItems() will only return you the grid data items, not the edit forms that are shown for editing the data. To get the edited values, you need to find each input in the edit form and get its value.

To show an example approach you can take, I have attached a test page with some javascript to demonstrate the scenario. Clicking on the "

Extract edited item values" will extract all the values from the first edited item.

Veli
the Telerik team

[Miguel]

Hi Veli,

I follow your example but I could not figure out how to get the Column Unique Name  in the edit form with JS code.

Could you please help me out?
What I am doing is placing an On-Blur event on the Column Editor Text box and if the unique column is the one I am looking for, I need to add two values from the previous two cell in the edit form and place the result in other cell in the edit form.

Thanks a lot!
Miguel.

[Veli]

Hello Miguel,

You can modify the first provided code example to return a tripled: the column name, value and input control for each field. Attaching a modified project.

Veli
the Telerik team