title says all, it is possible to do that?
as far as i know, the only properties avaiable is "OK" and "Cancel" button.

thanks in advance

there is still no solution for my problem??

i really need this feature.
thanks

goor afternoon,

i have a problem using dnd feature on my tree.

here is my code:

Code:

// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.

$(function(){
  $('#tree_admin_pages').tree({
    url: $('#admin_pages_data').data('tree-url'),
    method: "get",
    animate: true,
    lines: true,
    dnd: true,
    queryParams: {},
    onStartDrag: function(node){
      console.log(node);
    },
    onStopDrag: function(node){
      console.log(node);

    },
    onDrop: function(target,source,point){
      console.log(target);
      console.log(source);
      console.log(point);
    },
    onContextMenu: function(e, node){
      e.preventDefault();
      // expand current node tree jika ada child
      $(this).tree('expand',node.target);
      // select current node
      $(this).tree('select',node.target);
      // show menu action
      $('#cm_tree_admin_page').menu("show",{
        top:e.pageY,
        left: e.pageX
      });

      // dapatkan child current node
      var child = $(this).tree('getChildren', node.target);
      // jika node memiliki child maka menu delete disable
      if (child.length > 0){
        $('#cm_tree_admin_page').menu('disableItem', $('#cm_tree_admin_page .delete_page')[0]);
      }else{
        $('#cm_tree_admin_page').menu('enableItem', $('#cm_tree_admin_page .delete_page')[0]);
      }

    },
    onExpand: function(node){
      // dapatkan child current node
      var child = $(this).tree('getChildren', node.target);
      // jika node memiliki child maka menu delete disable
      if (child.length > 0){
        $('#cm_tree_admin_page').menu('disableItem', $('#cm_tree_admin_page .delete_page')[0]);
      }
    },
    onLoadSuccess: function(node, data){
      // expand all nodes saat success load
      $(this).tree("expandAll");
    }
  });

  // define ckeditor
  // CKEDITOR.replace('admin_page_page_content');
  CKEDITOR.config.height = 400;

  $('#cm_tree_admin_page').menu({
    onClick: function(item){
      var target = item.target,
          node = $('#tree_admin_pages').tree('getSelected'),
          subdomain = $('#admin_pages_data').data("subdomain");
      // jika tidak ada node yang dipilih, maka return false
      if (node == []) return false;
      // check berdasarkan class
      if ($(target).hasClass("edit_page")){
        // function dari nst_cms, nb: semua function dengan prefix nc* ada di nst_cms.js
        nc_dynamic_link({href: "/admin/pages/"+node.id+"/edit"});
        // nc_dynamic_link({href: "/admin/pages/"+nc_parameterize(node.text)+"/edit"});
      }else if ($(target).hasClass("delete_page")){
        $.messager.confirm("Confirmation", "Are you sure?", function(r){
          if (r){
            nc_dynamic_link({href: "/admin/pages/"+node.id, "data-method": "delete", rel: "nofollow"});
          }
        });
      }else if ($(target).hasClass("show_page")){
        if (node.forward_url == "" || node.forward_url == null){
          nc_dynamic_link({href: nc_url_subdomain_build(subdomain)+node.path, target: "_blank"});
        }else{
          nc_dynamic_link({href: node.forward_url, target: "_blank"});
        }
      }
    }
  });

  $('#page_title').bind("keydown keyup", function(){
    var obj_val = $(this).val();
    $('#page_url').val(nc_parameterize(obj_val));
  });
});

problem begin, when i start dragging and dropping tree node, and show lots of jquery error message.
am i miss something on my code?

i was using easyui version 1.4.3.

many thanks for the answer.

hello again,

title says all,

it is possible?, or i just download some patch for my current version?

thanks in advance

thanks again stworthy for your fast response, i'll try it asap.

thanks stworthy for your fast response.
one more question, can i make that header column colorize? specially for those sub column header ?
thanks in advance

hello again.

i have a simple question, but may be a bit difficult for to do that.
 
if it possible to make datagrid header format like this ?:
___________________________________
             |            column band             |
header 1 |----------------------------------  |
             | col 1     | col 2       | col 3      |
             |----------------------------------  |
             |sub col 1 | sub col 2 | sub col 3|
-----------------------------------------------

i already try to make datagrid achieve just like that, but the result not as expected.

here my code:

Code:

