I'm using sweetalert2 component and when it shows message my ag-grid not working.
install by this command:
npm install sweetalert2
after that import:
import Swal from 'sweetalert2';
in the my component
and use like this:
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
});
Before Displaying the message, the grid is display correctly, but when he message is Displayed, the header and Grid's Records are hidden, and they are displayed again after closing the message.
Related
I have a long message saved as html format. I want to show this message to the screen without Html element as textarea input.
message = <p>Mobil ä ........ </p>
Before I upgrade React version to V6 it was working fine as the code below.
I could scroll down and adjust the textarea box size to see the message inside the box.
<div
id="textarea"
name="message"
className="form-control"
dangerouslySetInnerHTML={{__html: this.state.message }}
ref="textarea"
/>
after updating to React V6, when I write exactly the same code, it gives me an error saying
"Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here".
My first approach was to just simply delete ref="textarea" but then the message is overflow from the box and cannot read other information below.
And my second approach is to use useRef() but im not really understanding how to incorporate it to my code.
any suggestion here plz.
First option:
import { useEffect, useRef } from 'react';
function Teste() {
const divElement = useRef<HTMLDivElement>(null);
useEffect(() => {
if (divElement.current) {
divElement.current.appendChild(document.createElement('textarea')).value = 'Hello World';
}
});
return <div ref={divElement} />;
}
export default Teste;
Second option:
https://www.radix-ui.com/docs/primitives/utilities/slot
I am using bootbox alert in my angular2 application to display information to the user on the UI. I am displaying href links in the alert message. When the user clicks on any of the href links, the page should be navigated to that link and also the bootbox alert modal should get closed.
In my code, the page is navigated to the href link. However, the modal is not getting closed. How can i achieve this?
Below is my code:
bootbox.alert({
title: "Select option for profile #"+this.profileId,
message:
"View/Update<br>" +
"Deactivate/Reactivate<br>"+
"Ad Hoc Request<br>"+
"Internal Download<br>"+
"Audit Tracking<br>"
});
Any inputs appreciated!
You can capture the modal object that is created (see https://jsfiddle.net/q1Lm385a/1/):
var $mymodal = bootbox.alert({
title: "Select option for profile #"+this.profileId,
message:
"View/Update<br>" +
"Deactivate/Reactivate<br>"+
"Ad Hoc Request<br>"+
"Internal Download<br>"+
"Audit Tracking<br>"
});
That would make it relatively easy to manually dismiss the modal:
$mymodal.on('click', '.bootbox-body a', function(e){
$mymodal.modal('hide');
});
Bootbox also has a global function you can call:
$mymodal.on('click', '.bootbox-body a', function(e){
bootbox.hideAll();
});
Following scenario:
Tabs can come and go. My current idea which I am trying to figure out is to have a <router-view> for each tab. A named <router-view> to be exact. When a tab needs to be added I want to dynamically add a route with the viewPorts property set to the corresponding <router-view> name.
Depending on the currently opened tab I show or hide <router-view>s.
Will this work? Am I missing something?
Do you have other/better approaches to implement this and/or can provide links to examples?
You can do this in a much cleaner way by using a child router. You can configure the child router like this in your parent component's ts/js file:
configureRouter(config: RouterConfiguration, router: Router){
config.map([
{ route: 'tab-1', name: 'tab-1', moduleId: 'tab-1/tab-1', nav: 'true', title: 'Tab 1' },
{ route: 'tab-2', name: 'tab-1', moduleId: 'tab-2/tab-2', nav: 'true', title: 'Tab 2' },
{ route: 'tab-3', name: 'tab-3', moduleId: 'tab-3/tab-3', nav: 'true', title: 'Tab 3' }
)
}
Make every tab a custom element, in the above code I named them 'tab-*'.
You can then go ahead and create a new component for your tabbed navigation (you can always put the navigation logic in the parent component but I find this approach to be cleaner, mode modular and reusable)
tabnav.ts
import {bindable} from 'aurelia-framework';
import {Router} from 'aurelia-router';
export class TabnavCustomElement{
#bindable router: Router;
}
tabnav.html
<template>
<ul>
<li repeat.for="navItm of router.navigation">
<a href.bind="navItm.href" class="nav-link ${navItm.isActive ? 'active' : ''}">${navItm.title}</a>
</li>
</ul>
The you can go to parent.html and include it like this:
<tabnav router.bind="router"></tabnav>
<router-view></router-view>
The <router-view> will then change according to what the tab that you click on. If you want to share state between the tabs you can create a shared service which you can inject on each of the three custom elements.
Also every time you want to add a new tab you simply create a new custom element for that tab and place it in the router. It's the navigation component's responsibility then, to show it on screen
I have written the following piece of code to display some contents in angular material dialog box. it works fine when i add plain text to textContent . when i add HTML its displays HTML as text. how do i bind HTML to textContent
This Works
Sample Link
$scope.Modal = function () {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('body')))
.clickOutsideToClose(true)
.textContent('sample text')
.ok('Ok')
);
}
This Doesn't Works
Sample Link
$scope.Modal = function () {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('body')))
.clickOutsideToClose(true)
.textContent('<div class="test"><p>Sample text</p></div>')
.ok('Ok')
);
}
Thanks in advance
You need to append to the template,
$mdDialog.show({
parent: angular.element(document.body),
clickOutsideToClose: true,
template: '<md-dialog md-theme="mytheme">' +
' <md-dialog-content>' +
'<div class="test"><p>Sample text</p></div>' +
' <md-button ng-click="closeDialog();">Close</md-button>' +
' </md-dialog-content>' +
'</md-dialog>',
locals: {
},
controller: DialogController
});
DEMO
You can add html in template and just add variable in displayOption. This will work.
Template Code
<script type="text/ng-template" id="confirm-dialog-answer.html">
<md-dialog aria-label="confirm-dialog">
<form>
<md-dialog-content>
<div>
<h2 class="md-title">{{displayOption.title}}</h2>
<p>{{displayOption.content}} <img src="{{displayOption.fruitimg}}"/></p>
<p>{{displayOption.comment}}</p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<a class="md-primary-color dialog-action-btn" ng-click="cancel()">
{{displayOption.cancel}}
</a>
<a class="md-primary-color dialog-action-btn" ng-click="ok()">
{{displayOption.ok}}
</a>
</div>
</form>
</md-dialog>
</script>
Controller Code
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'confirm-dialog-answer.html',
locals: {
displayOption: {
title: "OOPS !!",
content: "You have given correct answer. You earned "+$scope.lastattemptEarnCount,
comment : "Note:- "+$scope.comment,
fruitimg : "img/fruit/"+$scope.fruitname+".png",
ok: "Ok"
}
}
}).then(function () {
alert('Ok clicked');
});
Use template instead of textContent, textContent is used for show plan text in a model. It does not render HTML code
$mdDialog.show({
controller: function ($scope) {
$scope.msg = msg ? msg : 'Loading...';
},
template: 'div class="test"><p>{{msg}}</p></div>',
parent: angular.element(document.body),
clickOutsideToClose: false,
fullscreen: false
});
You can use htmlContent instead of textContent to render HTML. Heres an excerpt from the documentation available at https://material.angularjs.org/latest/#mddialog-alert
$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML.
Requires ngSanitize module to be loaded. HTML is not run through
Angular's compiler.
It seems a bit counter intuitive to use a template when you only need to inject one or two things in. To avoid using a template, you need to include 'ngSanitize' for it to work.
angular.module('myApp',['ngMaterial', 'ngSanitize'])
.controller('btnTest',function($mdDialog,$scope){
var someHTML = "<font>This is a test</font>";
$scope.showConfirm = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.confirm()
.title('Please confirm the following')
.htmlContent(someHTML)
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please do it!')
.cancel('Sounds like a scam');
//Switch between .htmlContent and .textContent. You will see htmlContent doesn't display dialogbox, textContent does.
$mdDialog.show(confirm).then(function() {
$scope.status = 'Saving Data';
},
function() {
$scope.status = 'You decided to keep your debt.';
});
};
})
Notice the injected HTML:
var someHTML = "<font>This is a test</font>";
I found this example here.
The latest version of Angular Material Design API has predefined function for add HTML content to the alert dialog:
an $mdDialogPreset with the chainable configuration methods:
$mdDialogPreset#title(string) - Sets the alert title.
$mdDialogPreset#textContent(string) - Sets the alert message.
$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize module to be loaded. HTML is not run through Angular's compiler.
$mdDialogPreset#ok(string) - Sets the alert "Okay" button text.
$mdDialogPreset#theme(string) - Sets the theme of the alert dialog.
$mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option, the location of the click will be used as the starting point for the opening animation of the the dialog.
The link to the documentation: Angular MD API
Hi I've added a button to the toolbar of my KendoUI Grid, but I have a couple of issues, I'm hoping someone can assist with.
I've tried to add one of the kendo web icons next to the button but it doesn't render.
When I click the button in the toolbar I see the following error in the console:
Uncaught ReferenceError: sendEmail is not defined.
I don't understand why it isn't seeing my function. Just for testing purposes I'm displaying an alert until it sees it.
toolbar: [
{ name: "create", text: "Add" },
{ template: "<input type='button' class='k-button' value='Email Users' onclick='sendEmail()' />",
imageclass: "k-icon k-i-pencil" }
]
function sendEmail() {
debugger;
alert('Send Emails');
}
Can someone please help?
You can Use as below:
toolbar: [
{
name: "Add",
text: "Send Email",
click: function(e){alert('Send Emails'); return false;}
}
],
According to the documentation you would need to return the function that you want to occur on click. Like this:
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
The documentation
I hope that helps.
this works for me:
you must define your grid in variable
initializing grid and add your button in toolbar option
toolbar: [{ name: "myButton", text: "this is your button text" }]
after initializing write this code to find button and add function:
grid.find(".k-grid-toolbar").on("click", ".k-grid-myButton", function (e) {
alert("it's work") ;});
Is your function sendEmail() initialized in document.ready or $(()=>{}); if not you will have to initialize it or else you could use this way
add a id for the button and write this in your document.ready (remove the onlcick from the button tag).
$("#examplebuttonid").click(()=>{
//write your code in here
});