NestedViewTemplate radgrid in client side

24 posts, 0 answers
  1. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 15 Jan Link to this post

    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

     

  2. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 19 Jan in reply to karin Link to this post

    please, I need your help
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 20 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 20 Jan in reply to Viktor Tachev Link to this post

    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

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 22 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 23 Jan in reply to Viktor Tachev Link to this post

    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

  8. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 23 Jan in reply to karin Link to this post

    the problem that i'm facing to make the links between the three grids is where I put this symbol (>>>) in the previous post ,  
  9. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 27 Jan Link to this post

    please, I need your help
  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 27 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 31 Jan Link to this post

    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.

  12. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 01 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 02 Feb in reply to Viktor Tachev Link to this post

    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>

  14. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 03 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 03 Feb in reply to Viktor Tachev Link to this post

    Hello Viktor,

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

     

    RadGrid1

    >RadGrid2

        

  16. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 03 Feb in reply to karin Link to this post

    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

  17. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 04 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 10 Feb in reply to Viktor Tachev Link to this post

    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,

  19. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 11 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  20. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 12 Feb in reply to Viktor Tachev Link to this post

    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

  21. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 15 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  22. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 21 Feb in reply to Viktor Tachev Link to this post

    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.

  23. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 23 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  24. karin
    karin avatar
    19 posts
    Member since:
    Jan 2016

    Posted 02 Mar in reply to Viktor Tachev Link to this post

    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.

  25. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017