ANY HELP???

Hi,

quite pro with datagrid, but simply cannot achieve to get a combobox in cell editing right with keyboard - I want:
-) when not in editing mode => keys to move left/right/up/down/enter etc as normal in the datagrid
-) but when in edit mode of the combobox column I want the keypress to target the combobox only, i.e. up/down for the box entries, enter to select entry and finish editing of the cell etc

In which event to bind what... any help pleeeaaaaase.
Thx, Mike.  

Hi,

there is example of master detail datagrid with subgrid editable.
How can I get the parent datagrid also editable?

See http://jsfiddle.net/b044e3p6/
and https://www.jeasyui.com/forum/index.php?topic=4334.msg10415#msg10415

Thx a lot!

BR Michael.

All solved as per this post https://www.jeasyui.com/forum/index.php?topic=4334.msg10415#msg10415.
Thx to https://www.jeasyui.com/forum/index.php?action=profile;u=250469

BR Michael.

Hello,

I want to implement the cellediting in subgrid as shown in http://jsfiddle.net/b044e3p6/
referred by stworthy in a comment per January 06, 2015, 11:55:51 PM.
But this - reproducably - runs into blocking the website with the following steps:

1. click + in first row of master grid (Speed Info...) to expand
2. click first cell of the first subgrid to edit (08/23/2012)
3. click + in second row of master grid (And Info...) to expand
4. click first cell of the second subgrid to edit (08/23/2012)
5. click - to collapse the second row of master grid
6. click - to collapse the first row of master grid
7. and then expand again the first row of the master grid (point 1) and try clicking the first cell of subgrid (point 2)
same when expaning second row and trying again to edit any cell in second subgrid.
-> website gets blocked

Actually I need cell editing in both master grid and subgrid and was playing around for quite some time last days
trying to get this done, but always encountered this crash of website. First I was thinking this is my faulty cell editing
attempt for both grids, but now I understand something is fishy even before that.

Any idea?

With a lot of thanks in advance!!!
BR Michael.

Hi jahangir,

thx a lot again, now works like a charm!!!

Just took me almost 2 days to figure out that below <span> in the php script which is meant for tooltip only,
completely scrambled the css and whatever I did this turned the respective cols 180° upside down and not 90° as I wanted.

Anyway now it is super fine, thx to your help!!!

Code:

      while($rowSkills = mysqli_fetch_assoc($resultSkills)) 
      {

          $fieldinfooverview = array( 
              'name'  => 'COL_' . $rowSkills['ID'],     
              //'title' => '<span title="' . $rowSkills['NAME'] . '">' . $rowSkills['NAME'] . '</span>',   // to include tooltip
              'title' => $rowSkills['NAME'],   
              'width' => 45,
              'align' => 'left'
          );
          $fieldinfooverview_set[] = $fieldinfooverview;
          $rowSkills_set[] = $rowSkills;
      }

Greetings!!!
BR Michael.

[u r the man - THX A LOT!!!]

Dear jahangir,

u r the man - THX A LOT!!! I owe you something!

Just 2 things I noticed, maybe there is a hint also for these.
And thx again a lot in advance.

BR Michael.

1.
when I create the cols hard coded like below it works to apply the css code you gave, if I create the cols dynamically
then it is simply not working.

this code

Code:

for (var i=0; i<dgcolsoverview_len; i++)
{
  logconsole("Col"+i+"=["+JSON.stringify(colStructOverview[0][i])+"]");
	var span = dg.datagrid('getPanel').find('div.datagrid-header td[field="'+colStructOverview[0][i].field+'"] span');
	var cell = dg.datagrid('getPanel').find('div.datagrid-header td[field="'+colStructOverview[0][i].field+'"] .datagrid-cell');	
  if (i==0)
  {
    logconsole("handle col employee name");
  	span.css('display','block');
  	span.css('width','141px');
  	span.css('position','relative');
  	span.css('left','0px');   
  	span.css('top','128px');    
  	cell.css('width','141px');
  	cell.css('height','150px');
  }
  else if (i==(dgcolsoverview_len-1))
  {
    logconsole("handle col SUM");
  	span.css('display','block');
  	span.css('width','46px');
  	span.css('position','relative');
  	span.css('left','0px');   
  	span.css('top','128px');    
  	cell.css('width','46px');
  	cell.css('height','150px');
  }
  else
  {
    logconsole("handle one of the n value cols = ["+colStructOverview[0][i].field+"]");
  	span.css('display','block');
  	span.css('transform','rotate(-90deg)');		
  	span.css('width','36px');
  	span.css('position','relative');
  	span.css('left','0px');   
  	span.css('top','115px');    
  	cell.css('width','36px');
  	cell.css('height','150px');
  }
}

