here is my template: ( here i am trying to implement paging from outside of the data table,not works!!)
<div id="outside">
<dxo-pager
[showInfo]="true"
infoText="Page #{0}. Total: {1} ({2} items)"
[showPageSizeSelector]="true"
[allowedPageSizes]="[10, 20, 50, 100]"
[showNavigationButtons]="true">
</dxo-pager>
</div>
<dx-data-grid [dataSource]="courseList | async" #dataTable id="gridContainer"
[customizeColumns]="customizeColumns"
(onRowPrepared)="onRowPrepared('cellInfo')"
(onCellPrepared)="onCellPrepared($event)"
(onEditingStart)="logEvent('EditingStart')"
(onInitNewRow)="logEvent('InitNewRow')"
(onRowInserting)="logEvent('RowInserting')"
(onRowInserted)="logEvent('RowInserted')"
(onRowUpdating)="logEvent('RowUpdating')"
(onRowUpdated)="logEvent('RowUpdated')"
(onRowRemoving)="logEvent('RowRemoving')"
(onRowRemoved)="logEvent('RowRemoved')">
<dx-data-grid>
my question is what is the right way to paging from outside for a data table?
simply: how to connect from outside with required data table?
Related
I have a table with a list of contacts as seen in the image. I also have an event that gets triggered when a row is clicked so it can show the selected contact detail (I am using angular NGIF directive to show and hide the detail)
The thing is because my google input is placed inside an NGIF block, when user expands the contact detail and tries to type in it, the predictions (pac-container) is showing on the row that I clicked (within the table) rather than underneath the google input autocomplete search box.
I tried to manipulate the css of the class pac-container but I couldn't figure out a way to override the css of that class.
Here is my the html of my autocomplete search box
<div *ngIf="showGoogleAddress" class="mg-b-10" fxLayoutGap="10px" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlexFill>
<div fxFlex>
<mat-form-field appearance="outline" class="form-field">
<mat-label>Google Address Search Box</mat-label>
<input [debounceTime]="500" ngxAutocomPlace autocomplete="off" (selectedPlace)="placeChanged($event)" placeholder="ex: Phoenix, Arizona" matInput #googleAddress="matInput" >
<mat-icon matSuffix>location_on</mat-icon>
<mat-hint>Search for compolete address, or city</mat-hint>
</mat-form-field>
</div>
</div>
also, here is a screenshot of the entire form after expanding the detail
If the google autocomplete box was outside the NGIF, then it will render the predictions just fine without an issue. It seems that because I am using NGIF directive, the google component is not able to determine the right position (calculate the right position) to render its predictions..
When I tried
.pac-container {
position: absolute !important;
z-index: 100000;
}
it did not work.
I had to go with a DOM Manipulation way using JS.. so I added a (keyUp) event handler on google search box with a method to calculate the position like the following:
adjustResPosition() {
setTimeout(() => {
var gSearchBar = document.getElementById('googleBar');
var topPos = (gSearchBar?.getBoundingClientRect().top || 0) + window.scrollY + 25;
var leftPos = (gSearchBar?.getBoundingClientRect().left || 0) + window.scrollX;
var gPreds = document.querySelector('.pac-container');
gPreds?.setAttribute('style', `top: ${topPos}px; position: absolute!important; width: auto; left: ${leftPos}px`);
}, 600);
}
The reason why I put setTimeout to 600ms is because I have a debounce 500 ms each until it grabs the next predictions and put it in the pac-container div
Note, this is not an optimal solution and it can be improved with ViewChild or ElementRef
I already have a barplot ui5 vizframe, but I would like to allow the user to select some of those bars, add each element id to a list and then send the list through a button in order to display a more detailed graph on a fragment.xml view.
On my picture example, the selection is mathematics, ASP and C#.
Here is the view.xml for the main graph panel:
<f:Card class="sapUiTinyMargin tileLayout" width="96%" visible="{config>/useFeatureEnableDemoFunctionality}">
<f:layoutData>
<grid:GridItemLayoutData gridRow="span 2"/>
</f:layoutData>
<f:header>
<card:Header title="Skills popularity" subtitle="List of skills and tools ordered by how many people mentioned it in their profile"/>
</f:header>
<f:content>
<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='bar'>
<viz:dataset>
<viz.data:FlattenedDataset data="{path:'/PopularSkills', length: 30, sorter:{ path: 'MembersCount', descending: true }}">
<viz.data:dimensions>
<viz.data:DimensionDefinition name="Label" value="{Label}"/>
</viz.data:dimensions>
<viz.data:measures>
<viz.data:MeasureDefinition name="Popularity" value="{MembersCount}"/>
</viz.data:measures>
</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Popularity"/>
<viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Label"/>
</viz:feeds>
</viz:VizFrame>
<!--<Button icon="sap-icon://log" class="sapUiTinyMargin" text='Analyse selection' press="ButtonSkillSelection"/>-->
</f:content>
</f:Card>
Rendered chart:
[
This is a method to retrieve selected items in the VizFrame:
<Button press=".onPress"/>
onPress: function(){
const selectedSkills = this.getView().byId("idVizFrame").vizSelection();
//Do something useful with your selection
}
i am using syncfusion pager, dropdownlist in our application
please open the below link.
https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2Fapp.component.html
data will change based on the number of items selected from dropdown.
after selecting the 20 items from drop down go to bottom of the page by scrolling.
drop down list is showing bottom of the drop down box. but i want to show dropdown list items always top of the dropdown box.
Please provide any solution.
i just saw your code on your link, and i tried this:
<div class="container-fluid">
<div class="card" *ngFor="let student of tempArray">
<div class='card-body'>
<p class="text-truncate">{{student.name}} {{student.standard}}</p>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class='card'>
<div class='card-body'>
<div class="fixed-footer" *ngIf="students.length > paginationData[0].value">
<ejs-pager [pageCount]="3" [pageSize]="value" (click)="selectedPage($event)"
[totalRecordsCount]='students.length'></ejs-pager>
<ejs-dropdownlist [dataSource]="paginationData" [fields]="fields" (change)="valueChange($event)" [popupHeight]=150 [value]="value"></ejs-dropdownlist>
</div></div>
</div>
</div>
what i did here is that i put the list items and the drop down box on a separate card.
it's a little messy, just please arrange the indentions.
In the dropdownlist open event, you can get the popupHight and set a negative value into popup offsetY property, refer to below code.
onddlPopupOpen(event: PopupEventArgs, ddlObj) {
event.popup.offsetY = -(parseInt(ddlObj.popupHeight));
event.popup.collision = { X: 'fit', Y: 'fit' };
event.popup.dataBind();
event.popup.refreshPosition(ddlObj.element, false);
}
This will open the popup in the top.
Sample
I am trying to create dynamic tiles using the mdl-grid and mdl-cell , but the cell is stretching to the maximum height of the column in that row .
To see the difference Here is the example from Angular material design . Here the tiles are displayed dynamically and the columns are not taking the max width of other columns in that row .
http://codepen.io/anon/pen/bpbxzz
Here is the second example using material lite , But here you can see the columns are stretching
http://codepen.io/anon/pen/xVKaod
Is there any way I can create dynamic tiles using MDL ?
UPDATE
After researching for few hours I found this approach is called Masonry layout . I searched for it and found the below ones . But I can not able to do it with flex layout .
1) JQuery Plugin https://github.com/desandro/masonry
2) This is with CSS3
http://web.archive.org/web/20111226183221/http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3
here is another link
http://jsfiddle.net/RTLun/
here stackoverflow link
Compact arrangement of DIVs in two directions
UPDATE
I found the above links doesn't maintain the order of the items , But this one does . But can not find CSS code to do this
http://michieldewit.github.io/isotope-modulo-columns/
Thanks
using http://masonry.desandro.com/ , it perfectly works for me.
<div class="mdl-grid masonry-grid">
<div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
</div>
<div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item">
</div>
</div>
<script src="https://unpkg.com/masonry- layout#4/dist/masonry.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.masonry-grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.masonry-grid-item'
});
</script>
I am trying to bind a range slider with two text input controls. Ideally, I want change in either range slider, text input or viewModel property to update all these controls visually and in sync. But here is my observation.
Changing range slider values by dragging the thumb, updates the viewModel and input text control values
Editing the text in input field in UI updates the viewModel but the rangeSlider is not updated.
Changing the range property in console eg. viewModel.range[0]=-10, does not update the text input value or range slider.
Changing the range slider value programmatically(slider.value([-7. 10])) does not update viewModel or input text.
Here is the code:
Javascript
<script type="text/javascript">
var viewModel = kendo.observable({
range: [-7, 3]
});
$(document).ready(function() {
var slider = $("#slider").kendoRangeSlider({
min: -10,
max: 10
});
kendo.bind($(".QFContent"), viewModel);
});
</script>
HTML
<div class='QFContent'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[0]" data-value-update="keyup" type='text'></input>
</div>
<div class='QFReadout QFUpperBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[1]" data-value-update="keyup" type='text'></input>
</div>
<div id="slider" class='QFSlider QFBar' data-bind="value : range">
<input></input>
<input></input>
</div>
</div>
You have to do a bit more work with updating the range as I don't think binding the value to an array[0]/[1] will actually update it.
You will need to call a function that will update the range values when the input box changes. I went ahead and used kendo numerictextboxes, but a regular input box works just as well.
http://jsbin.com/eBOJeceN/2/edit
-- Edit, small bug in that sample, "undefined" isn't undefined. Updated jsbin http://jsbin.com/eBOJeceN/4/edit