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

Get the selected row value from radgrid and pass it to a radtextbox when next button click and prev button click

2 Answers 596 Views

Grid

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

huejiitech asked on 27 Sep 2013, 02:13 AM

Hi to all,

I have a radgrid, rad textbox and 2 radbutton(next and prev)

my scenario is the radgrid are populated with data and set the property of "single row selection on client"

ex.
filename
apple
Cherry.
tuna
dog
bottle

when the user select the 2nd row of radgrid and click the radbutton "next", the value of 3rd row will pass to the radtextbox and automatically the 3rd row will be selected and highlighted.
if the user click the radbutton "Prev" , the value of 1st row will pass to the radtextbox and automatically the 1st row will be selected and highlighted.

*Note: if there's "NO" selected row and click the next button the first row must be the return value and automatically the first row will be selected and highlighted. if it reached the end of the record it will just prompt message "end"

and vise versa of previous button.

I want to solve this via JavaScript....

please help

2 Answers, 1 is accepted

answered on 27 Sep 2013, 10:45 AM

Hi ,

Please try the following code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" GridLines="None" AllowPaging="true">

<MasterTableView DataKeyNames="OrderID" ClientDataKeyNames="OrderID">

<Columns>

<telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />

</Columns>

</MasterTableView>

<ClientSettings Selecting-AllowRowSelect="true">

<ClientEvents OnRowSelected="OnRowSelected" />

</ClientSettings>

</telerik:RadGrid>

<telerik:RadTextBox ID="TextBox1" runat="server">

</telerik:RadTextBox>

<telerik:RadButton ID="RadButton1" runat="server" Text="Prev" OnClientClicked="OnPrev"

AutoPostBack="false">

</telerik:RadButton>

<telerik:RadButton ID="RadButton2" runat="server" Text="Next" OnClientClicked="OnNext"

AutoPostBack="false">

</telerik:RadButton>

JS:

<script type="text/javascript">

var rowindex = 0;

function OnRowSelected(sender, eventArgs) {

rowindex = eventArgs.get_itemIndexHierarchical();

}

function OnPrev(sender, eventArgs) {

rowindex = rowindex - 1;

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

var textbox = document.getElementById("<%=TextBox1.ClientID %>");

var DataItem = masterTable.get_dataItems()[rowindex].get_element();

masterTable.selectItem(DataItem, true);

textbox.innerText = masterTable.get_dataItems()[rowindex].getDataKeyValue("OrderID");

return false;

}

function OnNext(sender, eventArgs) {

rowindex = parseInt(rowindex) + 1;

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

var len = masterTable.get_dataItems().length;

var textbox = document.getElementById("<%=TextBox1.ClientID %>");

if (len == rowindex) {

alert("end of rows");

}

else {

var DataItem = masterTable.get_dataItems()[rowindex].get_element();

textbox.innerText = masterTable.get_dataItems()[rowindex].getDataKeyValue("OrderID");

masterTable.selectItem(DataItem, true);

}

return false;

}

</script>

Thanks,
Princy