EasyUI Forum
May 21, 2024, 12:41:10 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Radio Group Editor on Datagrid  (Read 11305 times)
anugrast
Jr. Member
**
Posts: 52


View Profile Email
« on: April 12, 2015, 10:18:22 PM »

Hai... I want to create datagrid with radio group editor... I try with datagrid extend like this:

Code:
$.extend($.fn.datagrid.defaults.editors,
    {
        workingRadioGroup:
            {
                init: function (container, options) {
    var input = $('<input type="radio" name="radio" value="0" />No</input>&nbsp;<input type="radio" name="radio" value="1" />Yes</input>&nbsp;<input type="radio" name="radio" value="2" />Maybe</input>').appendTo(container);
                    return input;
                },
                getValue: function (target) { return $(target).val(); },
                setValue: function (target, value) { $(target).val(value); },
            }
 
    });

Can anyone help me....
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: April 13, 2015, 12:15:13 AM »

Please try the code below:
Code:
$.extend($.fn.datagrid.defaults.editors, {
    workingRadioGroup:{
        index: 1,
        init: function(container, options){
            var span = $('<span></span>').appendTo(container);
            var name = 'radio_'+this.index++;
            $.map(options.items||[], function(item){
                var checked = item.value == options.value ? 'checked' : '';
                $('<input type="radio" name="'+name+'" value="'+item.value+'" '+checked+'>' + item.text + '</input>').appendTo(span);
            });
            return span;
        },
        destroy: function(target){
            $(target).remove();
        },
        getValue: function(target){
            return $(target).find('input:checked').val();
        },
        setValue: function(target, value){
            $(target).find('input[value='+value+']')._propAttr('checked', true);
        },
        resize: function(target, width){
           
        }
    }
})

Usage example:
Code:
<th data-options="field:'productid',width:100,
        editor:{
            type:'workingRadioGroup',
            options:{
                value: '1',
                items:[
                    {value:'0',text:'No'},
                    {value:'1',text:'Yes'},
                    {value:'2',text:'Maybe'}
                ]
            }
        }">Product</th>
« Last Edit: April 13, 2015, 01:41:28 AM by stworthy » Logged
anugrast
Jr. Member
**
Posts: 52


View Profile Email
« Reply #2 on: April 13, 2015, 12:41:26 AM »

It's works... by the way.... can I style it with CSS ? can you give me some example ?
Logged
anugrast
Jr. Member
**
Posts: 52


View Profile Email
« Reply #3 on: April 13, 2015, 01:16:05 AM »

I used datagrid inline editing... When edit several rows, the value of the previous row is missing..... Please help me... Sad
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 on: April 13, 2015, 01:43:39 AM »

Please update the 'workingRadioGroup' editor code in the previous post.
Logged
anugrast
Jr. Member
**
Posts: 52


View Profile Email
« Reply #5 on: April 13, 2015, 01:58:42 AM »

It's works like what I want.... Thanks for your help... Very very thank you.... You are the best  Smiley
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!