CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapcss
GOPAL YADAV
GOPAL YADAV

Reputation: 1191

tree grid bootstrap doesn't working when it is created dynamically and it is working statically

The below code is working fine and I got proper output.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TreeView_Table_Project.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Css/jquery.treegrid.css" rel="stylesheet" />

    <script src="Js/jquery.treegrid.js"></script>
    <script src="Js/jquery.treegrid.bootstrap3.js"></script>
    <script>
        $(document).ready(function () {
            $('.tree').treegrid();

        });



    </script>

    <style>
        tr, td {
            border: 2px solid black;
        }

        td {
            padding: 10px;
        }
    </style>

</head>
<body>


    <table class="tree">
        <tr class="treegrid-1">
            <td>Root node 1</td>
            <td>Additional info</td>
        </tr>
        <tr class="treegrid-2 treegrid-parent-1">
            <td>Node 1-1</td>
            <td>Additional info</td>
        </tr>

        <tr class="treegrid-3 treegrid-parent-1">
            <td>Node 1-1</td>
            <td>Additional info</td>
        </tr>
    </table>

</body>
</html>

The below code is not working when the table is created dynamically

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Css/jquery.treegrid.css" rel="stylesheet" />
    <script src="Js/jquery.jqGrid.min.js"></script>
    <script src="Js/jquery.treegrid.bootstrap3.js"></script>
    <script src="Js/jquery.treegrid.js"></script>
    <script>

        $(document).ready(function () {
            f1();
            $('.tree').treegrid();

        });


        function f1() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Bootstrap_TreeGrid.aspx/StateAnalysis",
                data: "{}",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    drawTab(Result);
                },
                error: function (Result) {
                    alert("Error");
                }
            });
            function drawTab(data1) {

                var Result = data1;
                for (i = 0; i < Result.length; i++) {
                    var m = i + 1;
                    if (i == 0) {

                        $('<tr>', {
                            'class': 'treegrid-' + m,
                        }).appendTo($(".tree"));
                        //$(".tree").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
                        //row.append($("<tr class='treegrid'+>Jurisdiction</tr>"));
                        $('<td>', {
                            text: 'phani',
                        }).appendTo($('.treegrid-' + m));


                    }
                    else {

                        $('<tr>', {
                            'class': 'treegrid-parent-1 treegrid-' + m,
                        }).appendTo($('.tree'));

                        //$(".tree").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
                        //row.append($("<tr class='treegrid'+>Jurisdiction</tr>"));
                        $('<td>', {
                            text: 'phani',
                        }).appendTo($('.treegrid-' + m)); 
                    }


                }
            }
        }

    </script>


    <style>
        tr, td {
            border: 2px solid black;
        }

        td {
            padding: 10px;
        }


    </style>
</head>
<body> 

    <table class="tree">
    </table>
</body>
</html>

the code above is not working properly.the same code is working fine through static data.but it is not working when i am trying to create dynamically. Thanks in advance

Upvotes: 1

Views: 3595

Answers (2)

sunhan521
sunhan521

Reputation: 11

because when you init treegrid ,ajax result not yet return ,you need add async : false in your ajax function

 $.ajaxSetup({
    async : false
 });

Upvotes: 0

webbul
webbul

Reputation: 162

EDIT: I had changed the classes of the treegrid when creating the rows. Obviously, the ID should be declared before setting the parent element.

So this should do the trick for you:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <title></title>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="jquery.treegrid.css" rel="stylesheet" />

    <script src="jquery.treegrid.bootstrap3.js"></script>
    <script src="jquery.treegrid.js"></script>
    <script>

        $(document).ready(function () {
            f1();
            $('.tree').treegrid({
                expanderExpandedClass: 'glyphicon glyphicon-minus',
                expanderCollapsedClass: 'glyphicon glyphicon-plus'
            });
        });
            function f1() {
              var m = 0, line = '';
                for (i = 0; i < 3; i++) {
                    m = i + 1;
                    if (i == 0) {
                        line = '<tr class="treegrid-' + m + '">'
                          + '<td>Root node 1</td><td>Additional info</td></tr>';
                    }
                    else {
                        line = '<tr class="treegrid-' + m + ' treegrid-parent-' + i + '">'
                          + '<td>Node 1-1</td><td>Additional info</td></tr>';
                    }

                    $('.tree').append(line);
                }
            }

    </script>
    <style>
        tr, td {
            border: 2px solid black;
        }

        td {
            padding: 10px;
        }


    </style>
  </head>

  <body>
    <table class="tree"></table>
  </body>

</html>

You can also check the plunker here. Tell us if this solves your problem.

Upvotes: 2

Related Questions