Remove From My Forums

Create Tree Structure based on Database Value

Question

User-1241097802 posted

I have one table in which i store DATA as shown below

select secOrderSOAPId,secOrderLevelId,secOrderPrefId,secOrderDataId,secFKOrderDataId 
from M_SectionOrderInfo where secOrderSOAPId='179'


secOrderSOAPId	secOrderLevelId	secOrderPrefId	secOrderDataId	secFKOrderDataId
 
179	        1	        1	        14	        0
179	        1	        2	        19	        0
179	        1	        3	        22	        0
179	        1	        4	        25	        0
179	        2	        1	        15	        14
179	        2	        2	        20	        19
179	        2	        3	        23	        22
179	        2	        4	        26	        25
179	        3	        1	        16	        15
179	        3	        2	        21	        20
179	        3	        3	        24	        23

Now i have one page and inside the Page_Load event I am executing the below query. It will display me "CSectionName " the DATA WHOSE secFKOrderDataId ='0' . Now This name should be shown in link form.

SELECT t1.CSectionId,t1.CSectionName,t2.secOrderSOAPId,t2.secFKOrderDataId 
FROM M_SectionConfiguration as t1 INNER JOIN M_SectionOrderInfo as t2
ON t1.CSectionId = t2.secOrderDataId where t2.secOrderSOAPID='179' and t1.stats_flag  <> 'D' and t2.secFKOrderDataId='0'


CSectionId	CSectionName	secOrderSOAPId	secFKOrderDataId
14	        NewText	        179	        0
19	        NewD	        179	        0
22	        NNDate	        179	        0
25	        N2Date	        179	        0

When Page Run the Format should be

NewText
NewD
NNDate
N2Date

Now here is the All RECORD

CSectionId	CSectionName	secOrderSOAPId	secFKOrderDataId
14	        NewText	        179	        0
19	        NewD	        179	        0
22	        NNDate	        179	        0
25	        N2Date	        179	        0
15	        NewNo	        179	        14
20	        NNText	        179	        19
23	        DFormat	        179	        22
26	        N3Date	        179	        25
16	        NewDate	        179	        15
21 	        NNNo	        179	        20
24	        N1Date	        179	        23

Now WHAT I WANT And What i have done

1) I have already fetch the Data in page load Event when "secFKOrderDataId=0" but now little confuses which controller i suppose to use or How to perform this operation

<script type="text/javascript">
$(document).ready(function () {
            function getUrlParameter(name) {
                name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
                var results = regex.exec(location.search);
                return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
            };
    var SOAPDId ='179';
    console.log(SOAPDId);
    var section = new Array();
    $.ajax({
        type: "POST",
        url: "../Provider/webmethodcall.aspx/SectionTree",
        data: JSON.stringify({ 'QueryID': SOAPDId}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var successMessage = JSON.parse(data.d);
            console.log(successMessage);
            section = JSON.parse(data.d);
            $.each(section, function (i, jsondata) {
                $("#sectionlist").append("<a  href=" + jsondata.CSectionName + " title=" + jsondata.CSectionName + " id=" + jsondata.secOrderDataId + ">" + jsondata.CSectionName + "</a><br/>");
            });
        }
    });
});
    </script>

[WebMethod(EnableSession = true)]
        public static string SectionTree(string QueryID)
        {
                SOAP_Master_Details_Info SOAPObj = new SOAP_Master_Details_Info();
                DataTable dt = new DataTable();
                DataSet dsproblem = new DataSet();
                dsproblem = SOAPObj.GetSectionOrderById(QueryID);
                if (dsproblem != null && dsproblem.Tables.Count > 0 && dsproblem.Tables[0].Rows.Count > 0)
                {
                    dt = dsproblem.Tables[0];
                    return ConvertDataTabletoString(dt);
                }
            else
            {
                return "";
            }
        }

2) When i click on the let say "NewText " I want to display "NewNo" Next to it and again when i click on "NewNo" i want to display the "NewDate"

NewText > NewNo > NewDate
NewD
NNDate
N2Date

If I Click on

NewText 
NewD     > NNText > NNNo
NNDate
N2Date

SOLUTION

Question 1)