list_data.datagrid({
      // url: "#{sc_load_data_audit_trials_path(:prm => params[:prm])}",
      method: "get",
      fit: true,
      title: "Audit Trails",
      idField: "id",
      toolbar: "#tb_list_data",
      resizeHanlde: "right",
      striped: true,
      rownumbers: true,
      frozenColumns: [
        [{field: 'field_name', title: "Field Name / State", width: 150, sortable: false, halign: 'left', align: 'center', rowspan: 2}],
        []
      ],
      columns: [
        [
          [{title: 'test 1', colspan: 3, halign: 'center'}],
          [
            {field: 'test1', title: 'test1', colspan: 1},
            {field: 'test2', title: 'test1', colspan: 1},
            {field: 'test3', title: 'test1', colspan: 1}
          ]
        ],
        [
          {field: 'test1', title: 'test1'},
          {field: 'test2', title: 'test1'},
          {field: 'test3', title: 'test1'}
        ]
      ]
    });

           

thanks in advance

thanks for response sir, are you succed doing this?

hello again,

i have a little problem using datagrid filter extension, and this is first time i meet with this problem.
my problem is, when i try to filter the datagrid, result from filter always calling twice, and the weirdest is that row become multiple, for example , when i filter something just said it return 2 record which mean it's 2 rows, but in my case, the datagrid is request again to server, (until here i think it's ok) , but the problem is showing up. on the second request, record become multiple which mean 4 record.

i already try to debug it on my application log, and on that second request, i check the query result is 2, but when after loaded into datagrid, become 4.? why it is happen? is i miss something?

here is my code:

Code:

