[stevenmahonyParticipant]

Hi Peter,

Yes I am using that method to get only the rows that are displayed (by applying a row date filter).

I now want to select just these rows , I am using ‘selectallrows’ but this selects all rows in the dataadapter.

var visibleRows = $(“#jqxgrid”).jqxGrid(‘getdisplayrows’); [5,000 rows]
var selectedRows = $(“#jqxgrid”).jqxGrid(‘getselectedrowindexes’); [10,000 rows] (users sees 5,000 highlighted rows in grid, even thou 10,000 are selected.

I now want to pass the 5,000 rows to a method and update the database. Works fine because I can get the id I required from the objects in the displayrows data., but if I want to un-select any of the display rows and then pass the 4,999 rows to the method I still have 5,000 displayrows and I’m not sure how to remove the 1 rows from the getdisplayrows object and pass it to the database (without some javascript array matching)

So what I am looking for is if there is a method (or combination of methids) that will get the selected indexes of the selected displayed rows in the grid?

Thanks
Steven

[stevenmahonyParticipant]

Hi, I am using 3.0.2.

[stevenmahonyParticipant]

Update

I added $(‘#jqxgrid’).jqxGrid(‘refresh’); to the end of the $(‘#jqxgrid’).on(‘rowunselect’, function (event) {}) event and the grid refeshes and the row is unselected. I assume this is not how its to function.

Regards
Steven

[stevenmahonyParticipant]

Thanks Peter,

Could you suggest another workaround as I would like to keep the grid (not destroy it) or is the only way to get this functioning to destroy the grid and re-create.

Thanks for your help.

Steveb

[stevenmahonyParticipant]

Here is the complete javascript

        var page = (function ($) {
            var addEventListeners = function () {
                               
                $('#jqxgrid').on('rowselect', function (event) 
                {
                    var args = event.args; 
                    var row = args.rowindex;
                    var data = $('#jqxgrid').jqxGrid('getrowdata', row);
                    
                    totalAmountSelected = totalAmountSelected + data.Amount;
                    $('#totalSelectedAmount span').html('Total Amount Selected : ' + totalAmountSelected);
                    transIds.push(data.TransId);
                    console.log(transIds);
                });
                $('#jqxgrid').on('rowunselect', function (event) 
                {
                    var args = event.args;
                    var row = args.rowindex;
                    var data = $('#jqxgrid').jqxGrid('getrowdata', row);
                    
                    totalAmountSelected = totalAmountSelected - data.Amount;
                    $('#totalSelectedAmount span').html('Total Amount Selected : ' + totalAmountSelected);                    
                    transIds.splice(transIds.indexOf(data.TransId),1);
                    console.log(transIds);
                });
                
                $('#jqxgrid').on('bindingcomplete', function (event) {
                    $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {                                                                                                                                                                                     
                        if (state === true) {                                                                        
                            $('#totalSelectedAmount span').html('Total Amount Selected : ' + aggregates.sum);
                            var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); 
                            for (var rowid in selectedRows) {
                                transIds.push($("#jqxgrid").jqxGrid('getrowdata', selectedRows[rowid]).TransId);                            
                            }                                
                        } else {                                    
                            $('#totalSelectedAmount span').html('');
                            transIds = [];
                        }
                        console.log(transIds);
                    });
                });
               
                $('#jqxSearch').click(function () {
                    $('#jqxgrid').jqxGrid('clear');
                    var Source =
	                {
	                    datatype: "json",
	                    datafields: [
                              { name: 'TransId', type: 'int' }
                            , { name: 'DistributorName', type: 'string' }
                            , { name: 'BookingRef', type: 'string' }
                            , { name: 'TourDate', type: 'date' }
                            , { name: 'ProductTitle', type: 'string' }
                            , { name: 'ClientName', type: 'string' }
                            //, { name: 'Pax', type: 'int' }
                            , { name: 'Amount', type: 'decimal' }
		                ],
	                    url: "generate_invoices.aspx/GetInvoiceTransactions"	                    
	                };
	                var dataAdapter = new $.jqx.dataAdapter(Source, {
                         contentType: 'application/json; charset=utf-8'
                    });
                    
                    $("#jqxgrid").jqxGrid({source: dataAdapter });
                                               
                });
            };
            return {
                init: function () {
                    addEventListeners();
                    $("#jqxSelectSalesMonth").jqxDropDownList({
                        displayMember: "SalesMonthStr",
                        valueMember: "SalesMonth",
                        selectedIndex: -1,
                        width: '100%',
                        height: '35',
                        theme: theme,
                        placeHolder: '-- Select a Sales Month --'
                    });
                    $("#jqxDistributors").jqxDropDownList({
                        displayMember: "DistributorName",
                        valueMember: "DistributorId",
                        selectedIndex: -1,
                        width: '100%',
                        height: '35',
                        theme: theme,
                        placeHolder: '-- Select a Distributor --'
                    });
                    $("#jqxCheckBox").jqxCheckBox({ width: 200, height: 25, theme: theme, disabled: false });
                    $("#jqxSearch").jqxButton({ theme: theme });
                    $("#infoCreditNotes").jqxTooltip({
                        content: '<span style="float:left;"><b>Credit Notes</b></span> <br><ol id="myList">'
                                    + '     <li>Can be used on its own to return all unprocessed Credit Notes in the system.</li>'
                                    + '     <li>Can be used with Sales Month and Distributor filters to filter Credit Notes.</li>'
                                    + '</ol>',
                        position: 'mouse',
                        name: 'infoCreditNotesTooltip',
                        theme: 'metrodark',
                        autoHideDelay: 10000
                    });
                    var getLocalization = function () {
                        var localizationobj = {};
                        localizationobj.currencysymbol = "€";
                        localizationobj.currencysymbolposition = "before";
                        localizationobj.decimalseparator = ".";
                        localizationobj.thousandsseparator = ",";
                        var patterns = {
                            d: "dd/MM/yyyy",
                            D: "dddd, d. MMMM yyyy",
                            t: "HH:mm",
                            T: "HH:mm:ss",
                            f: "dddd, d. MMMM yyyy HH:mm",
                            F: "dddd, d. MMMM yyyy HH:mm:ss",
                            M: "dd MMMM",
                            Y: "MMMM yyyy"
                        }
                        localizationobj.patterns = patterns;
                        return localizationobj;
                    }
                    $("#jqxgrid").jqxGrid(
                    {
                        width: '100%',                        
                        theme: 'fresh',
                        height: 600,                        
                        altrows: true,
                        enablehover: true,
                        localization: getLocalization(),
                        selectionmode: 'checkbox',
                        sortable: true,
                        filterable: true,
                        showfilterrow: true,
                        ready: function()
                            {   
                                $('#jqxgrid').jqxGrid('hidecolumn', 'TransId');                                                                                                                                                                            
                            },                    
                        columns: [
                          { text: '', datafield: 'TransId'},
                          { text: 'Origin', datafield: 'DistributorName', width: '15%', align: 'left', cellsalign: 'left' },
                          { text: 'Booking Reference', datafield: 'BookingRef', width: '10%', align: 'center', cellsalign: 'center' },
                          { text: 'Tour Date', datafield: 'TourDate', width: '10%', align: 'center', cellsalign: 'center',filtertype: 'date',columntype: 'datetimeinput',cellsformat: 'd'},
                          { text: 'Product Title', datafield: 'ProductTitle', width: '35%' },
                          { text: 'Client Name', datafield: 'ClientName', width: '15%' },
                          //{ text: 'Pax', datafield: 'Pax', width: 60, align: 'center', cellsalign: 'center' },
                          { text: 'Amount', datafield: 'Amount', width: '10%' , cellsformat: 'c2', align: 'right', cellsalign: 'right'}
                        ],
                    });
                    
                }
            }
        } ($));
        $(document).ready(function () {
            page.init();
            GetSalesMonthList();
            GetDistributorList();
        });

[stevenmahonyParticipant]

Sorry, read your question again. When the grid i initialised for the first time I do not bind it. I just create an empty grid with columns.

Steven

[stevenmahonyParticipant]

Hi,

The grid is initialized when the page is loaded. When the user selects the Search button I clear the grid, post a jquery ajax requestusing the source setting and sets the grid source to the dataAdepter (see below). So the grid is not initialise again, just the data refreshed. Is this the right process? Should I be detroying the grid and re-initializing it?

$('#jqxgrid').jqxGrid('clear');
                    var Source =
	                {
	                    datatype: "json",
	                    datafields: [
                              { name: 'TransId', type: 'int' }
                            , { name: 'DistributorName', type: 'string' }
                            , { name: 'BookingRef', type: 'string' }
                            , { name: 'TourDate', type: 'date' }
                            , { name: 'ProductTitle', type: 'string' }
                            , { name: 'ClientName', type: 'string' }
                            //, { name: 'Pax', type: 'int' }
                            , { name: 'Amount', type: 'decimal' }
		                ],
	                    url: "generate_invoices.aspx/GetInvoiceTransactions"	                    
	                };
	                var dataAdapter = new $.jqx.dataAdapter(Source, {
                         contentType: 'application/json; charset=utf-8'
                    });
                    
                    $("#jqxgrid").jqxGrid({source: dataAdapter });

[stevenmahonyParticipant]

Hi, I have updated my code with this but the event no longer fires

$('#jqxgrid').on('bindingcomplete', function (event) {
                    $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {                                                                                                                                                                                     
                        if (state === true) {                                                                        
                            $('#totalSelectedAmount span').html('Total Amount Selected : ' + aggregates.sum);
                            var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); 
                            for (var rowid in selectedRows) {
                                transIds.push($("#jqxgrid").jqxGrid('getrowdata', selectedRows[rowid]).TransId);                            
                            }                                
                        } else {                                    
                            $('#totalSelectedAmount span').html('');
                            transIds = [];
                        }
                        console.log(transIds);
                    });
                });

