NestedViewTemplate radgrid in client side

[Karin]

Hi,

I have NestedTemplate radgrid in my application. I want  how to access the RadNumericTextBox inside Nestedtemplate (RadGrid3)  client side.

 <telerik:RadGrid ID="RadGrid1"  runate="server" ... >
            <MasterTableView>
                   <NestedViewTemplate>
                       <telerik:RadGrid ID="RadGrid2" runat="server" ... >
                        <MasterTableView >
                                <NestedViewTemplate>

                                     <telerik:RadGrid ID="RadGrid3" runat="server"  .. >

                                            <MasterTableView ... >

                                                      <Columns>

                                                                     <telerik:GridTemplateColumn HeaderText="cmd" UniqueName="_order">
                                                                             <ItemTemplate>
                                                                                            <telerik:RadNumericTextBox ID="_order_txt" runat="server" >
                                                                                            </telerik:RadNumericTextBox>
                                                                              </ItemTemplate>
                                                                              <FooterTemplate>
                                                                                      <telerik:RadNumericTextBox ID="_order_sum_txt" runat="server">
                                                                                      </telerik:RadNumericTextBox>
                                                                               </FooterTemplate>
                                                                      </telerik:GridTemplateColumn>

Regrads

 

[Karin]

please, I need your help

[Viktor Tachev]

Hi Karin,

In order to locate a RadNumericTextBox in the nested grid you can use logic similar to the following. You would likely need to modify the code, however, it should get you on track.

function getNumericInput() {
    var grid = $telerik.findControl(document, "RadGrid3");
    var firstItem = grid.get_masterTableView().get_dataItems()[0];
    var cell = firstItem.get_cell("_order");

    var numeric = $telerik.findControl(cell, "_order_txt");
}

With that said, would you elaborate in more on what is the functionality that you would like to implement?


Regards,
Viktor Tachev
Telerik

[Karin]

Hi Viktor,

Sorry for the inconvenience

The method that you have sent, it worked on the first item only.

I want to make a link between grid 1, 2 and 3 to reach the RadNumericTextBox

this my code:

          function getNumericInput() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (grid) {
                    var masterTableView = grid.get_masterTableView();
                    if (masterTableView) {
                        var rows = masterTableView.get_dataItems();
                        for (var i = 0; i < rows.length; i++) {
                            var row = rows[i];

>>>> link between grid1 and grid2

                            var grid2 = $telerik.findControl(document, "RadGrid2");
                            if (grid2) {
                                var masterTableView2 = grid2.get_masterTableView();
                                var rows2 = masterTableView2.get_dataItems();
                                for (var j = 0; j < rows2.length; j++) {
                                    var row2 = rows2[j];

>>>> link between grid2 and grid3

                                    var grid3 = $telerik.findControl(document, "RadGrid3");
                                    if (grid3) {
                                        var masterTableView3 = grid3.get_masterTableView();
                                        var rows3 = masterTableView3.get_dataItems();
                                        for (var z = 0; z < rows3.length; z++) {
                                            var row3 = rows3[z];
                                             row.findControl("_order_txt").set_value(1000);
                                    }
                                }
                            }
                        }
                    }
                }
            }

Regards

[Viktor Tachev]

Hi Karin,

The example from my previous post illustrates how you can access the RadNumericTextBox control in the first row. You can use it as a starting point to implement the behavior you would like to have.

With that said, please describe what is your final goal? What is the feature that you would like to implement?

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Viktor,

my purpose is to merge three Grids together, in which the last grid (RadGrid3) should be equiped with a "Freeze The header".

This option is not yet available in the GridTableView in the hierarchy RadGrid. That's why I am using these three intermingled three grids.

In the last grid (RadGrid3), I have a RedNumericTextBox which is out of reach. my question is how to attain this control (RadNumericTextBox) to set a value.

I would like to user the client side method.

 PS:

you have given me previously a way by which I can access the control (RadNumericTextBox) in the first hierarchy to first item. what I'm really in need of is how to reach the control of all the subsequent hierarchy items.

Regards

[Karin]

the problem that i'm facing to make the links between the three grids is where I put this symbol (>>>) in the previous post ,  

[Karin]

please, I need your help

[Viktor Tachev]

Hello Karin,

You can use jQuery to get reference of all the innermost RadGrid controls that are visible. Then, you can iterate through the data items for each grid and implement the required behavior.

function getNumericInput() {
    var expandedGrids = $telerik.$(".RadGrid[id*='RadGrid3']");

    for (var i = 0; i < expandedGrids.length -1 ; i++) {
        var grid = $find(expandedGrids[i].id);
        var firstItem = grid.get_masterTableView().get_dataItems()[0];
        var cell = firstItem.get_cell("_order");

        var numeric = $telerik.findControl(cell, "_order_txt");
    }

}

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Mr. VIKTOR,

I would like to thank you for this method you have sent to me for it solved my insurmountable problem.

