jQWidgets Forums

jQuery UI Widgets Forums Grid Disable selectall(or checkall/uncheck all) checkbox on top of the grid

This topic contains 4 replies, has 3 voices, and was last updated by  Krull 6 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • omnisri
    Participant

    Hello,

    I am trying to implement a functionality where a user when clicked the ‘checkall’ or ‘selectall’ button in the grid, I need to store all the rows details(that are coming from API which am displaying in the grid) into an array or objects and then run a forEach loop to do some API method logic.

    I am having a hard time trying to capture this action so I can implement the logic. Any help on this appreciated.

    I am using angualar jqxgrid to this.

    Thank you,
    Omnisri


    Martin
    Participant

    Hello Omnisri,

    I did not understand what the issue is. Can you be more specific about what is your difficulty?
    Is your problem binding to the click event of the button or getting the rows’ details?
    Thank you!

    Best Regards,
    Martin

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


    Krull
    Participant
    $("#currentCrsMngrGrid").jqxGrid(
        {
        width: '95%',
        height: '79%',
        source: dataAdapter,
        theme: 'critiques',
        sortable: true,
        filterable:true,
        autoshowcolumnsmenubutton: false,
        selectionMode: 'checkbox',
        showdefaultloadelement: true,
        autoshowloadelement: true,					
        columnsheight:30,
        rowsheight:30,
            ready: function()
                {
                $("#currentCrsMngrGrid").find('.jqx-grid-column-header:first').children().hide();
                },
        columns: 
            [
            { text: 'CourseID',		datafield: 'CourseID',		width: '0%',  hidden:true		},
            { text: 'Instructor ID',	datafield: 'InstructorID',	width: '0%',  hidden:true 		},
            { text: 'Point Of Contact',	datafield: 'POCID',		width: '0%',  hidden:true 		},
            { text: 'COURSE NAME',		datafield: 'Course_Name',	width: '48%' 				},
            { text: 'LESSONS',		datafield: 'Lessons',		width: '8%' 				},
            { text: 'STUDENTS',		datafield: 'NumberStudents',    width: '8%'				},
            { text: 'BEGIN DATE',		datafield: 'BeginDate',		width: '12%', cellsformat: 'yyyy-MM-dd' },
            { text: 'END DATE',		datafield: 'EndDate',		width: '12%', cellsformat: 'yyyy-MM-dd' },
            { text: 'STATUS',		datafield: 'CourseStatusID',    width: '0%',  hidden:true  		},
            { text: 'STATUS',		datafield: 'CourseStatus',	width: '12%'				}
            ]
        });	
    
    // and to limit the number of clicked items I used
    	var startDate = new Date();
    	$("#currentCrsMngrGrid").on('rowselect', function (event) 
    		{
                    //getting my info
    		var args = event.args;
    		var rowBoundIndex = args.rowindex;
    		var rowData = args.row;
    		SelectedCurrentCourse = rowData.CourseID;
    		SelectedBaseCourse = rowData.BaseID;
                    //setting button states
    		$("#editBtn").jqxButton({disabled: false});		
    		$("#statsBtn").jqxButton({disabled: false});		
    		$("#archiveBtn").jqxButton({disabled: false});	
    		$("#deleteBtn").jqxButton({disabled: false});	
    		$("#printBtn").jqxButton({disabled: false});
                   //making sure not more than one item is checked (you may need to adjust the millisecond
                   //limit to get it the way you want.						
    		var endDate   = new Date();
    		var miliseconds = (endDate.getTime() - startDate.getTime());
    		startDate = endDate;
    		selectedCurriculum = event.args.row.id;
    		if(miliseconds>500)
    			{
    			$("#currentCrsMngrGrid").jqxGrid('clearselection');
    			$("#currentCrsMngrGrid").jqxGrid('selectrow', event.args.rowindex);
    			}
    		});
    

    Martin
    Participant

    Hello Krull,

    Do you have an issue with this code?
    Please, note that if you use ‘clearselection’ in the ‘rowselect’ event handler, you may need to wrap it in a setTimeout.
    You at look at this Example.

    Best Regards,
    Martin

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


    Krull
    Participant

    It is actually working as is.

    But I will try putting it in a window.setTimeout if you say its better that way.

    The code

    
            ready: function()
                {
                $("#currentCrsMngrGrid").find('.jqx-grid-column-header:first').children().hide();
                },
    

    Is what keeps the top check box from showing that would allow the user to “select all”

    This bottom piece only says if they click 1, 2, 3 rows quickly it will only allow it if they can click them faster than the timeout period specified. I used 500 milliseconds.

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

You must be logged in to reply to this topic.