Wants to open a mat-dialog on click of Detail Icon. But the issue is this is not referring to class. Its referring to the current grid.
constructor(private dialog: MatDialog) {}
ngOnInit() {
this.gridOptions = <GridOptions>{
rowSelection: 'multiple',
floatingFilter: true
};
this.gridOptions.columnDefs = [
{
headerName: 'Detail', field: '', filter: false, width: 80,
sortable: false,
onCellClicked: this.openModal,
cellRenderer: (data) => {
return `<mat-icon class="mat-icon material-icons" style="cursor:pointer;" aria-hidden="true">
keyboard_capslock</mat-icon>`;
}
},
{ headerName: 'Field Name', field: 'fieldName'}
];
openModal(row): void {
const detailRef = this.dialog.open(DetailComponent, {
height: '100vw',
width: '80vh',
direction: 'ltr',
data: {
record: row.data
}
});
Error: Unable to get property 'open' of undefined or null reference
Here this is referring to Grid and not to the class.
How can I refer to the class method to open the dialog?
Inline cellRenderer could be used only for simple cases.
If it's required to use functions inside or connect to third-party libraries, it has to be written as a custom cell renderer component.
Related
I am building an app in Ag-grid React
I would like the grid to highlight a row if the user has tagged it by clicking on a checkbox. I am using rowClassRules, and it works fine: if the user edits the value of the tag field for a row from false to true, the row becomes highlighted
When I add in a cell renderer to make the tag field a checkbox it stops working, see code below
Any advice on what I am doing wrong would be appreciated
index.js
import React, { useState } from "react";
import { render } from "react-dom";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import "./index.css"
const App = () => {
const AgGridCheckbox = (props) => {
const boolValue = props.value && props.value.toString() === "true";
const [isChecked, setIsChecked] = useState(boolValue);
const onChanged = () => {
props.setValue(!isChecked);
setIsChecked(!isChecked);
};
return (
<div>
<input
type="checkbox"
checked={isChecked}
onChange={onChanged}
/>
</div>
);
};
const [rowData] = useState([
{ tag: true, make: "Toyota", model: "Celica", price: 35000 },
{ tag: false, make: "Ford", model: "Mondeo", price: 32000 },
{ tag: false, make: "Porsche", model: "Boxter", price: 72000 },
]);
const [columnDefs] = useState([
{ field: "tag", cellRenderer: AgGridCheckbox },
// { field: "tag", editable: true },
{ field: "make" },
{ field: "model" },
{ field: "price" },
]);
const gridOptions = {
rowClassRules: {
"row-tagged": (params) => params.api.getValue("tag", params.node),
},
};
return (
<div className="ag-theme-alpine" style={{ height: 400, width: 800 }}>
<AgGridReact
gridOptions={gridOptions}
rowData={rowData}
columnDefs={columnDefs}
></AgGridReact>
</div>
);
};
render(<App />, document.getElementById("root"));
index.css
.row-tagged {
background-color: #91bd80 !important;
}
I've done some more research and if I add redrawRows() to the onChanged() handler in the cell renderer thus:
const onChanged = () => {
props.setValue(!isChecked);
setIsChecked(!isChecked);
setRowData(rowData);
console.log(props);
props.api.redrawRows({ rowNodes: [props.node] });
};
It now works. Note that passing { rowNodes: [props.node] } means (I assume) that it only redraws a single row.
Supplementary Question: Is this the right way to go? Is there a more efficient way?
I created a Kendo UI Grid view and it displays data correctly , now what I am trying to achieve is that ; When i Click on a row I want to get the primary key of that row and use it elsewhere I tried many solution in net but I did not work. does anyone knows how to achieve this.
here is my code :
function FondsGrid() {
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url:
"http://localhost:...........",
dataType: "json"
}
},
pageSize: 20
});
var accountGrid = $("#grid-fonds").kendoGrid({
dataSource: sharedDataSource,
sortable: true,
pageable: false,
columns: [
{
field: "CodIsin",
title: " ",
template: '<span class="categ #= CodIsin #"></span>',
attributes: {
class: "text-center"
},
headerattributes: {
style: "text-align:center"
},
width: 35
},
{
field: "LIBELLEPDT",
title: "Nom du fonds",
template: '<div id="#: IdProduitSP #" class="title-fonds #:
IdProduitSP #" data-toggle="popover" ><span class="desc-
fonds">#: LibClassificationNiv2 #</span>#: LIBELLEPDT #
.
.
.
dataBound: function () {
var widthGrid = $('.k-grid-content').width();
$(".k-grid-header").width(widthGrid);
$(".title-fonds").popover({
trigger: 'hover',
html: true,
template: '<div class="popover HalfBaked" role="tooltip">
<div class="arrow"></div><h3 class="popover-header"></h3><div
class="popover-body"></div></div>',
content: function () {
return $('#popover-content').html();
}
});
}
}).getKendoGrid();
/* Initialisation */
$(document).ready(function ($) {
FondsGrid();
});
Your own answer is perfectly valid and is a good example of how you can use jquery to directly target the dom elements that kendo generates. This approach is always valuable when kendo does not offer the functionality you need.
However in this case, the grid widget offers the change event. You can set the grid to be 'selectable' and subscribe to the 'change' event which fires when one or more rows are selected:
selectable: "multiple, row",
change: function(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
}
// selectedDataItems contains all selected data items
}
Within the handler function, 'this' refers to the grid widget instance and calling the select() function on it returns the selected rows. From those rows, you can then retrieve the datasource items that are bound to them giving you access to the id and any other properties.
See here for more details: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change
This how I fixed It.
$("#grid-fonds").on("click", "td", function (e) {
var row = $(this).closest("tr");
var value = row.find("td:first").text();
console.log(value);
});
I have button in a view as below:
initComponent: function() {
this.layout = {
type: 'vbox',
align: 'center',
pack: 'center'
};
this.items = [
Ext.create('Ext.Button', {
name:'loginButton',
action:'login',
text: 'Login',
scale : 'medium',
width: 100,
itemId:'loginButton',
handler: function() {
//any default action here
}
})
];
now in a controller I want to hide that button, I wrote
Ext.ComponentQuery.query('button[text=Login]').setVisible(false);
But it getting an error.
TypeError: Ext.ComponentQuery.query(...).setVisible is not a function
Please help me...
query returns an array, so you need to access the first index.
When I began using jQuery a little over a year ago, I needed to load remote content into a pop-up dialog box. After scouring the internet and trying out several suggested methods for doing this, I came upon a function that worked exactly as I needed it to. However, one problem I've never solved is how to reference the dynamic dialog box so it can be closed from an outside function.
Here's the function that creates the dialog box, appends it to the body, and then loads a page into it:
function openDynamicDialog() {
var url = 'mypage.cfm';
var dialog = $('`<div style="display:hidden"></div>`').appendTo('body');
$(dialog).dialog({
autoOpen: true,
title: 'My Title',
resizable: true,
modal: true,
width: 250,
height: 100,
close: function(ev, ui) {
$(this).remove(); // ensures any form variables are reset.
},
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
});
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser from following the link
return false; };
I've considered giving that hidden div a hard-coded id value, but I'm not sure if there are drawbacks to that approach.
Any suggestions would be most appreciated.
I would use a hard-coded id value for the <div> element.
No there shouldn't be any drawback giving it an ID. If you fear of some kind of conflicts then you can give it a class instead, or save a reference to the div object in a global variable.
Well im not sure what the return false is at the end. so if you don't need that, do this:
function openDynamicDialog() {
var url = 'mypage.cfm';
var dialog = $('<div>').css('display','none').appendTo('body');
$(dialog).dialog({
autoOpen: true,
title: 'My Title',
resizable: true,
modal: true,
width: 250,
height: 100,
close: function(ev, ui) {
$(this).remove(); // ensures any form variables are reset.
},
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
// load remote content
dialog.load(
url, {}, function(responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
});
return dialog;
}
//call it like this:
var dialog = openDynamicDialog();
//..code
//close it:
dialog.dialog('close');
OR
if you still need that return false, you can do this on the var dialog line of the function:
var dialog = $('<div>', {id: 'dialog_id'}).css('display','none').appendTo('body');
and then reference it from the outside:
var dialog = $('#dialog_id');
I am trying to add an option to a profile page for twitter widget and I have a field where users can add their twitter accounts and below it shows a preview of the widget. It works fine if I enter an account and click save and come back. But what I am trying to do is make it dynamic, to refresh the widget with corresponding account when blur event occurs on the text-field.
I have the following code:
var twitterWidget = new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#cccccc',
color: '#333333'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#0099cc'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
});
twitterWidget.setUser(twitterUser).render().start();
$('#twitter_widget_id').change(function(){
twitterWidget.setUser($(this).val()).render().start();
});
In this case it works wrong: it shows only the newest tweets from all the accounts that I entered and in general I'm getting an empty widget.
If I delete the object and create a new one it makes the page blank and then adds the widget.
Does anyone know some public methods for the TWTR.Widget() like re-render() or something like that?
Thanks.
The documented Twitter widget source code is available at http://twitter.com/javascripts/widgets/widget.js and reading through it will tell you everything you need to know about how to manipulate its behavior. Briefly, the widget works like this:
When the widget is first created with new TWTR.Widget it calls .init() and takes note of where it's embedded in the page, inserting the widget HTML code into the DOM at that position. (It always assumes you're embedding, which is why if you create a new widget in a head script or in the context of the window it will end up embedding itself in the root of the window.)
But, you can still create the widget using a function (as long as it's called from the embedded script) and then hold onto a reference to the widget for later. When you call .render() later the widget just re-renders itself wherever it happens to be.
There are some pseudo-private methods on the TWTR object that you might try for fun, such as _getWidgetHtml() - which is called by .render() but you shouldn't need to use those.
I just wrote the following code, and it works well for me. Call this function from your embedded script (as shown), then call it again later with a new search parameter to re-render it.
<div id="my_widget_region">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>do_twitter_widget('"#winning" or "justin bieber"');</script>
</div>
function do_twitter_widget(search_query, title, subtitle) {
if (!window.widgetRef) {
window.widgetRef = new TWTR.Widget({
version: 2,
type: 'search',
search: search_query,
interval: 6000,
title: title || 'Tweets related to',
subject: subtitle || search_query,
width: 'auto',
height: 500,
theme: {
shell: {
background: '#8EC1DA',
color: '#FFFFFF'
},
tweets: {
background: '#FFFFFF',
color: '#444444',
links: '#1985B5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
},
ready: function() {
// when done rendering...
}
});
window.widgetRef
.render()
.start();
}
else {
if (search_query != window.old_twitter_search) {
window.widgetRef
.stop()
.setSearch(search_query)
.setTitle(title || 'Tweets related to')
.setCaption(subtitle || search_query)
.render()
.start();
}
}
window.old_twitter_search = search_query;
return window.widgetRef;
}
You can just reload the widget by create a new instance using "id" params as html id of the the widget element.
Exemple below. (Works fine for me)
window.twitterCreateOrUpdateProfile = function (username) {
var opts = {
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 298,
height: 320,
theme: {
shell: {
background: '#86b9d1',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#0b0d0d'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
};
if (window.twitterCreateOrUpdateProfile.instance) {
opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id;
}
window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts);
window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start();
}
window.twitterCreateOrUpdateProfile('evaisse');