<script type="text/javascript">
    $(document).ready(function () {
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        };
        var SOAPDId = '179';
        console.log(SOAPDId);
        var section = new Array();
        var sectionLevel2 = new Array();
        var sectionLevel3 = new Array();
        $.ajax({
            type: "POST",
            url: "../Provider/webmethodcall.aspx/SectionTree",
            data: JSON.stringify({ 'QueryID': SOAPDId }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var successMessage = JSON.parse(data.d);
                console.log(successMessage);
                section = JSON.parse(data.d);
                $.each(section, function (i, jsondata) {
                    //$("#sectionlist").append("<a href='javascript: void (0);' title=" + jsondata.CSectionName + " id=" + jsondata.secOrderDataId + " data-marker=" + jsondata.secOrderDataId+">" + jsondata.CSectionName + "</a><br/>");
                    var NewData = '<div> &nbsp; <input type="checkbox" name="' + jsondata.secOrderDataId + '" id="' + jsondata.secOrderDataId + '" chk-marker="' + jsondata.CSectionName+'" class="chkremCF"/> <a href="javascript:void(0);" class="remCF" data-marker="' + jsondata.secOrderDataId + '">' + jsondata.CSectionName + '</a> </div>';
                    $("#sectionlist").append(NewData);
                });
            }
        });
        //SectionList Start Level 2
        $("#sectionlist").on('click', '.chkremCF', function () {
            marker_Level1Data = $(this).attr('chk-marker');
            console.log(marker_Level1Data);
            var txtLevel1 = $("#<%= txtSectionData.ClientID %>").val();
            $("#<%= txtSectionData.ClientID %>").val(txtLevel1+marker_Level1Data);
        });
        $("#sectionlist").on('click', '.remCF', function () {
            $("#sectionlistLevel2").html("");
            $("#sectionlistLevel3").html("");
            marker_ref = $(this).attr('data-marker');
            console.log(marker_ref);
            $.ajax({
                type: "POST",
                url: "../Provider/webmethodcall.aspx/SectionTreeLevelTwo",
                data: JSON.stringify({ 'SOAPId': marker_ref }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var successMessage = JSON.parse(data.d);
                    console.log(successMessage);
                    sectionLevel2 = JSON.parse(data.d);
                    $.each(sectionLevel2, function (i, jsondata) {
                        //$("#sectionlist").append("<a href='javascript: void (0);' title=" + jsondata.CSectionName + " id=" + jsondata.secOrderDataId + " data-marker=" + jsondata.secOrderDataId+">" + jsondata.CSectionName + "</a><br/>");
                        var dataLevel2 = '<div> &nbsp;<input type="checkbox"/> <a href="javascript:void(0);" class="remCFLevel2" data-markerTwo="' + jsondata.CSectionId + '">' + jsondata.CSectionName + '</a> </div>';
                        $("#sectionlistLevel2").append(dataLevel2);
                    });
                }
            });
        });
        //Above is SectionList End Level 2
        //SectionList Start Level 3
        $("#sectionlistLevel2").on('click', '.remCFLevel2', function () {
            $("#sectionlistLevel3").html("");
            marker_refL3 = $(this).attr('data-markerTwo');
            console.log(marker_refL3);
            $.ajax({
                type: "POST",
                url: "../Provider/webmethodcall.aspx/SectionTreeLevelTwo",
                data: JSON.stringify({ 'SOAPId': marker_refL3 }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var successMessage = JSON.parse(data.d);
                    console.log(successMessage);
                    sectionLevel3 = JSON.parse(data.d);
                    $.each(sectionLevel3, function (i, jsondata) {
                        //$("#sectionlist").append("<a href='javascript: void (0);' title=" + jsondata.CSectionName + " id=" + jsondata.secOrderDataId + " data-marker=" + jsondata.secOrderDataId+">" + jsondata.CSectionName + "</a><br/>");
                        var dataLevel3 = '<div> &nbsp;<input type="checkbox"/> <a href="javascript:void(0);" class="remCFLevel2" data-markerTwo="' + jsondata.CSectionId + '">' + jsondata.CSectionName + '</a> </div>';
                        $("#sectionlistLevel3").append(dataLevel3);
                    });
                }
            });
        });
        //Above is SectionList End Level 3
    });
    </script>

<table style="border:double">
                <tr>
                    <td id="sectionlist"></td>
                    <td id="sectionlistLevel2"></td>
                    <td id="sectionlistLevel3"></td>
                </tr>
            </table>

[WebMethod(EnableSession = true)]
        public static string SectionTreeLevelTwo(string SOAPId)
        {
            SOAP_Master_Details_Info SOAPObj = new SOAP_Master_Details_Info();
            DataTable dt = new DataTable();
            DataSet dsproblem = new DataSet();
            //int intSOAPId = Convert.ToInt32(SOAPId);
            dsproblem = SOAPObj.GetSectionOrderByIdLevel2(SOAPId);
            if (dsproblem != null && dsproblem.Tables.Count > 0 && dsproblem.Tables[0].Rows.Count > 0)
            {
                dt = dsproblem.Tables[0];
                return ConvertDataTabletoString(dt);
            }
            else
            {
                return "";
            }
        }

Question 2)

Solve.

Thursday, March 12, 2020 10:12 AM

Answers

0

Sign in to vote
User288213138 posted

Hi Programming,

SOLUTION

Question 1)

NewText > NewNo > NewDate NewD NNDate N2Date

Or

NewText NewD > NNText > NNNo NNDate N2Date

Has your first question been solved? The question you are now facing is how to display the Data in particular format as above?

I tried to test your code and found that it cannot reproduce your problem.

The first is that in your WebMethod, there are two methods I don’t know, GetSectionOrderByIdLevel2() and ConvertDataTabletoString().

The second is whether txtSectionData is the id of a textbox?

In order to reproduce your problem correctly, please post more details code about your question.

Best regards,

Sam
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, March 13, 2020 7:08 AM

Answered by:

Create Tree Structure based on Database Value

Question

Answers