Print Page - Radio Group Editor on Datagrid

Title: Radio Group Editor on Datagrid
Post by: anugrast 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....

Title: Re: Radio Group Editor on Datagrid
Post by: stworthy 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>

Title: Re: Radio Group Editor on Datagrid
Post by: anugrast 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 ?

Title: Re: Radio Group Editor on Datagrid
Post by: anugrast 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... :(

Title: Re: Radio Group Editor on Datagrid
Post by: stworthy on April 13, 2015, 01:43:39 AM

Please update the 'workingRadioGroup' editor code in the previous post.

Title: Re: Radio Group Editor on Datagrid
Post by: anugrast 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 :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: anugrast on April 12, 2015, 10:18:22 PM