DataTables ScrollX Option Not Working #9020 | Support Center

BigCDogCrew created 5 years ago

ScrollX does not appear to work.
I'm using AspNetZero v8.6 MVC/jQuery.
I am using no custom scripts or css. My sample code and result image are shown below.

What am I doing wrong?

var dataTable = _$peripheralsTable.DataTable({
	scrollX: true,
	paging: true,
	serverSide: true,
	processing: true,
	listAction: {
		ajaxFunction: _peripheralsService.getAll,
		inputFilter: function () {
			return {
				filter: $('#PeripheralsTableFilter').val(),
			};
		}
	},
	columnDefs: [{
		width: 120,
		targets: 0,
		data: null,
		orderable: false,
		autoWidth: false,
		defaultContent: '',
		rowAction: {
			cssClass: 'btn btn-brand dropdown-toggle',
			text: ' ' + app.localize('Actions') + ' ',
			items: [
			{
				text: app.localize('View'),
				action: function (data) {
					_viewPeripheralModal.open({ id: data.record.peripheral.id });
				}
			},
			{
				text: app.localize('Edit'),
				visible: function () {
					return _permissions.edit;
				},
				action: function (data) {
					_createOrEditModal.open({ id: data.record.peripheral.id });
				}
			}]
		}
	},
	{
		targets: 1,
		visible: false,
		data: "peripheral.uid",
		name: "uid"   	
	},
	{
		targets: 2,
		data: "peripheral.serialNumber",
		name: "serialNumber"   
	},
	{
		targets: 3,
		data: "peripheral.assetTag",
		name: "assetTag"   
	},
	{
		targets: 4,
		data: "peripheral.firmwareVersion",
		name: "firmwareVersion"
	},
	{
		targets: 5,
		data: "peripheralModelCode" ,
		name: "peripheralModelFk.code" 
	}]
});

9 Answer(s)

0
BigCDogCrew created 5 years ago
When I attempt to use the CDN source for DataTables, I get an error.
So, I assume AspNetZero has customized its implementation of DataTables (and perhaps missed something with ScrollX?)

@section Styles { } @section Scripts { }

BigCDogCrew created 5 years ago

For good measure...here is the cshtml for the sample. Advanced Filtering has been removed and the project name has been changed (to protect the innocent).

@using ProjectX.Authorization
@using ProjectX.Web.Areas.App.Models.Peripherals
@using ProjectX.Web.Areas.App.Startup
@model PeripheralsViewModel
@{
    ViewBag.CurrentPageName = AppPageNames.Common.Peripherals;
}
@section Scripts
{
    
}

    
        
            
                
                    @L("Peripherals")
                
                
                
                    @L("PeripheralsHeaderInfo")
                
            
            
                
                     @L("ExportToExcel")
                    @if (IsGranted(AppPermissions.Pages_Peripherals_Create))
                    {
                         @L("Peripheral_CreateNew")
                    }
                
            
        
    
    
        
            
                
                    
                        
                            
                                
                                    
                                    
                                        
                                    
                                
                            
                        
                    
                
                
                    
                        
                            
                                @L("Actions")
                                @L("UID")
                                @L("SerialNumber")
                                @L("AssetTag")
                                @L("FirmwareVersion")
                                @L("PeripheralModelCode")

0
BigCDogCrew created 5 years ago
I found and applied the Metronic CSS class "table-scrollable". But that did not work.

I found an article on the DataTables Forum regarding ScrollX not working (actually reviewed that before posting this issue). That article led me to try a few style adjustments...but these did not work either.
0
ismcagdas created 5 years ago
Support Team
Hi,

You are right, AspNet Zero modifies some of datatable defaults.
You can change your table definition like below;

paging: true, serverSide: true, processing: true, scrollX: true, responsive: false, dom: 'rt<"bottom"il>p<"clear">',

There is one problem with this approach, you need to create new styles for paging items since it is now moved outside of table.
0
BigCDogCrew created 5 years ago
First, thank you to the whole AspNetTeam for being so responsive. I've submitted at least half a dozen emails and a few more support forum posts. The AspNetZero team has always answered within 24-48 hours. You're doing fantastic and the product is great.

Your solution works great too. I was able to find the CSS by searching for "dataTables_paginate" class. It was then a simple matter of removing the "div.bottom" descendant requirement. My resulting custom style script (as I left the original intact), follows below.

I'll do a little more work to make sure that the style update is bundled and that the appropriate theme styles are updated. Thanks, again.

P.S. - there may be a simple update that the AspNetZero team can do to fix this styling holistically for future users...and maybe autoset those DOM and RESPONSIVE options when scrollX is true and those options have not been specified yet.
0
BigCDogCrew created 5 years ago
After playing around with this issue a little more, it appears as though setting only two options are sufficient to make the scroll work properly.

scrollX: true, responsive: false

However, it's very possible that I did not catch or reproduce the scenario where the "dom" option becomes necessary. Will you please provide some clarity as to why and when the dom option should be used?

Thanks.
0

ismcagdas created 5 years ago
Support Team

Hi,

When I only change those two values, paging buttons of the DataTable disappeared. Do you still see this section when you don't modify dom ?
0

BigCDogCrew created 5 years ago

Yes. In v8.6, I still see the pagination controls without DOM being added to DataTable options.
0

ismcagdas created 5 years ago
Support Team

Hi,

Thanks, then you can use it like that.

Have an answer to this question? Log in and write your answer.