We Keep Coding

Customize ngx-datatable pager component to show Text instead of Icons and add totalVisible property?

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

Activate specific panel in leftPanel in PDFNet Webviewer

I remove 2 of the 3 panels of the leftPanel by using disableElements:
setQuickBarPanelContents() {
this.instance.disableElements(['notesPanel', 'notesPanelButton', 'outlinesPanel', 'outlinesPanelButton']);
}
One of the removed panels is the default active one, so when leftPanel is now activated, the remaining panel(thumbnails) isn't active by default and shows up blank with the button on top. You need to press the button to activate and see the actual thumbnails in the panel.
I can't seem to find any way to (default) activate this panel through the PDFNet API. Am I overlooking something or is this a bug?

The API you'd want to use is setActiveLeftPanel: https://www.pdftron.com/api/web/WebViewer.html#setActiveLeftPanel__anchor.
In this particular case you can call instance.setActiveLeftPanel('thumbnailsPanel').

React material design onclick list-item highlight the item/ active

I have 2 panels with a list group on each panel. I am using material design.
Issue:
onclick first list-item on panel 1 it is not getting selected and changing style = "success" or highlighting the selected list, same for the panel 2.
Looking for the solution: onclick on list-item it should change the style or active or change the background color. Highlight the selected item and remove it when clicking on another item on the respective panel.
original code
I want output like this Bootstrap code. This was done in bootstrap but looking for a solution in material UI

You will need to add the following lines
In cards
selected={card==selectedCard}
in item
selected={item==selectedCheck}
I believe it should work after this.

disable carousel advance buttons

I have a carousel with 3 panes controlled by left and right arrows. I want the left arrow to disable on pane 1 and the right arrow to disable on pane 3, so the carousel doesn't loop round itself.
I have written a button disable function that appears to work, but won't when I try to call it from the correct pane.
Here is the javascript which advances the carousel pane, called on the right arrow button click:
if(currentPane==1){
currentPane=2;
$("#carouselDots").css('background-image', 'url(images/dots_2.png)');
}
else if(currentPane==2){
currentPane=3;
$("#carouselDots").css('background-image', 'url(images/dots_3.png)');
disableRButton();
}
here is the disableRButton function:
function disableRButton()
{
$("#carouselBtn").button("disable");
}
I also want the button to change its BG img when disabled this is what i'm trying to do in CSS:
.carouselBtn:disabled{
background:transparent url('images/carouselArrowDisabled.png')no-repeat;}
Any Ideas on why the button is not disabling would be great. Also, what is the correct way to use this disabled button tag in CSS, or is it better to change the button's BG img in javascript?

I don't think jquery has a button function that takes a string saying disabled. You need to add a disabled attribute to the button to disable it.
For example
$("my-button").attr("disabled", true);
You are using the :disabled selector correctly, but the first part of the selector is wrong I think. It should start with a . if carouselBtn is the name of a class of # if it is the name of the ID. You currently mix these in your different examples.

If you are using the jQuery UI Button Widget, you have to do it this way:
$("#carouselBtn" ).button({disabled:true});
Most likely it will work when you write "disabled" instead of "disable".

you set attr disable thats enough to avoid the clicks after using jquery to set background
function disableRButton()
{
$("#carouselBtn").attr("disabled",true);
$("#carouselBtn").css("background-image",'images/carouselArrowDisabled.png');
}

how to hide panel of a dojo splitcontainer / bordercontainer?

How to hide splitcontainer pane programmatically. I have 3 panels. i want to hide show one panel on press of a button. how to do that ? Don't want to destroy it.

Use SplitContainer's addChild() and removeChild() methods:
splitContainer.removeChild(contentPane3); // to hide pane
splitContainer.addChild(contentPane3); // to show pane
Follow my jsFiddle to see and play with working example including toggling of panes.
Also please note, that SplitContainer is deprecated and you should use dijit.layout.BorderContainer instead. Set data-dojo-props="splitter:true" to enable drag-n-drop resizing.