I was trying to export a hierarchical grid to excel. Just wanted to confirm if this is possible. Currently I was only able to export the parent grid. Please find the jsbin that I created for the issue here.
It's a little bit of work, but there's an example in the docs
I am attempting to get this working as well. In order to get the detail grids, they must be expanded. I am doing it this way, although it contains the correct data in hierarchical form, it is generating .xls file for each row! Maybe you can tweak? The exportGrid function is pulled from docs at link posted by Joe:
if (grid.options.excel.allPages) {
originalPageSize = grid.dataSource.pageSize();
originalHandler = grid.options.dataBound.name;
//show all
grid.dataSource.pageSize(grid.pager.dataSource._total);
grid.bind('dataBound', function (e) {
//expand all
toggleDetailGridRows('expand', $(grid.element).attr('id'));
grid.bind('dataBound', originalHandler);
});
setTimeout(function () {
ExcelHelper.exportGrid(e, grid);
grid.dataSource.pageSize(originalPageSize);
}, 2000);
}
else {
ExcelHelper.exportGrid(e, grid);
}
Related
I'm using smart-table at the moment, and I have input text boxes up the top of each column and I am using st-search. The point of what I am making is something is selected from the table, and then the results in the table are changed.
I am trying to clear the search boxes when the row is clicked. At the moment other business logic is implemented on click, so it's at this point that I am looking to clear these text boxes.
I have tried to associate an ng-model to these text boxes, and to clear them when the row is clicked but the text boxes don't change. I have also googled this issue and I have only found solutions on how to make this work for when you click on a button (by a directive) to clear the predicates. I haven't been able to make these solutions work programatically however.
To resolve this I did the following:
Monkey-patched smarttable.js with the code in this github issue (https://github.com/lorenzofox3/Smart-Table/issues/164). For me this occured at around line 574.
// added from https://github.com/lorenzofox3/Smart-Table/issues/164
ng.module("smart-table").directive("stResetSearch",
function() {
return {
restrict: 'EA',
require: '^stTable',
link: function(scope, element, attrs, ctrl) {
return element.bind('click',
function() {
return scope.$apply(function() {
var tableState;
tableState = ctrl.tableState();
tableState.search.predicateObject = {};
tableState.pagination.start = 0;
return ctrl.pipe();
});
});
}
};
});
Added 'st-research-search' to the element that was calling the function in angularjs. For me, that was the "tr" element. Like below.
<tr ng-repeat="medicine in medicines" ng-click="medicationMatched(medicine)" ng-class="heatmapClass(medicine)" st-reset-search>
This worked fine. Unfortunately, I wasn't able to programatically clear the predicates from the code. But this works well enough for me.
I want to modify the table on this wordpress page, i only have access to the admin panel.
http://cqpperu.org/colegiados/busqueda-de-colegiados
to only show results if any filter is applied. I didn't find any options on the wordpress plugin to do so. I've tried the solution offered in the WPDataTables forum but it didn't work. I've tried installing Custom css-js-php plugin to be able to insert code to that single page.
I managed to hide the table with CSS using this code
#table_1, #table_1_info, #table_1_paginate { display: none !important; }
but can't show it with JS.
I tried this code without luck.
jQuery("#table_1_filter input").keyup(function (e) {
if ($(this).val().length > 1) {
$("#table_1,#table_1_info,#table_1_paginate").show();
} else {
$("#table_1,#table_1_info,#table_1_paginate").hide();
}
});
i'm very new to javascript so please help. Thank you.
It didn't work for me too but after searching and applying codes online, I came up with this. Hope it works for you.
var $tb = jQuery.noConflict();
jQuery(function($tb) {
$tb('#table_1_filter input').on('keyup', function() {
if( $tb(this).val().length > 3 ){
$tb('#table_1').attr('style','display: table !important'); } else { $tb('#table_1').attr('style','display: none !important'); }
});
});
If anyone knows how to apply it to a specific table only, that would be great. Thanks!
I can't figure out how to make my treeview filterable.
Looking at the demos on http://demos.telerik.com/kendo-ui/treeview/api
function DoSearch() {
var treeView = $("#ItemList").kendoTreeView().data("kendoTreeView");
var filterText = $("#search-value").val();
if (filterText !== "") {
treeView.dataSource.filter({
field: "text",
operator: "contains",
value: filterText
});
} else {
treeview.dataSource.filter({});
}
}
If I do the implementation, when using filter method I am loosing my treeview
Here a fiddle with my sample treeview the same way that I'm getting, not using datasource, the ASPNET server code return the list as appears on the fiddle, then by javascript call the kendoTreeView method.
Here's my fiddle
http://jsfiddle.net/mspasiuk/hw4j4qt2/
To put in a nutshell what I want to do is have a textbox, when I type or hit on a button using a 'contains' clause, the treeview only have to show the items who match the criteria, If the search box is empty show the original treeview.
I would appreciate any help. Thanks
Alright, I was dealing with the same issue and with the help of this post I managed to do it. So make sure you check the existing thread I gave the link for. Hope that helps.
I've been messing around with autoNumeric, a plug-in for jQuery that formats currency fields.
I'd like to wire the plug-in so that all currency fields are formatted by the time the user sees the page, e.g., on load.
Currently, the default that I can't seem to get around is that fields are formatted upon blur, key-up or other action in the fields themselves.
I've been experimenting with the plug-in code and it looks like it will take this relative newcomer some time to resolve this, if at all.
Anybody on this?
Lille
Triggering 'focusout' event formats the field. Triggering 'change' does not work in the most recent version (1.7.4).
$('input.money').autoNumeric({aNeg: '-'}).trigger('focusout');
autoNumeric does all formatting after 'onchange' event fires. So all that you need is to programmatically fire this event. Like this:
$('input.money').autoNumeric({aNeg: '-'}).trigger('change');
Hope this helps!
I just ran into this problem myself. I had to make it more general, but this worked for me:
$('input.auto-numeric').ready(function(){
var format_options = {
aSign: '$'
};
$('input.auto-numeric').each(function(){
$(this).autoNumeric(format_options);
if($(this).attr('id')){
$(this).val($.fn.autoNumeric.Format($(this).attr('id'), $(this).val(), format_options));
}
});
});
This should work.
jQuery(function($) {
$('input.auto').ready(function(){
$('input.auto').autoNumeric();
var inputID = uniqueID; // use the jQuery.get() function to retrieve data
var formatValue = '1234.00'; // use the jQuery.get() function to retrieve data
if(jQuery().autoNumeric){
$('#id').val($.fn.autoNumeric.Format(inputID, formatValue));
}
else{
alert('plugin not available');
}
});
});
Bob
This is what I eventually did:
$(document).ready(function(){
$('input.auto').autoNumeric();
$('input.auto').each(function(){
var element = this
if(element.value !=""){
$('#'+element.id).val($.fn.autoNumeric.Format(element.id, element.value));
}
}
);
});
Another way of forcing formatting is using 'update' like
$(".input-numeric").autoNumeric('update');
In the current version 2.* and onward, this is done by default thanks to the formatOnPageLoad option that is set to true.
It's that simple ;)
I want to take advantage of the sortableRows property of the jqGrid. How do I detect when a row has been moved. I have studied the documentation and looked for examples but haven't found much. I do believe it is something like
jQuery("#grid").sortableRows({connectWith:'#gird',
ondrop: function(){ alert("row moved") }});
but that does not work. I can move the rows, but don't seemed to have trapped the event. Is there something wrong with my syntax or my approach in general.
Basically, I need to know that the rows have been rearranged so I can be sure they get saved with their new order.
Thanks
jqGrid uses the ui-sortable plugin to sort rows: http://jqueryui.com/demos/sortable/.
In
jQuery("#grid").sortableRows( options )
"options" is the passed to the sortable plugin.
options = { update : function(e,ui){} }
is what you want.
Attach the sortstop event handler to your grid:
jQuery("#grid").bind('sortstop', function(event, ui) { alert("row moved") });
I did a quick test and that worked for me.
jQuery('#'+grid_id).jqGrid('sortableRows', {
update: function (event, ui) {
var newOrder = $('#'+grid_id).jqGrid("getDataIDs");
//do whatever you want with new roworder
//please keep in mind this will give only page visible rows
}
});