I have implemented react select in my SPFx react project.
Below is the reference link for the react select control,
https://react-select.com/home
Below is the code snippet of the react select control.
<Select options={
(searchValue === null || searchValue) ?
filteredData?.map((item) => {
return {
value: item?.EncodedAbsUrl,
label: <a href={item?.EncodedAbsUrl} data-interception="off" target="_blank" rel="noopener noreferrer" className='link-name '>
{item?.FileLeafRef.split('.')[0]}
</a>
};
}) : []}
isMulti
className="ddl-search"
isClearable={true}
isSearchable={true}
placeholder={<><i className="fa fa-search"></i><span className='padding-left'>Search Forms & Templates</span></>}
onInputChange={(e) => filterDocuments(e)}
components={{ NoOptionsMessage }}
menuIsOpen={isOpenMenu}
onBlur={() => setIsOpenMenu(false)}
escapeClearsValue={true}
backspaceRemovesValue={true}
ref={ref}
openMenuOnFocus
/>
I need to remove all selected options programmatically without pressing any key or clicking a button.
Below is the screenshot for the same for more clarification.
Can anyone help me with the same?
Thanks
Related
I have a dropdown in SPFX webpart in sharepoint online. In that dropdown, onchange, I am constructing a url with # tag.
E.x. https://sharepointonine/default.aspx#2349-234234-23434
I need to navigate to this new url. I am not sure how to accomplish things.
I have tried:
window.location = url //Gives error that string is not assignable to Location
window.location.href= url//does not reload the page
window.open(url, "_self")//does not reload the page
window.location.assign(url);//does not reload the page
window.location.replace(url);//does not reload the page
Any help?
You can create element 'a' and call click to open url
let a = document.createElement('a');
a.href = 'your link to open';
a.click();
this works fine.
Also you can use react-router, as describe here
There are also redirect link:
import { Redirect } from 'react-router';
When you need to redirect to som url, you render redirect:
<Redirect to={'/to url'}></Redirect>
I test with no framework SPFX.
Test result:
Test code for your reference:
public render(): void {
this.domElement.innerHTML = `
<div class="${styles.noframeworkSpfx}">
<div class="${styles.container}">
<div class="${styles.row}">
<div class="${styles.column}">
<span class="${styles.title}">Welcome to SharePoint!</span>
<p class="${styles.subTitle}">Customize SharePoint experiences using Web Parts.</p>
<p class="${styles.description}">${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${styles.button}">
<span class="${styles.label}">Learn more</span>
</a>
<select id="option" >
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
</div>
</div>
</div>
</div>`;
this.domElement.querySelector('#option').addEventListener('change', (e) => {
window.location.href="https://www.google.com/search?q="+e.target["value"]
})
}
I'm very new to react JS, and I am using it to build a app now. I have a question.
In of of the Button Click event i have a code logic like this:
handlestartbutton(event) {
const accesskey = localStorage.getItem(localStorageKeys.accessTokenKey);
const decodedAccessKey = jwt_decode(accesskey);
const date = dateConverter.epochToReadableDate(decodedAccessKey.exp);
if (date.currentTime < date.expiryDate) {
this.setState({
accesstokenexpirydate: true
}, () => {
if(this.state.accesstokenexpirydate === false) {
//rest of the code
}
})
In renderer() i have a a pop up UI like this:
renderer()
{
{this.state.accesstokenexpirydate === true ? (
<Popup
open ={this.state.open}
closeOnDocumentClick={false}
closeOnEscape={false}
onClose={this.closeModal}className
>
<div className={popstyles.popupBody}>
<div className={popstyles.modalClose}>
<a className="close" onClick={this.closeModal}>
×
</a>
{""}
<div className ={popstyles.unAutherizedUser}>
<label >{homeConstantMessages.accessTokenExpire}</label>
<div className ={popstyles.unAutherizedUserMsg}>
<label>{homeConstantMessages.accessTokenExpireMsg}</label>
<button className ={styles.refreshaccessbtn} onClick = {this.navigateToHomePage.bind(this)} label = {homeConstantMessages.refreshbtn}>
</button>
</div>
</div>
</div>
</div>
</Popup>
) : (
''
)}
}
The problem is when the first time start button is clicked this pop up UI is not getting popped even though the state variable accesstokenexpirydate is set to true. when second time the button is cicked UI is popping up. can anyone please help me out here
1) I think you have to apply arrow function like follows and then you can use this
handlestartbutton=(event)=> {...}
2) I'm quite confused about the name, don't you think it should be render(...) instead of renderer()
How to add button in sibling of div.selectize-dropdown-content div.
So that list item should scroll as usual but that button should be fixed at bottom.
I have gone through plugin for selectize js but all the render function is only for list , header and item.
Any help will be appreciable.
var $select = $('#select-state').selectize({
sortField: 'text',
hideSelected: false,
plugins: {
'dropdown_header': {
title: '<button class="btn full-width ng-binding" data-options="modal"><i class="fa fa-plus"></i> Yeni Ekle</button>'
}
}
});
I try to make the menu button not to show when the back button is showing. is there a way to let Ionic take care of that? or it's up to me?
for example if i use ui-sref to go from app.users to app.users.add or app.users.details i expect the menu button to be hidden and the back button to show, but they're both showing when i go to nested views. example:
<button class="button button-positive" ui-sref="app.users.details({id:user.id})"> User details </button>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
//controller: 'AppCtrl'
})
.state('app.users', {
url: '/users',
views: {
'menuContent#app' : {
controller: 'UsersCtrl',
templateUrl: 'templates/users.html'
}
}
})
.state('app.users.add', {
url: '/addUsers',
views: {
'menuContent#app' : {
controller: 'AddUserCtrl',
templateUrl: 'templates/add_user.html'
}
}
})
.state('app.users.details', {
url: '/userDetails/:id',
views: {
'menuContent#app' : {
controller: 'UserDetailsCtrl',
templateUrl: 'templates/details_user.html'
}
}
})
}
menu.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios7-arrow-forward"></i> back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header bar-stable">
<h1 class="title">Title</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.users">
Users
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.users.add">
New user
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My views structure is as such:
<ion-view title="Title">
<ion-nav-buttons side="right">
<button menu-toggle="right"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
View Content
...
</ion-content>
</ion-view>
This is done by ionic by default now in beta 14. You can also toggle this by this attribute.
<ion-side-menus enable-menu-with-back-views="false">
Relative Codepen
Sidemenu Starter Project
Sidemenu Docs
Is also possible to override that from a child page just adding the ion-side-menus directive inside the child template:
<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus>
<ion-view view-title="My Child page">
<ion-content>
<h1>HEY</h1>
</ion-content>
</ion-view>
This will add the complete navigation bar (ion-nav-bar) inside your child page that was added into menu.html template (according with the example above)
Place the navbar with menu button on the html page on which you need menu button and place navbar with back button on the page where you need back button.
Like this I need Menu On home page so place your navbar on homepage with menu button
<ion-view title="home">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu- toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
And I need back button on Inbox page so use navbar with backbutton on inbox page
<ion-view title="">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-back-button class="button-clear go-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
I solved in 2019 adding the property "menuToggle" to the Button. That tells Ionic/Angular that the function of that button is to be the "Hamburguer Button" so, Angular understand and hide it when the "Back Arrow Button" is shown.
<button menuToggle ion-button icon-only (click)="btnHamburger()">
<ion-icon name="menu"></ion-icon>
</button>
How to use the Kendo UI Autocomplete textbox inside the Listview Edit Template??While trying to apply the autocomplete option the text box not taking it.The requirement also includes a server side filtering option.This needs to be implemented in an ASP.NET MVC5 Web Application.
I am working on Kendo UI for Jquery and I have implemented something similar. Idea behind the implementation is that you have to add the autocomplete when you are editing the ListView.
I am sharing the "Edit Template" and "ListView JS" below.
I found the idea here http://jsfiddle.net/F4NvL/
<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view k-widget">
<dl>
<dt>Product Name</dt>
<dd>
<label for="PAPC">Project Code<span class="k-icon k-i-star requiredstar" data-toggle="tooltip" title="Required"></span></label>
<input type="text" required name="PAPC" validationMessage="Hotel is required" data-bind="value: ProjectCode" />
<span class="k-invalid-msg" data-for="PAPC"></span>
</dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
var listView = $("#lvPA").kendoListView({
dataSource: datasrc,
template: kendo.template($("#template").html()),
editTemplate: kendo.template($("#editTemplate").html()),
edit: function (e) {
var model = e.model;
var item = $(e.item[0]);
var projectcode = item.find('[name="PAPC"]'); //Get your element
//Add a autocomplete here
projectcode.kendoAutoComplete({
valueTemplate: '<span>#:data.ProjectCode#</span>',
template: projectTemplate,
minLength: 3,
autoWidth: true,
dataTextField: "ProjectCode",
dataSource: new kendo.data.DataSource({
type: "GET",
serverFiltering: true,
transport: {
read: ProjectAPI,
parameterMap: function (data, type) {
return { filter: $('[name="PAPC"]').val() };
}
},
}),
height: 200
});
}
}).data("kendoListView");