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 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
huejiitech
Top achievements
Rank 1
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

Sort by
0
Princy
Top achievements
Rank 1
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
0
huejiitech
Top achievements
Rank 1
answered on 28 Sep 2013, 03:50 AM
Thanks Princy,


it works for me, but i've modified some code and logics to suites my needs...

thank you again...
Tags
Grid
Asked by
huejiitech
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
huejiitech
Top achievements
Rank 1
Share this question
or