jQuery UI Widgets Forums Grid Grid row selection problem

This topic contains 8 replies, has 4 voices, and was last updated by  Dimitar 1 year, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Grid row selection problem #53815

    Madhuri
    Participant

    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

    Grid row selection problem #53817

    Madhuri
    Participant

    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);
        }
    }
    Grid row selection problem #53818

    Nagoor
    Participant

    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..

    Grid row selection problem #53824

    Madhuri
    Participant

    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.

    Grid row selection problem #58781

    Madhuri
    Participant

    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},
    ]

    });

    Grid row selection problem #58785

    Madhuri
    Participant

    Sorry I need to update this also

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

    Grid row selection problem #58836

    Dimitar
    Participant

    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/

    Grid row selection problem #102520

    boydcyr
    Participant

    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?

    Grid row selection problem #102550

    Dimitar
    Participant

    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/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.