works when table is created with the columns this way:

Code:

      <table id="dgSkillReport" class="easyui-datagrid" style="width:100%;"    
             data-options="
                rownumbers:   true,				 
                fitColumns:   false,
                singleSelect: true,
                showFooter:   true                
                ">     
        <thead>
            <tr>
                <th data-options="field:'MITARBEITER',   width:150,align:'left',resizable:false, formatter:EasyUIDatagridGeneralFormatter">Employee Name</th>
                <th data-options="field:'1', width:45, align:'center',resizable:false, formatter:EasyUIDatagridGeneralFormatter">View Formwork Colummns</th>
                <th data-options="field:'2', width:45, align:'center',resizable:false, formatter:EasyUIDatagridGeneralFormatter">Value2</th>
                <th data-options="field:'3', width:45, align:'center',resizable:false, formatter:EasyUIDatagridGeneralFormatter">Value3</th>
                <th data-options="field:'SUM',    width:55,align:'right',resizable:false, formatter:EasyUIDatagridGeneralFormatter">SUM</th>
            </tr>
        </thead>
      </table>

with 

but the css does not work when table created without cols and cols done dynamically like

Code:

      <table id="dgSkillReport" class="easyui-datagrid" style="width:100%;"    
             data-options="
                rownumbers:   true,				 
                fitColumns:   false,
                singleSelect: true,
                showFooter:   true                
                ">     
      </table>


              ...
              for (var i=0; i<dgcolsoverview_len; i++)
              { 
                var menuItemOverview = 
                {
                  field:      jsondata.columnsoverview[i].name,
                  title:      ( typeof(jsondata.columnsoverview[i].title) != 'undefined' ) ? jsondata.columnsoverview[i].title : jsondata.columnsoverview[i].name,                                             
                  width:      jsondata.columnsoverview[i].width,
                  align:      jsondata.columnsoverview[i].align,
                  resizable:  false
                };
                colItemsOverview.push(menuItemOverview);    
              }
              colStructOverview.push(colItemsOverview); 
              
              dg.datagrid({ columns: colStructOverview });

2.
below code is applying to all datagrids in the page, any idea how I can scope only to the one with ID="abc"?
Tried all I can think of like #abc.datagrid-header-row or #abc .datagrid-header-row

Code:

.datagrid-header-row
{ 
   height:150px;
   vertical-align: bottom;
} 

 

Hi Cyberzone,