Thanks.

[stevenmahonyParticipant]

Thanks for the suggestion. I have put something similar in place and it works fine but I have chnaged how i render the grid and I keep losing the on change event of the check-box (See code below)

I init the grid on page load (with no data)

$("#jqxgrid").jqxGrid(
                   {
                        width: '100%',                        
                        theme: 'fresh',
                        height: 600,                        
                        altrows: true,
                        enablehover: true,
                        localization: getLocalization(),
                        selectionmode: 'checkbox',
                        sortable: true,
                        filterable: true,
                        showfilterrow: true,
                        ready: function()
                            {   
                                $('#jqxgrid').jqxGrid('hidecolumn', 'TransId');  
                                $("#jqxgrid").find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {                                                                                                                                                             
                                    if (state === true) {                                                                        
                                        $('#totalSelectedAmount span').html('Total Amount Selected : ' + aggregates.sum);
                                        var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes'); 
                                        for (var rowid in selectedRows) {
                                            transIds.push($("#jqxgrid").jqxGrid('getrowdata', selectedRows[rowid]).TransId);                            
                                        }                                
                                    } else {                                    
                                        $('#totalSelectedAmount span').html('');
                                        transIds = [];
                                    }
                                    console.log(transIds);
                                });                                                                                                                                          
                            },                    
                        columns: [
                          { text: '', datafield: 'TransId'},
                          { text: 'Origin', datafield: 'DistributorName', width: '15%', align: 'left', cellsalign: 'left' },
                          { text: 'Booking Reference', datafield: 'BookingRef', width: '10%', align: 'center', cellsalign: 'center' },
                          { text: 'Tour Date', datafield: 'TourDate', width: '10%', align: 'center', cellsalign: 'center',filtertype: 'date',columntype: 'datetimeinput',cellsformat: 'd'},
                          { text: 'Product Title', datafield: 'ProductTitle', width: '35%' },
                          { text: 'Client Name', datafield: 'ClientName', width: '15%' },
                          //{ text: 'Pax', datafield: 'Pax', width: 60, align: 'center', cellsalign: 'center' },
                          { text: 'Amount', datafield: 'Amount', width: '10%' , cellsformat: 'c2', align: 'right', cellsalign: 'right'}
                        ],
                    });

