Print Page - Datagrid : custom data combobox when insert row

Title: Datagrid : custom data combobox when insert row
Post by: noerone on October 29, 2015, 09:57:11 AM

I want to change the value of the "Header" and when creating a new line of data on the "Detail" in accordance with the data "Header". how to completion, I had difficulty in determining the value of the "jadi".

(http://oi66.tinypic.com/168da8z.jpg)
(http://oi64.tinypic.com/3535j0n.jpg)

Title: Re: Datagrid : custom data combobox when insert row
Post by: jarry on October 29, 2015, 05:08:07 PM

To set a new value for the combobox, call 'setValue' method. To replace the drop-down items, call 'loadData' method.

Code:

$('#cc').combobox('setValue', newvalue);  // set new value
$('#cc').combobox('loadData', newdata);  // set the whole data set

Title: Re: Datagrid : custom data combobox when insert row
Post by: noerone on October 29, 2015, 05:16:23 PM

but I don't know class / id combobox in datagrid, because I'm used javascript for create that. Can you help me ? Sorry i'm newbie ;D

Title: Re: Datagrid : custom data combobox when insert row
Post by: jarry on October 29, 2015, 06:57:42 PM

When you call 'endEdit' method to end the editing on a row, the 'onEndEdit' event fires, in which you can call 'getEditors' or 'getEditor' methods to get the editing editors and then retrieve the values from the editors.

Code:

$('#dg').datagrid({
  onEndEdit: function(index,row){
    var editors = $(this).datagrid('getEditors',index);
    var value = $(editors[0].target).combobox('getValue');  // get the combobox value
    console.log(value)
  }
})

Title: Re: Datagrid : custom data combobox when insert row
Post by: noerone on October 29, 2015, 07:54:57 PM

I mean like this :

Header :
id | name
1 | 10001
2 | 10002
3 | 10003

Detail : (id from header)
id | name
1 | S
1 | M
1 | L
2 | M
2 | XL

if I choose 10001 then appear on Detail is S, M, L.
(sorry my english)

Title: Re: Datagrid : custom data combobox when insert row
Post by: jarry on October 29, 2015, 08:24:57 PM

If you want to do actions on the datagrid editors, you must retrieve these edtiors first. As the code shown above, you need to call 'getEditors' or 'getEditor' methods to get edtiors. Please refer to the code below:

Code:

var dg = ...  // the datagrid object
var index = ... // the index of the editing row
var editors = dg.datagrid('getEditors', index);  // get all editors
var cb = $(edtiors[0].target);  // the first editor is the combobox
cb.combobox('setValues',...);  // call any methods on the combobox

Title: Re: Datagrid : custom data combobox when insert row
Post by: aswzen on October 29, 2015, 08:28:38 PM

sorry if out of topic

(http://oi66.tinypic.com/168da8z.jpg)

if you see carefully the datagrid looks weird, the column header size not match with its row..
i have the same problem with this..apparently must be a CSS+easyui bug

(http://i.imgur.com/1aBPSgh.jpg)

Title: Re: Datagrid : custom data combobox when insert row
Post by: noerone on October 29, 2015, 08:50:33 PM

Thanks Jarry, It's work.
But i'm insert on 'onBeginEdit'.

onBeginEdit:function(rowIndex){
   var editors = $('#tbl-upah_list').datagrid('getEditors', rowIndex);
   var n0 = $(editors[0].target);
   var n1 = $(editors[1].target);
   var n2 = $(editors[2].target);
   var n3 = $(editors[3].target);
   var n4 = $(editors[4].target);

   n1.combobox({
   // get id from header #cc-bahan
   url: 'get_ukuran/'+$('#cc-bahan').combobox('getValue')
   });

   n4.numberbox({
   editable:false,
   readonly:true
   });

   }

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: noerone on October 29, 2015, 09:57:11 AM