<div class='tb' id='tb_grid_wizard'>
      <a class="easyui-linkbutton" href="javascript:void(0)" iconCls="icon-add" id="add_row" onclick="add_row();">Add Row</a>
    </div>
    <script>
      // start VAR global atau yang dipakai berulang-ulang untuk function dibawah
      
      var frm_url                                          ; // variable untuk url save, update, dan delete form
      var cmenu                                            ;
      var rep_obj           = 'b_product_b_attr'                ; //CUSTOMIZE
      var $list_data        = $('#list_data')                   ; // define id yang di gunakan sebagai datagrid.
      var $frm_dlg          = $('#frm_dlg')                     ; // define id yang di gunakan sebagai form modal.
      var $frm              = $('#frm')                         ; // define id yang digunakan sebagai form di dalam form modal.
      var url_crud_row      = "/bmod/product/b_product_b_attrs/control_data_pivot?prm=4801"; // CUSTOMIZE define url yang digunakan untuk proses save, update, dan delete datagrid.
      var init_url          = "/bmod/product/b_product_b_attrs/sc_counter?prm=4801"; //define url yang digunakan untuk init data ketika create new data.
      var is_master_detail  = true; // custom master detail;
      
      // stop VAR
      
      $(function(){
      
        $('#list_data').datagrid({
          url:'/bmod/product/b_product_b_attrs/sc_load_data_pivot_index?prm=4801',
          method:'get',
          toolbar: '#tb_grid_wizard',
          fitColumns:false,
          fit: true,
          rownumbers: true,
          striped: true,
          idField: 'id',
          remoteFilter: true,
          autoRowHeight: true,
          checkOnSelect: false,
          selectOnCheck: false,
          view: scrollview,
          frozenColumns:[
          [
            {field:'action',title: 'Nav', align: 'center', halign: 'center', sortable: false, rowspan: 2, width: 100,
              formatter: function(value,row,index){
                var s = '<a href="#" onclick="save_attr_row(this, $(\'#list_data\'))" data-no-turbolink="true" id="save" class="easyui-linkbutton" iconCls="icon-save" title="Save"></a>';
                var c = '<a href="#" onclick="cancel_attr_row(this, $(\'#list_data\'))" data-no-turbolink="true" id="cancel" class="easyui-linkbutton" iconCls="icon-cancel" title="Cancel"></a>';
      
                var e = '<a href="#" onclick="edit_attr_row(this, $(\'#list_data\'))" data-no-turbolink="true" id="edit" class="easyui-linkbutton" iconCls="icon-edit" title="Edit"></a>';
                var d = '<a href="#" onclick="delete_attr_row(this, $(\'#list_data\'), state)" data-no-turbolink="true" id="delete" class="easyui-linkbutton" iconCls="icon-remove" title="Delete"></a>';
                
                if (row.editing){
                  return s+" | "+c;
                }else{
                  return d;
                }
              }
            }
          ],[]  
          ],
          columns: [[{title: 'Attributes',halign: 'center', colspan: 4}],[{field: 'attribute_0', title:'COLOUR', align:'left', halign:'center',width:200, sortable: false,
                            formatter: function(value, row,index){
                              return row.attribute_0_name;
                            },
                            editor:{
                              type:'combogrid',
                              options:{
                                url: '/ncs_lookups/a_lov_user_as',
                                queryParams:{role:9, prm_parent:'42', prm_active: true},
                                mode: 'remote',
                                method: 'get',
                                panelWidth: 300,
                                idField: 'lov_id_user',
                                textField: 'lov_title_b',
                                height:22,
                                required: true,
                                tipPosition: 'top',
                                attr_id: '124',
                                onShowPanel:function(){return rowHeight(this);},
                                columns: [[
                                  {field: 'lov_title_b', width: 230,title: 'Name', halign: 'center', sortable: true}
                                ]]
                              }
                            }
                          },{field: 'attribute_1', title:'BRAND', align:'left', halign:'center',width:200, sortable: false,
                            formatter: function(value, row,index){
                              return row.attribute_1_name;
                            },
                            editor:{
                              type:'combogrid',
                              options:{
                                url: '/ncs_lookups/a_lov_user_as',
                                queryParams:{role:9, prm_parent:'44', prm_active: true},
                                mode: 'remote',
                                method: 'get',
                                panelWidth: 300,
                                idField: 'lov_id_user',
                                textField: 'lov_title_b',
                                height:22,
                                required: true,
                                tipPosition: 'top',
                                attr_id: '125',
                                onShowPanel:function(){return rowHeight(this);},
                                columns: [[
                                  {field: 'lov_title_b', width: 230,title: 'Name', halign: 'center', sortable: true}
                                ]]
                              }
                            }
                          },{field: 'attribute_str_2', title: 'TYPE', align: 'left', halign: 'center', width: 200, sortable: false,
                            editor: {
                              type: 'textbox',
                              options: {
                                validType: 'maxLength[50]',
                                required: true,
                                attr_id: '126'
                              }
                            }
                          },{field: 'attribute_bool_3', title: 'NEW', align: 'center', halign: 'center', width: 100, sortable: false,
                            formatter: function(value,row,index){
                              if (row.attribute_bool_3 == 1){
                                row.attribute_3_name = 'TRUE';
                                return row.attribute_3_name;
                              }else{
                                row.attribute_3_name = 'FALSE';
                                return row.attribute_3_name;
                              }
                            },
                            editor: {
                              type: 'checkbox',
                              options: {on: 1, off: 0, attr_id: '171'}
                            }
                          }]],
          // onHeaderContextMenu: function(e, field){
          //   e.preventDefault();
          //   if (!cmenu){
          //     createColumnMenu($list_data);
          //   }
          //   cmenu.menu('show',{
          //     left: e.pageX,
          //     top: e.pageY
          //   });
          // },      
          onCheck: function(index,row){
            start_edit(this);
          },
          onCheckAll: function(rows){
            start_edit(this);
          },
          onUncheck: function(index,row){
            stop_edit(this, row);
          },
          onUncheckAll: function(rows){
            stop_edit(this, rows);
          },
          onBeforeEdit: function(index,row){
            row.editing = true;
            updateActions(index, $(this));
            loadLinkbutton(this);
            state.op = "edit";
          },
          onBeginEdit: function(index,row){
            var field = $(this).datagrid('getColumnFields');
      
            /*
            for(var i=0; i< field.length;i++){
              var col_opt = $(this).datagrid('getColumnOption', field[i]);
      
              row[field[i]+"_attr_id"] = col_opt.attr_id;
            }
            */
          },
          onAfterEdit: function(index, row, changes){
            row.editing = false;
      
            var data = $(this).datagrid('getData');
            var rows = data.rows;
      
            if (data.total > 1){
              var count  = 0;
      
              for(var i=0; i< rows.length; i++){
                var vrow = rows[i];
                
                if (index != i){
                  if (JSON.stringify(row) == JSON.stringify(vrow)){
                    count += 1; 
                  }         
                }
              }
      
              if (count == 0){
                get_attr_change($(this), index, row, this);
              
              }else{
                $(this).datagrid('acceptChanges');
                updateActions(index, $(this));
                loadLinkbutton(this);
                      
                state.op = 'show';
                state.row = '';
                $(this).datagrid('beginEdit', index);
                $.messager.alert('Info','Each record must uniqe.','info');      
              }
      
            }else{
              get_attr_change($(this), index, row, this);
              // $(this).datagrid('acceptChanges');
              // updateActions(index, $(this));
              // loadLinkbutton(this);
                    
              // state.op = 'show';
              // state.row = '';
            }
      
          },
          onEndEdit: function(index,row,changes){
            var field = $(this).datagrid('getColumnFields');
      
            var id_attr = "";
            var produk_name = "";
      
            for(var i=0; i < field.length; i++){
              var col_opt = $(this).datagrid('getColumnOption', field[i]);
      
              if (col_opt.editor.type == 'combogrid'){
                var ed = $(this).datagrid('getEditor', {index: index, field: field[i]});
                var text = $(ed.target).combogrid('getText');
                var value = $(ed.target).combogrid('getValue');
      
                row[field[i]+"_name"] = text;
                id_attr += value;
                produk_name += " "+text;
      
              }else if (col_opt.editor.type == 'textbox'){
                var ed = $(this).datagrid('getEditor', {index: index, field: field[i]});
                var value = $(ed.target).textbox('getValue');
      
                produk_name += " "+value;
      
              }else if (col_opt.editor.type == 'checkbox'){
                if (row[field[i]] == 1){
                  row[field[i]+"_name"] = "TRUE";
                  // row[field[i]] = "TRUE";
                }else{
                  row[field[i]+"_name"] = "FALSE";
                  // row[field[i]] = "FALSE";
                }
      
                var text = row[field[i]+"_name"]
                var value = row[field[i]]
      
                id_attr += value;
                produk_name += " "+text;
              }
            }
      
            row["vproduk_name"] = produk_name;
            row["vid_attr"]  = id_attr;
      
          },
          onCancelEdit: function(index,row){
            row.editing = false;
            updateActions(index, $(this));
            loadLinkbutton(this);
            state.op = "show";
          },
          onLoadSuccess:function(data){
            var ck = $('.datagrid-header-check').find('input[type="checkbox"]');
            ck.remove();
            loadLinkbutton(this);
            state.op = "show";
                    
            if (data.rows == []){
              if (data.rows[0].product_id != null){
                obj.idParent = data.rows[0].product_id;
              }
            }
      
            var panel = $(this).datagrid('getPanel').find('.datagrid-view2');
            var body = $(panel).find('.datagrid-body');
            if (data.total == 0) {
              $(body).append("<div class='no-result'>Please click button add row first.</div>");
            } else {
              $(body).remove('.no-result');
            }
          },
          onSelect: function(index,row){
            // $(this).datagrid('unselectRow',index);
          }
        });
      
        $('#list_data').datagrid('enableFilter',[
          {field: 'action', type: 'label'}
        ]);
      });
      
      function loadDataFromParent(idParent){
        $.get("/bmod/product/b_product_b_attrs/sc_load_datagrid_column?prm=4801",
          function(data){
            obj.idParent = idParent;
            
            if (data.code_string != "" || data.code_string != null){
              eval("("+data.code_string+")");
            }
            $('#list_data').datagrid('enableFilter',[
              {field: 'action', type: 'label'}
            ]);
          }
        );
      
      }
      
      function save_attr_row(target, obj){
        obj.datagrid('endEdit',getRowIndex(target));
      }
      
      function cancel_attr_row(target, obj){
        if (state.row == "new_row"){
          obj.datagrid('rejectChanges');
          var data = obj.datagrid('getData');
      
          if (data.total > 0){
            obj.datagrid('reload');
            // updateActions(getRowIndex(target), $(target));
            // loadLinkbutton(target);
          }
        }else{
          if (obj.datagrid('getChanges').length){
            obj.datagrid('rejectChanges');
          }else{
            obj.datagrid('cancelEdit', getRowIndex(target));
          }
        }
        state.row = "";
      }
      
      function edit_attr_row(target, obj){
        obj.datagrid('beginEdit', getRowIndex(target));
      }
      
      function delete_attr_row(target, obj, state){
        $.messager.confirm("Confirmation","Are you sure to delete this product attribute ?",function(r){
          if (r){
            var index = getRowIndex(target);
            obj.datagrid('deleteRow', index);
      
            get_attr_change($('#list_data'), index, {}, target);
            // obj.datagrid('acceptChanges');
      
            // var data = obj.datagrid('getData');
      
            // if (data.total > 0){
            //   obj.datagrid('reload');
            // }else{
            //   obj.datagrid('loadData',[]);
            // }
          }
        });
      }
      
      function add_row(){
        if (is_master_detail){
          if (typeof obj.idParent === "undefined"){
            $.messager.alert('Warning', 'Create parent data first before create detaill data.');
            return false;
          }
        }
      
        var row = $('#list_data').datagrid('getChecked');
        
        if (state.op == "edit"){
          $.messager.alert('Warning', 'There are current record being edited. You can not editing different record in the same time.');
          return false;
        }
      
        $('#list_data').datagrid('insertRow',{
          index: 0,
          row: {}
        });
      
        state.row = "new_row";
        $('#list_data').datagrid('selectRow',0);
        $('#list_data').datagrid('beginEdit',0);
      }
      
      function new_row(dg){
        $.messager.alert('Info',"Please use button 'Add Row' below.", 'info');
        return false;
      }
      
      function new_form(state){
        $.messager.alert('Info',"Please use button 'Add Row' below.", 'info');
        return false;
      }
      
      function get_attr_change(dg, index, row, target){
        // var dg = $(target);
      
        if (dg.datagrid('getChanges').length){
          
          var inserted = dg.datagrid('getChanges','inserted');
          var updated = dg.datagrid('getChanges', 'updated');
          var deleted = dg.datagrid('getChanges','deleted');
      
          var changedRow = new Object();
      
          if (inserted.length){
            changedRow['inserted'] = JSON.stringify(inserted);
          }
      
          if (updated.length){
            changedRow['updated'] = JSON.stringify(updated);
          }
      
          if (deleted.length){
            changedRow['deleted'] = JSON.stringify(deleted);
          }
        }
      
        if (typeof changedRow == 'undefined' || changedRow == null){
          updateActions(index, $(target));
          loadLinkbutton(target);
                      
          state.op = 'show';
          state.row = '';
          return false;  
        }
      
        // AJAX REQ
        $.post(url_crud_row, 
          {
            row_data: changedRow
          }, function(data){
            if (data.msg == "OK"){
              dg.datagrid('acceptChanges');
      
              if (state.row == 'new_row'){
                updateActions(index, dg);
                loadLinkbutton(target);
              }else if (state.op == 'edit'){
                updateActions(index, dg);
                loadLinkbutton(target);
              }else{
                var page = getCurrentPage(dg);
      
                if (page == 1){
                  dg.datagrid('reload');
                }else{
                  dg.datagrid('refetch');
                }
                // jika datagrid empty.
                if (isNaN(page)){
                  dg.datagrid('reload');
                }
              }
              state.op = 'show';
              state.row = '';
            } else {
              if (state.row == 'new_row'){
                dg.datagrid('rejectChanges');
              }else if (state.op == 'edit'){
                dg.datagrid('beginEdit',index);
              }else{
                dg.datagrid('rejectChanges');
              }
      
              $.messager.alert('Info', data.msg, 'info');
            }
          });
      }
    </script>

many thanks for the answer and explanation (i hope you understand with my explanation).
if you guys need more information about my problem, just replay my post.

thanks stworthy for your fast response,
i'll try it and i'll report it to you if its works or not.

thanks stworthy for your answer.
but,

is there a way to using like formatter properties on datagrid, so i can do something like bind the value with another value contains string?
because i really need this plugin to support that feature.

thanks in advance

hello again,

want to ask about pivot gird extension, btw its great plugin.

after seeing and try pivot grid demo, i see, value on pivot grid is only support for number value, but not string value,

is it possible to use string as value on pivot grid? because when i try to mov field that contain string value to 'value' panel, all value become 0 (zero)

thanks in adnvance

hello again,

the title says all.

it is possible to do that? . i already read carefully the document, but there is not method of function to get the ok button, so i can bind that button to some function.

my purpose to do this is because i have already a static function that it called with many form, and i can't change or modify that function which will impact to other form .

many thanks for the answer

thanks stworthy for your fast response. it works

hello again..

just to the point.
is it possible to hide specified tabs? in the docs, there is only hideHeaders method that hide all tabs.

thanks in advance