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
I have a webgrid with a hyperlink column and upon clicking that link it should open a modal popup I have a modal named #examplemodal in a partial view named"GetDetails". Below I try to open the modal from a controller action method that returns partial view.
#Html.ActionLink("OrderNumber","GetDetails","Home",
new{id = item.ID}, new{data_target="#exampleModal", data_toggle="modal", #class="modal-backdrop"});
When I click on the link with Ordernumber screen blacks out and I dont see the grid at all. Any pointers on where I am doing a mistake. I am using asp.Net mvc5 and bootstrap v4.3.1
I think your concept is totally wrong. I assume you want to display the order details in a modal? And since you have a method to return a partial view for that already, you want to load that order details content into modal whenever the user clicks the hyperlink column?
If that's the case, bootstrap modal is not the right tool for you. It's designed to load static content. If you want to load dynamic content, i.e., order details for different order numbers, you should look into a concept called iframe, and libraries like Fancybox, etc.
Here's what I would do:
1.Define a modal layout
Because you want to display the partial view on a modal, you generally don't want to have things like sidebar, top navigation, etc, from your site layout. Hence I will define a layout for modals.
<!-- _PopupLayout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- All your necessary styles, meta data, etc -->
<title>...</title>
#RenderSection("css", required: false)
</head>
<body>
<main class="container-fluid">
#RenderBody()
</main>
<!-- All your necessary javascripts -->
#RenderSection("scripts", required: false)
</body>
</html>
2.Return views that use _PopupLayout
I know you've created partial views. But regular view is fine. In fact, it's better because you can setup the layout the regular view uses, as well as the view models for that.
Because you want this view to look like a bootstrap modal, you should construct your view using bootstrap modal structure.
#model ...
#{
ViewData["Title"] = "Order Details";
Layout = "~/Views/Shared/_PopupLayout.cshtml";
}
<div class="modal-header">
<h5 class="modal-title">Order Details</h5>
</div>
<div class="modal-body">
...
</div>
3.Write JavaScript to trigger FancyBox on link clicking
You can use a custom css class for the selector for all links you want to load the iframe from. In my case I call it .popup-fancy. You can also define multiple classes for popping up different sizes of modals/fancybox modals.
$(function() {
$().fancybox({
selector: 'a.popup-fancy',
defaultType: 'iframe',
baseClass: 'fancybox-md',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-lg',
defaultType: 'iframe',
baseClass: 'fancybox-lg',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-xl',
defaultType: 'iframe',
baseClass: 'fancybox-xl',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
});
See how it sets the default type to iframe? You can find those configuration options from Fancybox documentation. Not to forgot those 3 base classes styles (I'm using Sass):
.fancybox-md {
.fancybox-content {
max-width: 36.75rem;
}
}
.fancybox-lg {
.fancybox-content {
max-width: 65.625rem;
}
}
.fancybox-xl {
.fancybox-content {
max-width: 78.75rem;
}
}
4.Create links to open modal
Now you can create links with any of those fancybox trigger classes:
<a href="#Url.Action("details", "order", new { area = "", id = item.Id })"
class="popup-fancy">
See Order Details
</a>
I assume you have the order controller and details action method all setup to return a view that uses the _PopupLayout, then when the user clicks on the link, instead of the regular redirect to the page using standard layout, the page content should be loaded into the fancybox modal.
For example:
If you can only use bootstrap modal??
In that case, you will have to create a modal template (probably in the layout so that it can be called anywhere) with an iframe inside. And then on link clicked, you use javascript to set the source of the iframe and manually popup the modal.
Sample of modal template
<div id="fancy-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
Then on the page where you generate links, instead to generate actual links, you will have to generate the modal triggers:
<a href="#" class="fancy-modal-trigger"
data-iframe-src="#Url.Action("details", "order", new { area = "", id = item.Id })">
See Order Details
</a>
See here you put the actual link to your view on a data-attribute instead of href, because you don't want the link to actually navigate to the destination.
$(function() {
$('a.fancy-modal-trigger').click(function() {
let iframeSrc = $(this).data('iframe-src'),
$fancyModal = $('#fancy-modal');
$fancyModal.find('iframe').prop('src', iframeSrc);
$fancyModal.modal('show');
return false;
});
});
DISCLAIM: this is not yet tested.
I'm trying to create a Formly template using md-datepicker. Unfortunately, when I click on the md-datepicker control within my form the calendar panel does not open.
controller code:
{
className: 'col-xs-6',
key: 'dateCreated',
type: 'materialdatepicker',
templateOptions: {
label: 'Created'
},
expressionProperties: {
'templateOptions.disabled': function () {
return !vm.options.editMode;
},
'templateOptions.required': function () {
return vm.options.editMode;
}
}
}
template:
<script type="text/ng-template" id="materialdatepicker.html">
<div layout="column">
<div flex="100">
<p class="input-group" style="display: block; margin: 0px;">
<md-datepicker id="{{::id}}" name="{{::id}}" ng-model="model[options.key]"></md-datepicker>
</p>
<div class="formlyMessages" ng-messages="fc.$error" ng-if="fc.$touched">
<div class="formlyMessage" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">
{{message(fc.$viewValue, fc.$modelValue, this)}}
</div>
</div>
</div>
</div>
</script>
formly config:
formlyConfigProvider.setType({
name: 'materialdatepicker',
templateUrl: 'materialdatepicker.html',
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
defaultOptions: {
ngModelAttrs: ngModelAttrs
},
controller: ['$scope', function ($scope) {
$scope.materialdatepicker = {};
}]
});
I can't seem to figure out how to get the calendar panel to open. I'm not getting any errors in the console and the control does get populated with my initial value.
Any ideas?
What I forgot to mention in my original post was that this form is contained within a modal window ($uibModal). As such, the calendar pane was popping up behind my modal window.
The solution found here worked for me: Angular Material DatePicker Calendar Shows Behind Angular Modal
You need to tell your calendar pane to open with a high z-index so it renders above the modal. Place this style sheet code into your modal html:
<style>
.md-datepicker-calendar-pane {
z-index: 1200;
}
</style>
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’m currently developing my first Angular 2 site. The site contains a Bootstrap NavBar on the left hand side so the user can navigate to different pages on the site. Each user can see different navigation buttons in the NavBar depending on their security permissions.
At the moment I’ve just mocked it to act as if the buttons have been retrieved from the DB into an array. Then each button is displayed in the NavBar by looping round the array. Please see the code below.
Questions
It works, but is this the best way to do it?
Is there a better best practice way to retrieve settings from a DB based on a users security permissions and display those settings?
And is there anything else I need to consider to make it more
security?
navbar.component.heml
<div class="nav-side-menu">
<div class="brand">NavBar</div>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li *ngFor="let appButton of appButtons">
<a href="#">
<i class="{{appButton.buttonClass}}"></i> {{appButton.displayName}}
</a>
</li>
</ul>
</div>
</div>
navbar.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
// Hard coded in at the moment, but these settings
// will be retrieved from the DB
appButtons = [
{ displayName: "Dashboard", buttonClass: "fa fa-dashboard fa-lg" },
{ displayName: "Gift", buttonClass: "fa fa-gift fa-lg" },
{ displayName: "Globe", buttonClass: "fa fa-globe fa-lg" },
{ displayName: "Search", buttonClass: "fa fa-search fa-lg" }
];
}
Rather than bringing buttons from the database. Categorized your user according to the roles. Add these roles in your DB and show the buttons according to the roles.
You can add other types of security/access level with the help of role.
Which will be much better than fetching the buttons from the database.