At this point the grid is empty and the user must select some search criteria. The user then clicks the Search button and this even gets fired.

$('#jqxSearch').click(function () {
                    $('#jqxgrid').jqxGrid('clear');
                    var Source =
	                {
	                    datatype: "json",
	                    datafields: [
                              { name: 'TransId', type: 'int' }
                            , { name: 'DistributorName', type: 'string' }
                            , { name: 'BookingRef', type: 'string' }
                            , { name: 'TourDate', type: 'date' }
                            , { name: 'ProductTitle', type: 'string' }
                            , { name: 'ClientName', type: 'string' }
                            //, { name: 'Pax', type: 'int' }
                            , { name: 'Amount', type: 'decimal' }
		                ],
	                    url: "generate_invoices.aspx/GetInvoiceTransactions"	                    
	                };
	                var dataAdapter = new $.jqx.dataAdapter(Source, {
                         contentType: 'application/json; charset=utf-8'
                    });
                    
                    $("#jqxgrid").jqxGrid({source: dataAdapter });
                                               
                });

Once the grid is populated I lose the on change event of the checkbox. Any suggestions, I tried putting the on change event in the grid binding complete and while the event was recognized I have a getselectedrowindexes call in the event but the rows are not selected before the on change event is fired.

Regards
Steven

[stevenmahonyParticipant]