sorry, but code "div.datagrid-header-row" does not work at all ;(((

I try and try and try but the deeper I get the more strange is the behaviour.
Just again what I want to achieve is simply the following:

-. Datagrid with some headers with vertical text
1. header in general shall have a height of lets say 100px
2. first col is "employee name" and should be written horizontal in the header / vertical-align bottom and lets say width 150px
3. then comes a number of n cols with one number in the cell only, but a slightly longer text in the header,
    for this I want the header text vertical and / vertical-align bottom again, but width can be 50px only. 
4. last col is the sum and should be like first col, i.e. written horizontal / vertical-align bottom and 100px here

below my code which works for populating any other table, just I dont get this header styling done for this one.
Actually it looks like that somehow the width and the height for the cols must be identical, otherwise header and cols get alignment mistake.
See below code example with all cols same width and 3 different col widths as exmplained above.
I attach also 2 screenshots showing 3 differents widths and all the same.. somehow it works but not as I want.
- when width is 100 everywhere the header and cells are aligned (but cannot style first last cols horizontal and different width)
- when different width for first and last cols as well as for the bulk in between then alignment gets distorted

I am sorry for explaining so much, but I think this would be an interesting feature to have it working in general.
Thx, MIke.

defining cols in PHP

Code:

      //---------------------------------------------------------------------
      // make columns
      //---------------------------------------------------------------------
      // first col = employeename
      $fieldinfooverview = array( 
          'name'  => 'MITARBEITER',
          'title' => 'Mitarbeiter',
          'width' => 150,   
          'align' => 'left'
      );                     
      $fieldinfooverview_set[] = $fieldinfooverview;

      // then n cols for n available skills 
      while($rowSkills = mysqli_fetch_assoc($resultSkills)) 
      {

          $fieldinfooverview = array( 
              'name'  => $rowSkills['ID'],
              'title' => '<span title="' . $rowSkills['NAME'] . '">' . $rowSkills['NAME'] . '</span>',   // to include tooltip
              'width' => 50,
              'align' => 'center'
          );
          $fieldinfooverview_set[] = $fieldinfooverview;
          $rowSkills_set[] = $rowSkills;
      }
      
      // last col = value summary per each emplyoee as row
      $fieldinfooverview = array( 
          'name'  => 'SUM',
          'title' => 'SUM',
          'width' => 100,
          'align' => 'right'
      );
      $fieldinfooverview_set[] = $fieldinfooverview;
      ...

client side - defining datagrid and making cols dynamically

Code:

<style>
.datagrid-header-row td 
{
	height:150px;    
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

      <table id="dgSkillReport" class="easyui-datagrid" style="width:95%;"
             data-options="
                rownumbers: false,
                singleSelect: true,
                showFooter: true,
        	remoteSort: false,
                fitColumns: false,
        	multiSort:  false
                onDblClickRow: function(index,row)
                 {
                  		ShowContextView(index,row);
                 }    
                ">     
      </table>

Hi Cyberzone,

and thx - tried this with code below, but result is only that background of this column gets red, but height and width no effect.
Any idea, help is really really appreciated.
Datagrid is fantastic, but such feature to turn header text by 90° like in Excel is the only way to deal with many columns and larger titles, so I really need this... thx in advance!

Code:

  <button type="button" onclick="verticaltest();">Vertical Header Test</button>
  <script>
  function verticaltest()
  {
    var dg = $('#dgSkillReport');
    var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="MITARBEITER"]');
    td.css('height','10px');
    td.css('width','10px');
    td.css('background-color','#ff0000');
  }
  </script>

Thx a lot Mike!

THX JARRY - SOLVED!
With the info, that 'updateRow' method also automatically refreshes the group title, I can handle this requirement.

BR Mike!

Hi again,
and thx for help in advance!

I need column headers to have vertical text. When searching I only find below code, but cannot get it work properly.
With that the text is actually vertical, but not really readable, i.e. I cannot adjust width and height of the header and they are not matching the record cells below. Also cannot adjust alignment so all headers not really readable, please see screenshot.

Thx a lot!
BR Mike.

Code:

/* VERTICAL TEXT */
.datagrid-header-row td {
	height:100px; 
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Thx Jarry,
but even having downloaded version 1.7.6 now, where I see "refreshGroupTitle", this call does not work (not reaching 2nd alert).

Code:

var gcount = $('#dg_skills').datagrid('options').view.groups.length;
for(var i=0; i<gcount; i++)
{
  alert("i=["+i+"] before");
  
  $('#dg_skills').datagrid('refreshGroupTitle', i);  
  
  alert("i=["+i+"] after");
}

Also even if this would work, can I set the group header manually or must this only be in the function "groupFormatter"?
Reason is that when datagrid is created the group header is made of the database,
but now I want it to be made of the elements in the datagrid that the user can modify - f.e. sliders in one column.

Thx again for oyur help!!!
BR Mike.

[What is the correct way to get (and set) each group view header title dynamically (w/o simply reload)?]

Hi,

I have a datagrid with groupview and all works fine after data loading.
As long as I am in the function groupFormatter in the datagrid, I can set the group header to whatever I want.

But what I need is that I can also update the group headers dynamically outside of the groupFormatter function,
after user has changed elements in the datagrid. F.e. user can change html slider element in the datagrid
and I want to reflect the changes in the group header without saving and reloading the data from server every time.

i.e. my problem is that in the groupFormatter I can simple return the value for the group header and it gets set,
but if I call such a function later on, I need to manually get the panel or element or whatever of the relevant group header to set it.
What is the correct way to get (and set) each group view header title dynamically (w/o simply reload)?

For title/panel of the datagrid this works well, see below, so I need something similar for each group header.

Code:

                                // -------------------------------------------
                                // statistic for the panel on top 
                                // -------------------------------------------
                                var nCount = 0;
                                var nSumWert = 0.0;
                                var rows = $('#dg_skills').datagrid('getRows');
                                for(var j=0; j<rows.length; j++)
                                {
                                  var act_amount = parseFloat(document.getElementById('mySlider'+j).value);
                                  if ( act_amount > 0 )
                                  {
                                    nCount++;
                                    nSumWert += act_amount;
                                  }
                                }
                                var strTitle = 'Mitarbeiter: ['+ (document.getElementById('NAME').value).toUpperCase() +'] hat ' + nCount + ' Skills mit ' +  nSumWert + '/' + (rows.length*3) + ' Punkten (=' + (nSumWert/(rows.length*3)*100).toFixed(2) + '%)';
                                var p = $('#dg_skills').datagrid('getPanel');
                                p.panel('setTitle', strTitle);

Thank you very much!
BR Mike.

[hidePanel]

colleague gave me this hint, which is the solution.

$('#anfrage_am_date_anfrage').datetimebox('hidePanel');

Topics solved and closed - THX

Hello,

I am using easyui-datetimebox with format DD.MM.YYYY HH:MM:SS and after selecting a date in the calendar I assign the date and time there, which works fine, but also want to CLOSE the easyui-datetimebox (which is not doing automatically).
Thx a lot in advance!
BR Michael.

Code:

                      <input id="anfrage_am_date_anfrage" class="easyui-datetimebox"  
                          data-options="
                              width: 160,
                              required:true,
                              formatter:      mydtformatter,
                              parser:         mydtparser,
                              currentText:    'Heute',
                              closeText:      'Schließen',
                              showSeconds:    false,
                              onSelect: function(value)
                              {
                                var c = $('#anfrage_am_date_anfrage').datetimebox('calendar');
                                var t = $('#anfrage_am_date_anfrage').datetimebox('spinner');

                              	var day = c.calendar('options').current;

                                var time = t.timespinner('getValue');
                                var y = day.getFullYear();
                                var m = day.getMonth()+1;
                                var d = day.getDate();
                                var myday = String(d<10?('0'+d):d)+'.'+String(m<10?('0'+m):m)+'.'+String(y);
                                
                                var mydate = strip( myday + ' ' + time + ':00' );

                                $('#anfrage_am_date_anfrage').datetimebox('setValue', mydate);

                                // WHAT TO CALL TO CLOSE datetimebox here?
                                //.... 

                            	}
                              ">

with 

  function mydtformatter(date)
  {
    //alert('mydtformatter(date) date=['+ date +']');
    
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    var s1 = String(d<10?('0'+d):d) + '.' + String(m<10?('0'+m):m) + '.' + String(y);
    
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    var s2 = String(hh<10?('0'+hh):hh) + ':' + String(mm<10?('0'+mm):mm) + ':' + String(ss<10?('0'+ss):ss);
    
    //alert('mydtformatter(date) return date=['+ s1 + ' ' + s2 +']');

    return s1 + ' ' + s2;
  }  
  function mydtparser(s)
  {
    //alert('mydtparser(s) s=['+ s +']');
    if ( (!s) || ($.trim(s) == '') )
      {return new Date();}
    var dt = s.split(' ');
    var dateFormat = dt[0].split('.');
    var timeFormat = dt[1].split(':');
    var date = new Date( parseInt(dateFormat[2]),parseInt(dateFormat[1])-1,parseInt(dateFormat[0]) );
    if (dt.length>1){
      date.setHours(timeFormat[0]);
      date.setMinutes(timeFormat[1]);
      date.setSeconds(timeFormat[2]);
    }
    //alert('mydtparser(s) return date=['+ date +']');
    return date;
  }