Posts

Showing posts with the label Bootstrap-Table-Export.js

Donate

How To Align Table Columns Inside A Detail View With It's Parent Bootstrap-Table Columns In ASP.NET MVC

Image
Good evening, When working with Detail View option in Bootstrap-Table by Wenzhixin, there's a possibility that you have to render the details information using a table element to the detail view with same number of columns and headers of the parent table as per client request. However, upon rendering the details view with the table element, the child table's columns are not aligned with the parent Bootstrap-Table such as the sample screen below. I tried different solutions such as CSS, jQuery/JavaScript and MutationObserver Pattern which work for a few details view and the rest would be in disarray. Before presenting the solution, here are the codes involved in this project. Bootrap Table With data-detail-view property enabled. <table id= "tblDetailsReport" class= "TableBorderCollapse table-striped" data-toggle= "table" data-sort-name= "JobNumber" data-sort-order= "asc" data-search= "t

Bootstrap-Table-Export.js Not Exporting Bootstrap Table Data

Normally, exporting a Bootstrap-Table by Wenzhixin using Bootstrap-Table-Export.js plugin works. But in my case, it's returning an empty document whether Excel,CSV, XML or JSON format. I did some debugging on the plugin itself and found out that it doesn't export if the main table contains child table(s). A fix that I came up was to remove the child tables from the table object before passing it to the tableExport.js plugin. The solutions is applied in the doExport() function of Bootstrap-Table-Export.js plugin. doExport = function () { //remove child table elements. var length = that.$tableBody.children( 'table' ).find( 'table' ).length; if (length > 0) { that.$tableBody.children( 'table' ).find( 'table' ).remove(); } that.$el.tableExport($.extend({}, that.options.exportOptions, { type: type, escape: false })); };

Donate