jQuery UI Widgets Forums Navigation Tree How can i check tree element on button click

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

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

  • 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!


    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/


    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..!


    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/


    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


    Narendra
    Participant

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

    how can i achieve it?

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

You must be logged in to reply to this topic.