I have an update on this.

I am using the jqWidgets library in Visual Studio 2010 Ultimate

Ignore the code above, this also happens when i take the aggregatesrenderer example from this site and run it in an aspx page in visual studio.

When the web.config has debug mode set to true the applications loads microsoftajax.debug.js and this throws the error mentioned above when calling the aggregatesrenderer function.

Any suggestions on how to fix this apart from the obvious, set debug false in web.config?

Thanks
Steven

[stevenmahonyParticipant]

I know this is old but was this ever addressed. Im using version 2.7 and getting the same issue. Only in the unrowselect when using checkboxes.

cellendedit is ok.

Thanks

[stevenmahonyParticipant]

Ignore post. My control was not been rendered, I was using it in a wizard and it validates all tabs the the same time. My buttons were not rendered on the tab that was been validated.

[stevenmahonyParticipant]

Thanks for the quick reply.

I have used the disable method on the other controls. I thought there may have been an option to disable the tabs contents in one call.

Works perfect.

Thanks again.

[stevenmahonyParticipant]

Perfect, was looking for a setting but could not find it.

Thank you.

[stevenmahonyParticipant]

Hi,

The setup is:

I have a grid. The first column will be a dropdownlist with 3 possible options
label = Pending : value=2
label = Processed : value=1
label = On Hold : value = 3

I think my first problem is that I have not set the dropdownlist datasource correctly. The fist time i try and edit the cell the value is ‘undefined’

Code
// SET UP STATUS LIST SOURCE
var statusList = [{ value: '2', label: 'Pending' }, { value: '1', label: 'Processed' }, { value: '3', label: 'On Hold'}];
var statusSource =
	{
		datatype: "array",
		datafields: [
			{ name: 'label', type: 'string' },
			{ name: 'value', type: 'string' }
		],
		localdata: statusList
	};
var statusAdapter = new $.jqx.dataAdapter(statusSource, {
	autoBind: true
});
//SETUP MAINGRID DATAFIELDS
var datafields = [
	{ name: 'Status', value: 'StatusId', values: { source: statusAdapter.records, value: 'value', name: 'label'} },
	{ name: 'StatusId', type: 'string' },
	{ name: 'Origin' }
]
// SETUP COLS
var mycols = [
	{ text: 'Status', dataField: 'StatusId', displayfield: 'Status', cellsalign: 'left', align: 'left', width: '9%', columntype: 'dropdownlist',
		createeditor: function (row, value, editor) {
			editor.jqxDropDownList({ source: statusAdapter, displayMember: 'label', valueMember: 'value' });
			$(editor).on('select', function (event) {
				console.log('Select: ' + event.args.item.value);
				console.log('Select: ' + event.args.item.label);
			});
			$(editor).on('unselect', function (event) {
				console.log('Unselect: ' + event.args.item.value);
				console.log('Unselect: ' + event.args.item.label);
			});
		}
	},
	{ text: 'Origin', dataField: 'Origin', width: '10%', editable: false }
];
var initOutstanding = function (status, onhold) {
	$("#jqxgrid1").jqxGrid('clear');
               
	var source = {
		datatype: 'json',
		datafields: datafields,
		url: 'test.aspx/GetData',
		data: { status: status, onhold: onhold, billingid: billingid }
	};
	var dataAdapter = new $.jqx.dataAdapter(source,
		{
			contentType: 'application/json; charset=utf-8'
		});
	
	$("#jqxgrid1").jqxGrid({
		source: dataAdapter,
		selectionmode: 'singlecell',
		editmode: 'click',
		autoheight: true,
		editable: true,
		width: '99%',
		altrows: true,
		columnsresize: true,
		theme: 'metro',
		sortable: true,
		groupable: true
		columns: mycols
	});
}

hope this helps

[Author]

Posts