What I'm still in need of is to access a RadNumericTextBox which is located in the footer of the NestedViewTemplate RadGrid, using the same method which you have provided me with.

Thanks in advance for bothering you so much lately.

PS: This RadNumericTextBox is found in the third RadGrid Footer (which is the last one - RadGrid3) in the hierarchy.

Regards.

[Viktor Tachev]

Hello Karin,

You can find the numeric TextBox in the footer using the following approach. Most of the code is the same as before. The approach for getting reference of the input is also similar.

function getNumericInput() {
    var expandedGrids = $telerik.$(".RadGrid[id*='RadGrid3']");

    for (var i = 0; i < expandedGrids.length -1 ; i++) {
        var grid = $find(expandedGrids[i].id);
        var masterTableView = grid.get_masterTableView();
        var firstItem = masterTableView.get_dataItems()[0];
        var cell = firstItem.get_cell("_order");

        var numeric = $telerik.findControl(cell, "_order_txt");

        var footerNumeric = $telerik.findControl(masterTableView.get_element(), "_order_sum_txt");


    }

}

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Viktor,

This is my code:

function calcule_row() {
                var expandedGrids = $telerik.$(".RadGrid[id*='RadGrid3']");
                for (var i = 0; i < expandedGrids.length -1; i++) {
                    var grid = $find(expandedGrids[i].id);
                    if (grid) {
                        var masterTableView = grid.get_masterTableView();
                        var footerNumeric = $telerik.findControl(masterTableView.get_element(), "_order_sum_txt");
                    }
                }
            }

