This should be fairly simple, probably too simple, given I cannot find the API reference as of how to control it.
I am using https://swiperjs.com/ to build a simple slider of images.
Specifically, this one https://codesandbox.io/p/sandbox/5nclhv?file=%2Findex.html
Now, I want the slider to start at Slide Item 2, not item 1.
Yet, I cannot find any single option or API control to offset the initial pagination by one.
What am I missing?
You can use https://swiperjs.com/swiper-api#param-initialSlide:
initialSlide
This parameter has default value 0 and defines the index number of initial slide.
Thus, setting it to 1 will make the slider start at the second slide item.
Related
How to deselect the first PivotItem. I am displaying A to Z pivot item and currently its always selecting first letter A. Could you please tell me how to deselect the first element? Thanks!
I want to use getStyles property interface. But not sure how to override. any samples would be great. Thanks
getStyles?: IPivotStyles;
If you mean by deselecting first PivotItem selecting a specific one you always provide by yourself vs selecting the first one in the list, then there are several props on the Pivot allowing you to do that. Here you can see all of them listed as props on the component. By default, if none of them are provided you will get the first PivotItem selected on render. In here you can see a demo of using the initialSelectedKey prop.
There is no way to deselect them all as Pivot needs to know what to render when it mounts.
As for the getStyles usage, I believe you are using Fabric 5 because in Fabric 6 the prop was renamed to styles and it can take a style object or a style function that returns a style object. In the same codepen, you can see how I changed the color of the links by passing a style object.
I am trying to create an effect similar to this (the demo uses Bootstrap Carousel):
https://codepen.io/SitePoint/pen/BpVrXP/
Bootstrap's 'slide.bs.carousel' returns a relatedTarget that is the slide element going to be displayed as soon as the carousel is moved i.e changed to another slide.
I haven't been able to find an equivalent data being returned in OwlCarousel2's changed.owl.carousel event. What event, if any, returns the element that's going to be in view?
Is there any alternative way or am I missing something?
Try the event translated.owl.carousel, translated is fired after the animation
I have a set of multilevel data to be display using abovementioned component. Usually in PHP I simply iterate the data to display it as li but coming from web background, I just can't put it all together when using react-native. What is the right way to display a set of menu
FYI, I'm also using react-native-router-flux to manage the router.
If you want to build you own menu, you'll have to customize the renderRow of your ListView. If you take a look at RN's official doc on ListView here, it shows that you can specify a sectionID, for example.
You can then specify how each row renders.
renderRow: function (rowData, sectionID, rowID, highlightRow) => renderable
Takes a data entry from the data source and its ids and should return
a renderable component to be rendered as the row. By default the data
is exactly what was put into the data source, but it's also possible
to provide custom extractors. ListView can be notified when a row is
being highlighted by calling highlightRow(sectionID, rowID). This sets
a boolean value of adjacentRowHighlighted in renderSeparator, allowing
you to control the separators above and below the highlighted row. The
highlighted state of a row can be reset by calling highlightRow(null).
Another option is using open source modules built by the community.
The one closest to your needs I could find is : https://github.com/jaysoo/react-native-menu
I'm using Dgrid with an Observable JsonRest store. The JsonRest store is queried for 50 rows at a time. Now I have a function where the user can 'quicksearch' the data and the search is processed on the serverside. This works, and in this case the server returns for example "Content-Range: 210-260/1500". It returns 50 rows of data but Dgrid renders the full grid at the beginning, so the user can't scroll 'up' for previous entries.
How can I make Dgrid behave like that?
Not entirely sure if I'm completely grasping your problem, but if I am, it may require some thinking outside the box or compromising to get what you want. I assume your UI is basically jumping to the first match rather than simply filtering the grid to only show matches.
If your UI is such that the grid is always present and the search is basically intended to scroll the grid, you can use grid.scrollTo({ y: valueInPixels }) to scroll the grid. While this accepts a pixel value (not rows), if your rows are consistent height, you can multiply by grid.rowHeight (which is a property set by OnDemandList) to get the correct offset.
Another option, though probably not what you want, would be to use the Pagination extension and navigate to a specific page.
Of course, if you would rather actually filter the grid to only display matching items, that's possible too (assuming your server behaves as dojo/store/JsonRest expects, anyway). The Using Grids and Stores tutorial has an example towards the end.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});