How can i check tree element on button click - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: check, edit, grid, jqxgrid, jqxtree, popup, Tree

This topic contains 5 replies, has 2 voices, and was last updated by Narendra 11 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

How can i check tree element on button click Posts

March 29, 2013 at 7:18 am How can i check tree element on button click #18239

Narendra

Participant

Hi,

I am using jqxgrid with edit button column,

I am displaying columns App_id, Name and one edit column in the grid

Now requirement is that when i click on particular row edit button the row data will be displaying in popup but here another thing i want to tell you is that, in the popup I am using one jqxtree with 9 items and those 9 items have their own child elements, Here problem is that when i click on edit basing on the Name column the parent element(value is same as Name) will be checked defaultly based on particular edit button click event..

How can i achieve it?

please help me!!!!!

Thanks in advance!

March 29, 2013 at 8:20 am How can i check tree element on button click #18250

Dimitar

Participant

Hello narendra.pvnb,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
        To save the changes, click the 'Save' button in the popup dialog. To cancel the
        changes click the 'Cancel' button in the popup dialog.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                }
            };
            $('#jqxTree').jqxTree({ height: '300px', checkboxes: true });
            var items = $('#jqxTree').jqxTree('getItems');
            var firstLevelItems = new Array();
            for (var i = 0; i < items.length; i++) {
                if (items[i].level == 0) {
                    firstLevelItems.push(items[i]);
                };
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                 { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                     return "Edit";
                 }, buttonclick: function (row) {
                     // open the popup window when the user clicks a button.
                     editrow = row;
                     var offset = $("#jqxgrid").offset();
                     $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                     // show the popup window.
                     $("#popupWindow").jqxWindow('open');
                 }
                 },
                ]
            });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({
                width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
            });
            $("#popupWindow").on('open', function () {
                $("#jqxTree").jqxTree('uncheckAll');
                $("#jqxTree").jqxTree('checkItem', firstLevelItems[editrow], true);
            });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                    $('#jqxgrid').jqxGrid('updaterow', rowID, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
        <div id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                <div id='jqxTree'>
                    <ul>
                        <li item-selected='true'>Home</li>
                        <li item-expanded='true'>Solutions</li>
                        <li>Education</li>
                        <li>Financial services</li>
                        <li>Government</li>
                        <li>Manufacturing</li>
                        <li>Solutions
                            <ul>
                                <li>Consumer photo and video</li>
                                <li>Mobile</li>
                                <li>Rich Internet applications</li>
                                <li>Technical communication</li>
                                <li>Training and eLearning</li>
                                <li>Web conferencing</li>
                            </ul>
                        </li>
                        <li>All industries and solutions</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 29, 2013 at 9:54 am How can i check tree element on button click #18261

Narendra

Participant

Thanks for giving reply But it doesn’t work for me
I am sending code please check it once give me reply as early as possible

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
       <asp:HiddenField ID="hdnapplist" runat ="server" />
       <asp:HiddenField ID="hdnpagelist" runat ="server" />
    <asp:HiddenField ID="hdnapporder" runat ="server" />
     <asp:HiddenField ID="hdndisplayname" runat="server" />
     <asp:HiddenField ID="hdnAOrder" runat ="server" />
     <asp:HiddenField ID="hdnDName" runat="server" />
     <asp:HiddenField ID="Hdnappid" runat ="server" />
    <asp:HiddenField ID="Hdndeleteid" runat="server" />
    <asp:HiddenField ID="Hdneditid" runat="server" />
     <script type ="text/javascript" >
         $(document).ready(function () {
             $("#btnAddApp").click(function () {
                 $("#txtAOrder").val('');
                 $("#txtDName").val('');
                 $("#jqxAppPageListadd").jqxTree('uncheckAll');
                 $("#popupadd").jqxWindow('show');
             });
             //Save Click
             $("#btnSave").click(function (event) {
                 var aorder = document.getElementById("txtAOrder").value;
                 var dname = document.getElementById("txtDName").value;
                 if (aorder == "") {
                     return false;
                 }
                 else if (dname == "") {
                     return false;
                 }
                 document.getElementById("ContentPlaceHolder1_hdnAOrder").value = aorder;
              //   alert(document.getElementById("ContentPlaceHolder1_hdnAOrder").value);
                 document.getElementById("ContentPlaceHolder1_hdnDName").value = dname;
                 // alert(document.getElementById("ContentPlaceHolder1_hdnADesc").value);
                 $("#popupadd").jqxWindow('hide');
                 $("#frm_aftermaster").submit();
             });
         });
   </script>
      <script type ="text/javascript" >
          $(document).ready(function () {
              var data = document.getElementById("ContentPlaceHolder1_hdnpagelist").value;
              // prepare the data
              var source =
              {
                  datatype: "json",
                  datafields: [
                      { name: 'App_Id' },
                      { name: 'Child' },
                      { name: 'Display_Name' }
                  ],
                  id: 'Page_ID',
                  localdata: data
              };
              // create data adapter.
              var dataAdapter = new $.jqx.dataAdapter(source);
              // perform Data Binding.
              dataAdapter.dataBind();
              var records = dataAdapter.getRecordsHierarchy('App_Id', 'Child', 'items', [{ name: 'Display_Name', map: 'label' }, { name: 'App_Id', map: 'value' }]);
              var theme = getTheme();
              $('#jqxAppPageList').jqxTree({ hasThreeStates: true, checkboxes: true, source: records, width: '180px', theme: theme });
              $('#jqxAppPageListadd').jqxTree({ hasThreeStates: true, checkboxes: true, source: records, width: '180px', theme: theme });
              var items = $('#jqxAppPageList').jqxTree('getItems');
              var firstLevelItems = new Array();
              for (var i = 0; i < items.length; i++) {
                  if (items[i].level == 0) {
                      firstLevelItems.push(items[i]);
                  };
              };
              var theme = getTheme();
              $("#popupedit").jqxWindow({ width: 400, resizable: true, theme: 'maroon', isModal: true, cancelButton: $("#Cancel"), autoOpen: false, modalOpacity: 0.5 });
              $("#Cancel").jqxButton({ theme: 'maroon' });
              $("#btnupdate").jqxButton({ theme: 'maroon' });
              $("#popupadd").jqxWindow({ width: 400, resizable: true, theme: 'maroon', isModal: true, cancelButton: $("#addCancel"), autoOpen: false, modalOpacity: 0.5 });
              $("#addCancel").jqxButton({ theme: 'maroon' });
              $("#btnSave").jqxButton({ theme: 'maroon' });
              $("#popupdelete").jqxWindow({ width: 300, resizable: true, theme: 'maroon', isModal: true, cancelButton: $("#btnno"), autoOpen: false, modalOpacity: 0.5 });
              $("#btnno").jqxButton({ theme: 'maroon' });
              $("#btndelete").jqxButton({ theme: 'maroon' });
              var data = document.getElementById("ContentPlaceHolder1_hdnapplist").value;
              var source =
              {
                  localdata: data,
                  datatype: "json",
                  datafields:
                  [
                      { name: 'Record_ID', type: 'number' },
                      { name: 'App_ID', type: 'number' },
                      { name: 'App_Order', type: 'string' },
                      { name: 'Display_Name', type: 'string' }
                  ],
                  id: 'Record_ID',
                  deleterow: function (rowid, commit) {
                      commit(true);
                  },
                  updaterow: function (rowid, rowdata, commit) {
                      commit(true);
                  }
              };
              var dataAdapter = new $.jqx.dataAdapter(source);
              var editrow = -1;
              var cellsrenderer = function (row, column, value) {
                  return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
              }
              var columnrenderer = function (value) {
                  return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
              }
              // initialize jqxGrid
              $("#jqxappgrid").jqxGrid(
            {
                width: 470,
                height: 300,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                        { text: 'Record_ID', datafield: 'Record_ID', width: 120, hidden: true, renderer: columnrenderer },
                         { text: 'App_ID', datafield: 'App_ID', width: 120, hidden: true, renderer: columnrenderer },
                    { text: 'Application Order', datafield: 'App_Order', width: 120, align: 'center', cellsalign: 'center', renderer: columnrenderer, },
                     { text: 'Display Name', datafield: 'Display_Name', width: 170, renderer: columnrenderer },
                     {
                         text: 'Edit', datafield: 'Edit', columntype: 'button', width: 90, renderer: columnrenderer, cellsrenderer: function () {
                             return "Edit";
                         }, buttonclick: function (row) {
                             // open the popup window when the user clicks a button.
                           //  $("#frm_aftermaster").submit();
                             editrow = row;
                             var offset = $("#jqxappgrid").offset();
                             $("#popupedit").jqxWindow({ position: { x: parseInt(offset.left) + 40, y: parseInt(offset.top) + 20 } });
                             // get the clicked row's data and initialize the input fields.
                             var dataRecord = $("#jqxappgrid").jqxGrid('getrowdata', editrow);
                             var appid = dataRecord.App_ID;
                             document.getElementById("ContentPlaceHolder1_Hdnappid").value = appid;
                            // alert(appid);
                             $("#txtapporder").val(dataRecord.App_Order);
                             var name = dataRecord.Display_Name;
                             $("#txtdisplayname").val(dataRecord.Display_Name);
                          //   $("#jqxAppPageList").jqxTree('uncheckAll');
                             $("#jqxAppPageList").jqxTree('checkItem', firstLevelItems[editrow], true);
                             // show the popup window.
                             $("#popupedit").jqxWindow('show');
                         }
                     },
                    {
                        text: 'Delete', datafield: 'Delete', columntype: 'button', width: 90, renderer: columnrenderer, cellsrenderer: function () {
                            return "Delete";
                        }, buttonclick: function (rowindex) {
                            // open the popup window when the user clicks a button.
                            deleterow = rowindex;
                            var offset = $("#jqxappgrid").offset();
                            $("#popupdelete").jqxWindow({ position: { x: parseInt(offset.left) + 100, y: parseInt(offset.top) + 90 } });
                            // show the popup window.
                            $("#popupdelete").jqxWindow('show');
                            // delete row.
                            $("#btndelete").click(function () {
                                var dataRecord = $("#jqxappgrid").jqxGrid('getrowdata', deleterow);
                                var id = dataRecord.Record_ID;
                                document.getElementById("ContentPlaceHolder1_Hdndeleteid").value = id;
                                $("#popupdelete").jqxWindow('hide');
                                $("#frm_aftermaster").submit();
                             
                            });
                        }
                    }
                ]
            });
              // update the edited row when the user clicks the 'Save' button.
              $("#btnupdate").click(function () {
                  var dataRecord = $("#jqxappgrid").jqxGrid('getrowdata', editrow);
                  var id = dataRecord.Record_ID;
                  
                  document.getElementById("ContentPlaceHolder1_Hdneditid").value = id;
                  var aorder = document.getElementById("txtapporder").value;
                  var dname = document.getElementById("txtdisplayname").value;
                  document.getElementById("ContentPlaceHolder1_hdnapporder").value = aorder;
                  document.getElementById("ContentPlaceHolder1_hdndisplayname").value = dname;
                  $("#popupedit").jqxWindow('hide');
                  $("#frm_aftermaster").submit();
              });
          });
       </script>
     <div align="center"  >
        <h1 class ="heading" >List of Applications </h1>
        <table>
        <tr>
            <td colspan="3" style ="border-radius: 10px;border:  solid #CECFCE;" >
                <div id="jqxappgrid" ></div>
            </td>
            </tr>
            <tr>
                <td align ="left" >
                 <br />
                <input type="button" id="btnAddApp" class ="Post" value ="Add New Application" style="height:30px; width:160px;"/>
                </td>
            </tr>
            </table> 
            </div> 
    <div id="popupedit" class="tblspacermv">
            <div><b>Edit Application:</b></div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="left">Application Order:</td>
                        <td align="left"><input id="txtapporder" /></td>
                    </tr>
                    <tr>
                        <td align="left">Display Name:</td>
                        <td align="left"><input id="txtdisplayname" /></td>
                    </tr>
                    <tr>
                        <td align="left" valign="top">Pages:</td>
                        <td align="left"> <div id='jqxAppPageList'></div></td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 10px; height:26px;" type="button" id="btnupdate" value="Update" /><input id="Cancel" type="button" value="Cancel" /></td>
                    </tr>
                    <tr><td colspan="2"></td></tr>
                </table>
            </div>
       </div>
     <div id="popupadd" class="tblspacermv">
            <div><b>Add New Application:</b></div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="left">Application Order:</td>
                        <td align="left"><input id="txtAOrder" /></td>
                    </tr>
                    <tr>
                        <td align="left">Display Name:</td>
                        <td align="left"><input id="txtDName" /></td>
                    </tr>
                    <tr>
                        <td align="left" valign="top">Pages:</td>
                        <td align="left"> <div id='jqxAppPageListadd'></div></td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 5px; height:26px;" type="button" id="btnSave" value="Save" /><input id="addCancel" type="button" value="Cancel" /></td>
                    </tr>
                    <tr><td colspan="2"></td></tr>
                </table>
            </div>
       </div>
     <div id="popupdelete" class="tblspacermv">
            <div>Delete</div>
            <div style="overflow: hidden;" align="center">
                <table style="padding-left:70px">
                    <tr><td></td></tr>
                    <tr>
                        <td align="center"><b>Are You Confirm to delete?</b></td>
                    </tr>
                    <tr><td></td></tr>
                    <tr>
                        <td style="padding-top: 10px;" align="center">
                        <input style="margin-right: 20px;" type="button" id="btndelete" value="Yes" />
                        <input id="btnno" type="button" value="No" /></td>
                    </tr>
                   
                </table>
            </div>
       </div>
    <div style="height: 90px"></div>
</asp:Content>

Thanks in advance..!

March 29, 2013 at 10:38 am How can i check tree element on button click #18263

Dimitar

Participant

Hi narendra.pvnb,

Did you try out the example we provided you and did you experience any issues with it?

Exactly what issues do you have when running your own example?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 29, 2013 at 11:39 am How can i check tree element on button click #18264

Narendra

Participant

I want to check the parent element in the jqxtree which is placed in the popup when i click on the edit button of grid row

i have 9 rows in grid suppose

1 abc Edit Here abc have its own childs

2 bcd Edit

3 cde Edit

4 def Edit

5 efg Edit

6 fgh Edit

7 ghi Edit

8 hij Edit

9 ijk Edit

like these all are having their childs

Suppose when i click on 2nd edit button a popup will display with

–> 2
–> bcd
–> jqxtree contains all 9 records with their childrens and having checkboxes in it.

now my requirement is that the 2nd parent will be checked on particular edit row clicked.

I hope you will understand
Thank u

March 29, 2013 at 5:30 pm How can i check tree element on button click #18275

Narendra

Participant

hi
How I can check a jqxtree parent element on pageload…….

how can i achieve it?

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.