I like the functionality of the Filter in this example:
http://mleibman.github.com/SlickGrid/examples/example-header-row.html
where each column has its own filter, but I also require the functionality of the Filter from:
http://mleibman.github.com/SlickGrid/examples/example4-model.html
In that it can be hidden and shown via button click.
Is it possible to have the Filters from the first link, with the "hide-ability" of the Filter from the second link? Thanks!
Yes, it is. You may use the method grid.hideHeaderRowColumns() in the first example to hide the filter bar. Then use grid.showHeaderRowColumns() to show it again.
For example, navigate to the first link, and replace the contents of the URL bar with:
javascript:grid.hideHeaderRowColumns()
and hit Enter. You should see the filter bar slide up and away. If you are building your app from the first example code, you should be able to call these functions from almost anywhere, ie.
<input type="button" onclick="grid.hideHeaderRowColumns();" value="Hide Filter" />
Note that in the second example, the author uses the following code to add a predefined, but hidden, element to the styled header bar:
// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
.appendTo(grid.getTopPanel())
.show();
And the hidden element:
<div id="inlineFilterPanel"
style="display:none;background:#dddddd;padding:3px;color:black;">
Show tasks with title including
<input type="text" id="txtSearch2">
and % at least
<div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>
Related
I'm using a ng-select dropdown to dynamically search the data.
The only issue is that the content is not visible when you click the down arrow once the search result is discovered, even though I was able to implement the search as planned.
https://stackblitz.com/edit/base-angular-12-app-xtmcpu
Steps to reproduce:
step 1: click on search box
step 2: search a number, for eg : 1
step 3: click down arrow
Please help me on this. Thanks in advance.
As per what I can understand, it seems that this the style that you applied in the html that interfers with the size of the elements being displayed underneath the input (after removing it: https://stackblitz.com/edit/base-angular-12-app-aecymo)
This is actually the default behavior of ng-select. You can bypass it by removing your style or by applying custom style to the items.
I am Customizing the datatable-pager in ngx-dataTable and can able to add footers and pagers. I have only two issues as follows -
For prev / Next / First and Last button , How to show text instead of icon?
How to add totalVisible property to show first 3 and last 3 pages in the pager and show a ... disabled button in between?
currently I am writing the following code -
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible"
>
<datatable-pager
[pagerLeftArrowIcon]="datatable-icon-Left"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
(change)="table.onFooterPage($event)">
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
I need to pass some Text Props instead of the arro icons and next/prev icons to show text. And I also need to show first 3 and last 3 page buttons in the pager and show a ... disabled button in between in case there are more than 7 page to show Just like
to replace icons with text you will have to replace datatable-pager with your component, and provide the functionality. You can see here how datatable-pager has been implemented and create your own component.
Link: https://github.com/swimlane/ngx-datatable/blob/master/src/components/footer/pager.component.ts
If you need any help feel free to ask.
above provided url is not working, you can check below url which showing correct code https://github.com/swimlane/ngx-datatable/blob/master/projects/swimlane/ngx-datatable/src/lib/components/footer/pager.component.ts
I have two modules which each contain a button code as follows:
First Button
<div onclick="parent.location='first-link'" data-mce-onclick=""><button class="button">First Button</button>
Second Button
<div onclick="parent.location='second-link'" data-mce-onclick=""><button class="button">Second Button</button>
When I show these buttons in the same template position on at the same time in the article, the First Button loses it’s functionality. What do I need to change in order to have them both be able to function properly within the same page?
try to use 1 module only for your links and
use css place your buttons
check this site for how to it uses 1 module for placing that links
http://soroushabtahi.com
I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.
You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)
Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.
Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.
I'm looking at creating something like this:
http://konigi.com/interface/kontain-search
alt text http://s3.amazonaws.com/konigi/interface/kontain-search-2.png
I don't suppose anyone has any resources which could guide me? I know I'm not giving much information but I wouldn't know where to start looking.
Cheers!
EDIT Sorry, I meant just the drop down / input box, nothing else on that site.
EDIT AGAIN The drop down list is inside of the input box, hence why I was wondering.
It may be something similar to these examples but with only one main item. and manipulate with jquery each "li" and that action taken
example 1 |
example 2 |
example 3 |
example 4
edition answer: this is done with css.
is all contained in a div -> input + menu.
for the input is removed border styles and background color is the same as the container div.
Well, you put part of the search form in a hidden div and pop it up when the user clicks or hovers on some other element, either inside or outside the form. Use CSS as needed to position the div. Not really sure what problems you could possibly have with something like this.
Maybe you can be more specific and break this problem down in several more focused questions?
I did not drill into the site, but from a logical standpoint, perhaps the search box AND the dropdown are "inside" another element (div?) that forms the complex control...and just formated(CSS)/actions(jQuery) placed on those.
<div id="searchDiv">
<div id="searchText"></div>
<div id="searchDropdown"></div>
<div id="searchButton"><div>
</div>
Easy enough to set somthing like that up.
I think what's going on there isn't that the dropdown is inside an input box, but rather that the input box chrome is hidden and it's placed inside an input-looking div along with the dropdown.