Set RadMaskedTextBox from RadGrid selected value

[Kurt Kluth]

I would like to set a RadMaskedTextBox when a user clicks on a row from a RadGrid.  I think I am on the right path but need a little assistances to pull it together.  

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function SetFax(sender, eventArgs) {
            //sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            alert("Click on row instance: " + eventArgs.get_gridDataItem().get_dataItem()["FaxNum"]);
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadMaskedTextBox runat="server" ID="_Phone2" Mask="(###) ###-####" EmptyMessage="Enter fax number or search favorites" RenderMode="Lightweight" ValidationGroup="Group1" />
            <telerik:RadGrid runat="server" ID="_Phone1" Height="100px" Width="425px" DataTextField="FaxNum" DataValueField="FaxNum"
                DataSourceID="DataSource1" EnableLoadOnDemand="false" AllowMultiRowSelection="false">
                <ClientSettings Selecting-AllowRowSelect="true">
                    <Scrolling AllowScroll="true" />
                    <ClientEvents OnRowClick="SetFax" />
                </ClientSettings>
                <MasterTableView AutoGenerateColumns="false" DataKeyNames="FaxNum">
                    <Columns>
                        <%--<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn1"></telerik:GridClientSelectColumn>--%>
                    <telerik:GridBoundColumn UniqueName="Description" HeaderText="Description" HeaderStyle-HorizontalAlign="Center" DataField="Description" />
                    <telerik:GridBoundColumn UniqueName="FaxNum" HeaderText="Fax #" HeaderStyle-HorizontalAlign="Center" Datafield="FaxNum" />
                    <telerik:GridBoundColumn UniqueName="LastSent" HeaderText="Last Sent" HeaderStyle-HorizontalAlign="Center" DataField="LastSent" />
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

[Doncho]

Hi Kurt,

Thank you for the provided code!

You can find how to reach cells and values of GridItems on the client-side in the Accessing Grid Cells, Cell Values and Raw DataKey Values Client-Side article.

Once you get the needed value from the RadGrid you will need to get a reference to the RadMaskedBox control and set its value, see how in the Get Client-side Reference to a Control Object and Getting and Setting Values articles.

As for the current case since the "FaxNum" field is set as DataKeyName of the MasterTable view you can also add it as ClientDataKeyName to be able to use it on the client-side.

<MasterTableView AutoGenerateColumns="false" DataKeyNames="FaxNum" ClientDataKeyNames="FaxNum">

Then you will be able to get the desired value and set it to the MaskedTextBox as shown below:

function SetFax(sender, eventArgs) {
    //get datakeyvalue - the desired field should be set as ClientDataKeyName in the MasterTableView declaration
    var faxNum = eventArgs.get_gridDataItem().getDataKeyValue("FaxNum");

    //to reach non-datakey cell
    //var cell = eventArgs.get_gridDataItem().get_cell("FaxNum");
    //var faxNum = $telerik.$(cell).text().trim();

    var mTextBox = $find('<%= _Phone2.ClientID%>');
    mTextBox.set_value(faxNum)
}

Please give a try to the suggested above and let me know how it goes.

Kind regards,
Doncho
Progress Telerik

[Kurt Kluth]

Great thank you Doncho for that.  It worked well and only made one additional change because when selecting the value it didn't put it into the radmaskbox very well.

mTextBox.set_value(faxNum.replace(/\D/g, ''))