Grid row selection problem

[MadhuriParticipant]

Hi,

I am using jqxgrid,grid has a column having drop down,my rows are being highlighted and selected for deletion using a checkbox column,everything is working fine with the checkbox selection and deletion but at the same time the drop down column selects the entire row and makes it selected and highlighted for deletion,i have put in selectionmode:’checkbox’ but how can i make sure that a row is not selected and highlighted when i click on the drop down,ensuring that checkbox is the only way to select a row for deletion(also leaving the drop down column editable).

Please suggest.

thanx

[MadhuriParticipant]

my code is like this:-

 
 /*grid is being created here*/
 
 var sourceForField =
    {
        localdata: dataForField,
        datatype: "array",
        datafields:
                [
                    { name: 'available', type: 'bool' },
                    { name: 'description', type: 'string' },
                    { name: 'readP', type: 'string' },
                    
                ]  ,
        deleterow: function (rowid, commit) {
            commit(true);
        }
    };
    var dataAdapterForField = new $.jqx.dataAdapter(sourceForField);

    $("#jqxgridForField").jqxGrid(
            {
                width:outsideWidth - 64,
                height:outsideHeight - 64,
                // pageable:true,
                // pagesize:5,
                source: dataAdapterForFieldSec,
                editable: true,
                selectionmode: 'checkbox',
                autoheight: true ,

                columns: [
                    { text: '', datafield: 'available', columntype: 'checkbox', width: 46 },
                    {text: <js:string>GROUP</js:string>, datafield: 'description',width: '56%', displayfield: 'description', align:'center', columntype: 'combobox',
                        createeditor: function (row, column, editor) {
                            // assign a new data source to the combobox.
                            var comboArray = new Array();
                            var count = 0;
                            <c:forEach items="${groupListForFieldSec}" var="item" varStatus="status">
                            var comboValue = {};
                            comboValue["value"] = <js:string>${item.id}</js:string>;
                            comboValue["label"] = <js:string>${item.description}</js:string>;
                            comboArray[count] = comboValue;
                            count++;
                            </c:forEach>
								/*combobox being created*/
                            var comboSource =
                            {
                                datatype: "array",
                                localdata: comboArray,
                                datafields: [
                                    { name: 'label', type: 'string' },
                                    { name: 'value', type: 'string' }
                                ]
                            };
                            var dropDownAdapter = new $.jqx.dataAdapter(comboSource);
                            editor.jqxComboBox({source: dropDownAdapter,displayMember: 'label', valueMember: 'value'});

                        },  cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {

                        saveFieldFlag=true;
						/*combobox value being fetched*/
                        if (newvalue == "") return oldvalue;
                        var selectedValue = document.getElementsByName('comboboxeditorjqxgridForFieldSecdescription')[0].value;
                        
                        var input = document.createElement("input");

                        input.setAttribute("type", "hidden");
                        input.setAttribute("name", "jqxFieldSecurityComboBox" + selectedValue);
                        input.setAttribute("value", selectedValue);
                        document.getElementById("fieldPropForm").appendChild(input);
}

/*function for removing rows*/
function removeRow() {
    var selectedrowindexes = $('#jqxgridForFieldSec').jqxGrid('getselectedrowindexes');
    var rowscount = $("#jqxgridForField").jqxGrid('getdatainformation').rowscount;

    selectedrowindexes.sort();
    for (var m = 0; m < selectedrowindexes.length; m++) {
        var selectedrowindex = selectedrowindexes[selectedrowindexes.length - m - 1];

        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
            var id = $("#jqxgridForField").jqxGrid('getrowid', selectedrowindex);
            var selectedValue = $('#jqxgridForField').jqxGrid('getrowdata', id).description;
            var input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", m+"~"+"jqxFieldSecurityRemove");
            input.setAttribute("value", selectedValue);
            document.getElementById("fieldPropForm").appendChild(input);
            var commit = $("#jqxgridForField").jqxGrid('deleterow', id);
        }
        // commit(true);
    }
}

[NagoorParticipant]

hi madhuri,

give selection mode as single row. since you are giving checkbox as another coloumn implicitly, you need not to give selection mode as check box. and using this checkbox coloumn for selecting and unselecting rows.. initiate cellbeginedit and cellendedit functions as follows after grid definition.

$(“#jqxgridForFieldSec”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgridForFieldSec”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else {
$(“#jqxgridForFieldSec”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});

i would also recommend you to initiate ‘clearselection’ event after removing the selected rows in grid.

$(“#jqxgridForFieldSec”).jqxGrid(‘clearselection’);

hope it helps..

[MadhuriParticipant]

thanx Nagoor

Have included cellendedit function already.

Solved my problem by using selection mode as single cell.
using single row created the same problem as earlier.

[MadhuriParticipant]

Hi,
I am using jqxgrid, this is custom grid has a column having drop down (editor.jqxComboBox()), for deletion we are using a checkbox column, everything is working fine with the checkbox selection and deletion, I am facing problem when I select value of dropdown and click anywhere on page value of grid is not visible it is hide.
I have put in selectionmode: ‘singlecell’, When I use ‘singlerow’ then this problem is resolved but delectation of row with help of check box selection is not work and when I use selectionmode: ‘checkbox’ then after check box selection values of rows are bold and highlighted which is wrong .
So I am using selectionmode: ‘singlecell’ then how I can resolved the issue of visibility of selected column value of editor.jqxComboBox().
Please suggest?

My sample code like this —
$(“#jqxgridForFieldSec”).jqxGrid(
{
width:”750px”,
source:dataAdapterForFieldSec,
//selectionmode: ‘checkbox’,
editable:true,
selectionmode:’singlecell’,
autoheight:true,

columns:[
{ text:”, datafield:’available’, columntype:’checkbox’, width:”50px”, check: true},
{text: <js:string><fmt:message key=”LBL_GROUP”/></js:string>, datafield:’description’, width:’300px’, displayfield:’description’, align:’center’, columntype:’combobox’,
createeditor:function (row, column, editor) {
// assign a new data source to the combobox.
var comboArray = new Array();
var count = 0;
<c:forEach items=”${groupListForFieldSec}” var=”item” varStatus=”status”>
var comboValue = {};
comboValue[“value”] = <js:string>${item.id}</js:string>;
comboValue[“label”] = <js:string>${item.description}</js:string>;
comboArray[count] = comboValue;
count++;
</c:forEach>

var comboSource =
{
datatype:”array”,
localdata:comboArray,
datafields:[
{ name:’label’, type:’string’ },
{ name:’value’, type:’string’ }
]
};
var dropDownAdapter = new $.jqx.dataAdapter(comboSource);
editor.jqxComboBox({source:dropDownAdapter, displayMember:’label’, valueMember:’value’,enableBrowserBoundsDetection: true});

},

cellvaluechanging:function (row, column, columntype, oldvalue, newvalue) {

saveFieldFlag = true;

if (newvalue == “”) return oldvalue;
var selectedValue = document.getElementsByName(‘comboboxeditorjqxgridForFieldSecdescription’)[0].value;
var input = document.createElement(“input”);

input.setAttribute(“type”, “hidden”);
input.setAttribute(“name”, “jqxFieldSecurityComboBox” + selectedValue);
input.setAttribute(“value”, selectedValue);
document.getElementById(“fieldPropForm”).appendChild(input);

// alert(“existingViewId>” + selectedValue);
}
},

{ text: <js:string><fmt:message key=”LBL_READ”/></js:string>, datafield:’read’, width:’100px’, align:’center’, editable:false},
]

});

[MadhuriParticipant]

Sorry I need to update this also

After selection of value of editor.jqxComboBox and click outside of grid, selected value is not visible.

[DimitarParticipant]

Hello Madhuri,

We need more information to determine the source of the issue: Does it occur if cellvaluechanging is not implemented? Is the combobox editor loaded correctly from your custom source? If you do not set a custom source, does the value disappear?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[boydcyrParticipant]

I have selectionmode set to checkbox and use jqxGrid’s checkboxes to select rows. When the page loads however, if I want to force selection of rows with the selectrow method, the rows are selected but the checkbox is not checked. Is there a method I need to call to update the selected rows after the selectrow method?

[DimitarParticipant]

Hello boydcyr,

Here is an example that shows how to have initially selected rows when selectionmode is ‘checkbox’: http://jsfiddle.net/Dimitar_jQWidgets/C3vQb/844/. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts