Forum Replies Created

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts

  • SumitRoy
    Participant

    thanks a lot hristo,

    ok now I have another question, the thing is how can I get the position of the cursor.
    example: say I want to a have a custom button, if I click that button it will insert some text like HELLO exactly where the cursor now placed.

    so here is it:
    BEFORE CLICKING THE BUTTON:
    Before

    AFTER CLICKING THE BUTTON:
    AFTER

    please help me to solve this,

    thanks a lot lot lot
    Sumit Roy

    in reply to: Join Two jqxTree Join Two jqxTree #84287

    SumitRoy
    Participant

    Dear JQX,
    What I want to say is I have both the trees Tree 1 and Tree 2 and both are invisible when they are initialized at page load.
    Now what I want is to call some javascript code that will merge the trees and create the following tree structure

    <div id='jqxTree1' style='visibility: hidden; float: left; margin-left: 20px;'>
    	<ul>
    		<li>Root
    		  <ul>
    			 <li>Child1</li>
    			 <li>Child2</li>
    			 <li>Child3</li>
    		  </ul>
    		</li>
    	</ul>
    </div>

    SumitRoy
    Participant

    PLEASE DISCARD THE ABOVE RESPONSE

    What I want is DropDownList with optgroup.
    See jqxDropDownList -> Init from select tag -> See the 2nd DropDownList.

    Where I want to add this DropDownList is jqxDataTable.
    See jqxDataTable -> Custom Editors -> see the Products column

    the DropDownList shown here is without any optgroup,
    what I am looking for is jqxDataTable with custom editor as DropDownList with an optgroup


    SumitRoy
    Participant

    What I want is DropDownList with option as
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/dropdownlist-from-select.htm
    see the 2nd DropDownList.

    Where I want to add this DropDownList is here
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm#demos/jqxdatatable/javascript-datatable-custom-editors.htm
    see the Products column

    the DropDownList shown here is without any option group , what I am looking for is jqxDataTable with custom editor as DropDownList with an Option Group


    SumitRoy
    Participant

    first of all thanks a lot

    so this is it…..

    .jqx-switchbutton-label {
      text-transform: none;
    }

    actually I have solved it almost same way.. but is there any thing other than this.. ?

    in reply to: Sample Date Formatting Sample Date Formatting #80165

    SumitRoy
    Participant

    thanks Hristov, thanks a lot.


    SumitRoy
    Participant

    Hi Peter Steov,
    I saw the link and it is using JSON data,
    but my requirements is say, if I have HTML Based table having buttons in some cell, and I want to wrap the entire table using jqxDataTable as
    $('#uda-setup-manage-table').jqxDataTable({//some code});
    where the uda-setup-manage-table is a HTML Table’s ID

    now after wrapping/transforming it into jqxDataTable how can get the buttons ?
    is there any such way ?


    SumitRoy
    Participant

    So can you please update your code base so that we can get event object having ‘originalEvent’ property.
    please help me..

    thanks
    Sumit Roy


    SumitRoy
    Participant

    Dear Hristo,
    thanks for the response,
    I know I can solve it in that way, but being a programmer you too know that this is a bad way of implementing it. think about a scene when there are say 20 checkboxes, I should not use 20 variables right !, nor I should use array !

    so apart from that is there any other way like using the event object I can determine it is fake or real ! ?

    thanks and regards
    Sumit Roy

    in reply to: how to add hirarchy to tree how to add hirarchy to tree #71720

    SumitRoy
    Participant

    well the above code blocks works 100% but I change it for dynamic situation
    $('#jqxTree').jqxTree('addTo', records ,selectedItem);
    instead of
    $('#jqxTree').jqxTree('addTo', [{ label: records[0].label }, { label: records[1].label}], selectedItem);

    thanks a lot for solving such a big thing for me.
    really thanks thanks and so many thanks
    Regards
    Sumit Roy.


    SumitRoy
    Participant

    thanks a lot sir.

    thanks & regards
    SumitRoy

    in reply to: how to add hirarchy to tree how to add hirarchy to tree #71665

    SumitRoy
    Participant

    Hi Dimitar,
    here is an example of the problem I faced.

    
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title id='Description'>JSON TREE</title>
          <link rel="stylesheet" href="jqx.base.css" type="text/css" />
          <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
          <!-- <script type="text/javascript" src="demos.js"></script> -->
          <script type="text/javascript" src="jqxcore.js"></script>
          <script type="text/javascript" src="jqxdata.js"></script>
          <script type="text/javascript" src="jqxbuttons.js"></script> 
          <script type="text/javascript" src="jqxscrollbar.js"></script>
          <script type="text/javascript" src="jqxpanel.js"></script>
          <script type="text/javascript" src="jqxtree.js"></script>
          <script type="text/javascript" src="jqxmenu.js"></script>
          <!-- Latest compiled and minified CSS -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <!-- Optional theme -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
          <!-- Latest compiled and minified JavaScript -->
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div id='content'>
             <script type="text/javascript">
                var records ;
                      $(document).ready(function () {
                $('#jqxTree').jqxTree();
                      $('#jqxTree').css('visibility', 'visible');
                var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px',  height: '56px', autoOpenPopup: false, mode: 'popup' });
                      var clickedItem = null;
                var attachContextMenu = function () {
                      // open the context menu when the user presses the mouse right button.
                      $("#jqxTree li").on('mousedown', function (event) {
                              var target = $(event.target).parents('li:first')[0];
                              var rightClick = isRightClick(event);
                              if (rightClick && target != null) {
                                  $("#jqxTree").jqxTree('selectItem', target);
                                  var scrollTop = $(window).scrollTop();
                                  var scrollLeft = $(window).scrollLeft();
                                  contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                                  return false;
                              }
                          });
                      }
                attachContextMenu();
                $("#jqxMenu").on('itemclick', function (event) {
                          var item = $.trim($(event.args).text());
                          switch (item) {
                              case "Add Item":
                                  var selectedItem = $('#jqxTree').jqxTree('selectedItem');
                                  if (selectedItem != null) {
                    console.log(records);
                	var itemToAdd={ source: records};
                                      $('#jqxTree').jqxTree('addTo', itemToAdd ,selectedItem);
                	$('#jqxTree').jqxTree('refresh');
                	$('#jqxTree').jqxTree('render');
                                  }
                                  break;                    
                          }
                      });
                // disable the default browser's context menu.
                      $(document).on('contextmenu', function (e) {
                          if ($(e.target).parents('.jqx-tree').length > 0) {
                              return false;
                          }
                          return true;
                      });
                      function isRightClick(event) {
                var rightclick;
                if (!event) var event = window.event;
                if (event.which) rightclick = (event.which == 3);
                else if (event.button) rightclick = (event.button == 2);
                return rightclick;
                }
                
                var data =[
                {'id': '2','parentid':'1','text' : 'Mango'},
                {'id':'3','parentid':'1','text':'Apple'},					
                ];
                          // prepare the data
                          var source =
                          {
                              datatype: "json",
                              datafields: [
                                  { name: 'id' },
                                  { name: 'parentid' },
                                  { name: 'text' }
                              ],
                              id: 'id',
                              localdata: data
                          };
                          // create data adapter.
                          var dataAdapter = new $.jqx.dataAdapter(source);
                          // perform Data Binding.
                          dataAdapter.dataBind();
                          // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                          // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                          // specifies the mapping between the 'text' and 'label' fields.  
                          records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                         
                          
                      });
                  
             </script>
             <div id='jqxTree' style="width:600px;height:300px;overflow:auto;">
                <ul>
                   <li id='1' item-selected='true'>Home</li>
                </ul>
             </div>
             <div id='jqxMenu'>
                <ul>
                   <li>Add Item</li>
                   <li>Remove Item</li>
                </ul>
             </div>
          </div>
       </body>
    </html>
    

    What I want is when you right click on Home and select Add Item it will add dynamically two children within in (Home Node), what I got is a single node with name ‘Item’

    Please help me sir.
    Thanks & Regards
    SumitRoy

    • This reply was modified 9 years, 1 month ago by  SumitRoy.
    in reply to: how to add hirarchy to tree how to add hirarchy to tree #71547

    SumitRoy
    Participant

    thanks for the reply sir,

    but the data structure I passed was ok but it was not able to add any tree. the records is exactly same as your example records based on JSON. But I dont know why it is not reflecting on the tree


    SumitRoy
    Participant

    Thanks for the reply,
    can you please demonstrate with an example, at least show me how can add custom attribute using value to tree so that it is available in its dom.

    thanks
    sumit roy


    SumitRoy
    Participant

    here is the solution

    var item = $(‘#jqxTree’).jqxTree(‘getSelectedItem’);
    var id= $(item).attr('id')

    thanks
    Sumit Roy

    • This reply was modified 9 years, 1 month ago by  SumitRoy.
Viewing 15 posts - 1 through 15 (of 17 total)