footerNumeric is always null :(

 

PS: I call this function

<ItemTemplate>
         <telerik:RadNumericTextBox ID="_order_txt" runat="server" >

                 <ClientEvents OnValueChanged="calcule_row" />
         </telerik:RadNumericTextBox>
</ItemTemplate>

[Viktor Tachev]

Hello Karin,

Please ensure that the footer is displayed for the innermost grid. Set the ShowFooter property for RadGrid3 to true.

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Viktor,

I already put it in the RadGrid3 as equal (ShowFooter = True), but it didn't work :(

 

RadGrid1

>RadGrid2

    

[Karin]

Hello Viktor,
I already put it in the RadGrid3 as equal (ShowFooter = True), but it didn't work :(

RadGrid1
    >RadGrid2

       >RadGrid3

The Footer is visible in the bottom of RadGrid3

 Regards

[Viktor Tachev]

Hello Karin,

Try to debug the JavaScript code and see if there is an error. You can place the word debugger in the code and open the developer tools in the browser by pressing F12. Additionally you can inspect the DOM and see why the input is not selected.

If the issue persists please send us a runnable sample that we can investigate.

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Viktor,

I used the developer tools the footerNumeric is always  undefind.

this my code

<telerik:RadGrid ID="RadGrid1"  runate="server" ... >
             <MasterTableView>
                    <NestedViewTemplate>
                        <telerik:RadGrid ID="RadGrid2" runat="server" ... >
                         <MasterTableView >
                                 <NestedViewTemplate>
                                     <telerik:RadGrid ID="RadGrid3" runat="server" ShowFooter="True" .. >
                                            <MasterTableView ShowFooter="True">
                                                      <Columns>
                                                                     <telerik:GridTemplateColumn HeaderText="cmd" UniqueName="_order">
                                                                              <ItemTemplate>
                                                                                             <telerik:RadNumericTextBox ID="_order_txt" runat="server" >
                                                                                             </telerik:RadNumericTextBox>
           <ClientEvents OnValueChanged="calcule_order_row" />
                                                                               </ItemTemplate>
                                                                               <FooterTemplate>
                                                                                       <telerik:RadNumericTextBox ID="_order_sum_txt" runat="server">
                                                                                       </telerik:RadNumericTextBox>
                                                                                </FooterTemplate>
                                                                       </telerik:GridTemplateColumn>

-------------------------------------------------------------------------

function calcule_order_row(sender, args) {
var rowindx = sender._element.getAttribute("rowindex");
                var expandedGrids = $telerik.$(".RadGrid[id*='RadGrid3']");
                for (var i = 0; i < expandedGrids.length ; i++) {
                    var grid = $find(expandedGrids[i].id);
                    masterTableView = grid.get_masterTableView();
                    if (grid) {
                        var row = masterTableView.get_dataItems()[rowindx];
                        var _order_cell = row.get_cell("_order");
                        var var_order = $telerik.findControl(_order_cell, "_order_txt");
                    }
                    var footerNumeric = $telerik.findControl(masterTableView.get_element(), "_order_sum_txt");
                }
}

-------------------------------------------------------

   Protected Sub RadGrid3_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
        If TypeOf e.Item Is GridDataItem Then
            Dim item As GridDataItem = TryCast(e.Item, GridDataItem)
            Dim indx_order_txt As RadNumericTextBox = TryCast(item.FindControl("_order_txt"), RadNumericTextBox)
            indx_order_txt.Attributes.Add("rowindex", item.ItemIndex.ToString())
        End If
    End Sub

 

I sent you the code to show me where is the error because the footerNumeric is always  undefind,

I need to access the radnumerictextbox (_order_sum_txt) in footer hierarchy radgrid3 (RadGrid1 > RadGrid2 > RadGrid3)

 

Regards,

[Viktor Tachev]

Hello Karin,

I am attaching a sample project where the RadNumericTextBox in the footer can be accessed as expected on my end. Please give it a try and see how it works for you.

In order to run the sample you need to open it as a Web Site project and add the Telerik.Web.UI.dll in the Bin folder.

Also, note that in order for the numeric input to be accessed it should be visible on the page. Thus, the inner grid needs to be expanded.

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Viktor,

Your sample project was run perfectly, but when I put UseStaticHeaders="True" to the RadGrid3 the footerNumeric is undefined and return null.

 <telerik:RadGrid runat="server" ID="RadGrid1" .....................>
            <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">
                <NestedViewTemplate>
                    <telerik:RadGrid runat="server" ID="RadGrid2" ............>
                        <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">
                            <NestedViewTemplate>
                                <telerik:RadGrid runat="server" ID="RadGrid3" OnNeedDataSource="RadGrid3_NeedDataSource"
                                    AutoGenerateColumns="false" ShowFooter="true" AllowPaging="true" PageSize="10">
                                    <MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">
                                        <Columns>
                                            <telerik:GridTemplateColumn HeaderText="cmd" UniqueName="_order">
                                                <ItemTemplate>
                                                    <telerik:RadNumericTextBox ID="_order_txt" runat="server">
                                                         <ClientEvents OnValueChanged="getNumericInput" />
                                                    </telerik:RadNumericTextBox>
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    <telerik:RadNumericTextBox ID="_order_sum_txt" runat="server">
                                                    </telerik:RadNumericTextBox>
                                                </FooterTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">
                                            </telerik:GridBoundColumn>
                                        </Columns>
                                    </MasterTableView>

<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>
</ClientSettings>
                                </telerik:RadGrid>
                            </NestedViewTemplate>

 

Thanks in advance for bothering you so much lately.

PS: I need the header in RadGrid3 to be freezing.

Regards

[Viktor Tachev]

Hi Karin,

When scrolling is enabled the footer is rendered in a different container than the rows. In this case you would need to modify the logic for finding the NumericTextBox in the footer.

function getNumericInput() {

    var expandedGrids = $telerik.$(".RadGrid[id*='RadGrid3']");

    for (var i = 0; i < expandedGrids.length ; i++) {
        var grid = $find(expandedGrids[i].id);
        var masterTableView = grid.get_masterTableView();
        var firstItem = masterTableView.get_dataItems()[0];
        var cell = firstItem.get_cell("_order");

        var numeric = $telerik.findControl(cell, "_order_txt");

        var footerElement = $telerik.$(grid.get_element()).find(".rgFooter")[0];

        var footerNumeric = $telerik.findControl(footerElement, "_order_sum_txt");


        alert(footerNumeric.get_id());
    }

}

Regards,
Viktor Tachev
Telerik

[Karin]

Hello Viktor,

This code worked perfectly and all the insurmountable problem have been solved till now.

I'll would like to thank you heartily and apologize in case  I disturbed you, I really feel indebted to you.

In case something came up, I wouldn't spare you :) 

Regards.

[Viktor Tachev]

Hi Karin,

I am glad that the suggestions are working and you have the functionality up and running.

Have a great day :)

Regards,
Viktor Tachev
Telerik

[Karin]

Hi Viktor,

I Used this method to change the BackGround color to a RadNumericTextBox exists inside a RadGrid3 but it's not working

function getNumericInput() {
    var expandedGrids = $telerik.$(".RadGrid[id*='RadGrid3']");
    for (var i = 0; i < expandedGrids.length ; i++) {
        var grid = $find(expandedGrids[i].id);
        var masterTableView = grid.get_masterTableView();
        var firstItem = masterTableView.get_dataItems()[0];
        var cell = firstItem.get_cell("_order");
        var numeric = $telerik.findControl(cell, "_order_txt");
        numeric.get_styles().EnabledStyle[0] += "background-color: Blue";

       numeric.updateCssClass();
    }
}

 

Can you help me please

Regards.

[Viktor Tachev]

Hi Karin,

Please open a separate thread for any unrelated query you may have. This way the information in the thread will be more consistent and easier to find.

With that said, in order to change the appearance for the numeric textbox you can add a custom CSS class to it. You can do this as illustrated in the code snippet below:

numericInput.get_element().classList.add("customClass")

And to apply the styles add the following rule:

html body .RadInput input.customClass {
    background: red;
}

Regards,
Viktor Tachev
Telerik