I have problem with dojo grid when i use gridx/modules/select/Row module, grid is not displayed. It gives Type Error: node is null.
My layout structure is here:
<script type="text/javascript">
var itemGridStore = new dojox.data.QueryReadStore({url:'invoiceConsignSearchStore'});
console.debug('store ::'+itemGridStore);
var layout=[
{id:"consId", field:"Consignment_Id", name:"Consignment Id", width:"23%"},
{id:"poDate", field:"Date", name:"Date", width:"30%"},
{id:"poNo", field:"PoSo_No", name:"Purchase Order No", width:"25%"},
{id:"refId", field:"Reference_Id", name:"Reference Id", width:"25%"},
{id:"customerName", field:"customerName", name:"Name/Company", width:"25%"},
{id:"location", field:"location", name:"Location", width:"25%"},
{id:"dealId", field:"Deal_Id", name:"Deal Id", width:"25%"}
];
var itemListgrid = new gridx.Grid({
cacheClass: gridx.core.model.cache.Async,
store: itemGridStore,
structure: layout,
modules: [
"gridx/modules/VirtualVScroller", "gridx/modules/SingleSort", "gridx/modules/CellWidget", "gridx/modules/Edit",
"gridx/modules/Filter", "gridx/modules/filter/FilterBar","gridx/modules/RowHeader","gridx/modules/select/Row", "gridx/modules/select/Cell"
],
vScrollerBuffSize: 30 ,
selectRowTriggerOnCell: true,
editLazySave: true
}, 'gridNode'); //Assume we have a node with id 'gridNode'
itemListgrid.startup();
itemListgrid.connect(itemListgrid,"onRowClick",function(evt){
var rowsSel=itemListgrid.select.row.getSelected();
console.debug('rowsSel ::'+rowsSel);
doImportSelectedItem(rowsSel);
});
</script>
<body class="tundra">
<!-- We'd like to show a grid here -->
<div align="center" id="gridNode"></div>
</body>
</html>
But without gridx/modules/select/Row this module it works fine. Can any one suggest the answer.
The select module requires Mark model extension, so your grid should look like:
var itemListgrid = new gridx.Grid({
cacheClass: gridx.core.model.cache.Async,
store: itemGridStore,
structure: layout,
modelExtensions: [
"gridx/core/model/extensions/Mark"
],
modules: [
"gridx/modules/VirtualVScroller",
"gridx/modules/SingleSort",
"gridx/modules/CellWidget",
"gridx/modules/Edit",
"gridx/modules/Filter",
"gridx/modules/filter/FilterBar",
"gridx/modules/RowHeader",
"gridx/modules/select/Row",
"gridx/modules/select/Cell"
],
vScrollerBuffSize: 30,
selectRowTriggerOnCell: true,
editLazySave: true
}, 'gridNode');
For modules compatibility take a look at this link: http://oria.github.io/gridx/moduleCompatibility.html
Related
I am trying to setup msw with #web/test-runner (and playwright). The problem is that I don't know how the mockServiceWorker.js can be picked up by the test runner (which uses browser, not nodejs like jest). There is an example with karma:
https://github.com/mswjs/examples/tree/master/examples/with-karma, probably I have to do something similar but I have no idea where to start. Any hints are welcome.
I am not sure if it is important, but let me share my web.test-runner.config.js
import vite from 'vite-web-test-runner-plugin'
import { playwrightLauncher } from '#web/test-runner-playwright';
export default {
plugins: [ vite() ],
coverageConfig: {
include: [ 'src/**/*.{svelte,js,jsx,ts,tsx}' ]
},
browsers: [
playwrightLauncher({ product: 'chromium' })
],
testRunnerHtml: testFramework => `
<!DOCTYPE html>
<html>
<head>
<script type="module">
window.global = window;
window.process = { env: {} };
</script>
<script type="module" src="${testFramework}"></script>
</head>
</html>
};
and my test command
"test": "web-test-runner \"test/**/*.test.ts\"",
Excuse me, please, I am just learning. In some gatsby templates I can insert as Image - an image from a URL and in some templates Image don't want to display it.
What does it depend on and how to edit the code to make the url work? (My knowledge about graphql is rather basic)
this is the code for the blog template:
/** #jsx jsx */
import { jsx } from 'theme-ui'
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
import { RiArrowRightLine, RiArrowLeftLine } from "react-icons/ri"
import Layout from "../components/layout"
import SEO from '../components/seo';
const styles = {
'article blockquote': {
'background-color': 'cardBg'
},
pagination: {
'a': {
color: 'muted',
'&.is-active': {
color: 'text'
},
'&:hover': {
color: 'text'
}
}
}
}
const Pagination = (props) => (
<div
className="pagination -post"
sx={styles.pagination}
>
<ul>
{(props.previous && props.previous.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.previous.frontmatter.slug} rel="prev">
<p
sx={{
color: 'muted'
}}
>
<span className="icon -left"><RiArrowLeftLine/></span> Previous</p>
<span className="page-title">{props.previous.frontmatter.title}</span>
</Link>
</li>
)}
{(props.next && props.next.frontmatter.template === 'blog-post') && (
<li>
<Link to={props.next.frontmatter.slug} rel="next">
<p
sx={{
color: 'muted'
}}
>Next <span className="icon -right"><RiArrowRightLine/></span></p>
<span className="page-title">{props.next.frontmatter.title}</span>
</Link>
</li>
)}
</ul>
</div>
)
const Post = ({ data, pageContext }) => {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html, excerpt } = markdownRemark
const Image = frontmatter.featuredImage ? frontmatter.featuredImage.childImageSharp.fluid : ""
const { previous, next } = pageContext
let props = {
previous,
next
}
return (
<Layout className="page">
<SEO
title={frontmatter.title}
description={frontmatter.description ? frontmatter.description : excerpt}
image={Image}
article={true}
/>
<article className="blog-post">
<header className="featured-banner">
<section className="article-header">
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
</section>
{Image ? (
<Img
fluid={Image}
objectFit="cover"
objectPosition="50% 50%"
alt={frontmatter.title + ' - Featured image'}
className="featured-image"
/>
) : ""}
</header>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</article>
{(previous || next) && (
<Pagination {...props} />
)}
</Layout>
)
}
export default Post
export const pageQuery = graphql`
query BlogPostQuery($id: String!) {
markdownRemark(
id: { eq: $id }
) {
id
html
excerpt(pruneLength: 148)
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
description
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
}
}
}
`
typical post:
---
template: blog-post
title: my title
slug: /plant/bud
date: 2020-05-13 12:37
description: abc
featuredImage: /assets/screen-post-hixmjdah9xhoo-unsplash.jpg (but online image from imgurl png doesnt work)
---
post nr 1
edited ///
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets/`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/content/`,
name: `content`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
gfm: true,
plugins: [
netlifyCmsPaths,
`gatsby-remark-reading-time`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
showCaptions: true,
linkImagesToOriginal: false,
tracedSVG: true,
loading: "lazy",
},
},
`gatsby-remark-responsive-iframe`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
In Gatsby, you can insert images from external sources using the standard HTML <img> tag with the src property:
<img src="https://via.placeholder.com/150" alt="Alt text" width="500" height="600">
If you want to keep the benefits of gatsby-image across the external (or online) images, you should need to use some dependencies to achieve lazy loading and other features.
However, to use gatsby-image you need to allow Gatsby and the inferred GraphQL schema to use their transformers (gatsby-transformer-sharp and sharps (gatsby-plugin-sharp) across with the filesystem (gatsby-source-filesystem) or in other words, Gatsby needs to have access to the images that needs to parse to create a valid queryable GraphQL schema, that will be consumed with the gatsby-image.
In addition, you need to specify the folder of your project where those images belong (setting the filesystem):
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
Once the filesystem is set and the images are processed, a GraphQL node is created, and you are allowed to use the fragments like the one you've provided:
featuredImage {
childImageSharp {
fluid(maxWidth: 1980, maxHeight: 768, quality: 80, srcSetBreakpoints: [350, 700, 1050, 1400]) {
...GatsbyImageSharpFluid
...GatsbyImageSharpFluidLimitPresentationSize
}
sizes {
src
}
}
}
Since the external images can't be directly processed by Gatsby, they can't be used with gatsby-image. Depending on the source of those images, some plugins allow you to keep using gatsby-image from external sources (usually from CMSs like Contentful and others).
You can check for further documentation in Working with images docs.
Update (01/06/2021)
In the last Gatsby version (v2.30) they've added a new experimental feature, still in beta to support external images in a <StaticImage> component. To enable it, just upgrade to the latest Gatsby version (via npm or yarn) and add the following flags in your running scripts:
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby develop
GATSBY_EXPERIMENTAL_REMOTE_IMAGES=1 gatsby build
You can then pass absolute URLs to StaticImage:
<StaticImage src="https://placekitten.com/400/400" alt="Kittin" />
I want to type this .
I have tried like this
$$\lambda=\frac{0.693}{t_\frac{1}{2}}$$
Also,
$$\lambda=\frac{0.693}{{t}_\frac{1}{2}}$$
Also,
$$\lambda=\frac{0.693}{t_{\frac{1}{2}}}$$
But it don't work it display something like this
This code
also gives something that we don't want
Mathjax Configuration
<div class="layout"><script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {extensions: ["AMSmath.js","AMSsymbols.js","mhchem.js","noErrors.js","noUndefined.js"]},
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
Browser= Google Chrome
OS= Windows 8.1
Use _{}
_{YOUR EXPRESSION}
Example:
$$Y_n = Y_{n-1}+{{(d/n)}sin(θ\pm n*Δ)}.$$
Result:
$$\frac{1}{\lambda}=\frac{0.693}{t_\frac{1}{2}}$$
renders exactly what you are asking for and I tested it already.
Note the difference:
I just copied your first mathjax code:
$$\lambda=\frac{0.693}{t_\frac{1}{2}}$$
Note that before the '=' on the left side of the equation you just and simply wrote \lambda and that was your only mistake, so I simply replaced \lambda with \frac{1}{\lambda} and that's all.
You already showed us in your question that you already know that underscore _ renders subscript text and symbols in mathjax by the way.
See the live example below:
window.MathJax = {
config: ["MMLorHTML.js"],
jax: ["input/TeX", "input/MathML", "input/AsciiMath", "output/HTML-CSS", "output/NativeMML"],
extensions: ["tex2jax.js", "mml2jax.js", "asciimath2jax.js", "MathMenu.js", "MathZoom.js"],
asciimath2jax: {
delimiters: [
['`', '`'],
['$', '$']
]
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"]
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
}
};
.MathJax_CHTML {
font-size: 30px !important;
}
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<p> $$\frac{1}{\lambda}=\frac{0.693}{t_\frac{1}{2}}$$</p>
<p> $$\frac{1}{\lambda}=\frac{0.693}{{t}_\frac{1}{2}}$$</p>
<p> $$\frac{1}{\lambda}=\frac{0.693}{t_{\frac{1}{2}}}$$</p>
I created a project using Kraken 1.0.1 with yo kraken, with template engine dustjs, but I can not use functions dustjs-helpers.
My config.json:
"express": {
"view cache": false,
"view engine": "dust",
"views": "path:./public/templates"
},
"view engines": {
"dust": {
"module": "engine-munger",
"renderer": {
"method": "dust",
"arguments": [
{ "cache": false},
{
"views": "config:express.views",
"view engine": "config:express.view engine",
"specialization": "config:specialization",
"i18n": "config:i18n"
}
]
}
}
}
template.dust (not working helpers)
{#if cond="1<2"}
<div> x is less than y and b == c and either e or f exists in the output </div>
{:else}
<div> x is >= y </div>
{/if}
template2.dust (working)
{?messages}
{#messages}
<div data-alert class="alert-box info radius">
{.}
×
</div>
{/messages}
{/messages}
Only dusts core working, I add dustjs-helpers with npm. How add dustjs-helpers in my kraken project?
Having just fought things like this for the last two days. The problem is that dust helpers clobbers any earlier defined helpers when setting up it's own. See issue: https://github.com/linkedin/dustjs-helpers/issues/72
You can try using this repo version that derives from PR mentioned in the issue 72 thread to get around it for now.
https://github.com/patrick-steele-idem/dustjs-helpers
Or just be very sure your helpers are defined after dustjs load and dustjs-helpers is loaded.
On Kraken.js 1.0.3+ to add dust helpers in a krakenJS project you you need to decleare them in your config.json. By default KrakenJS does not include Dust.js helpers.
Find the section dedicated to dust in your config/confing.json and add "dustjs-helpers" entry to the "helpers" array. It should look like this if you have also dust-makara enabled:
"dust": {
"helpers": [
"dust-makara-helpers",
"dustjs-helpers"
]
},
I want to implement a kind of file-browser, where the user can navigate using the folder-tree, and see the folder-content in a grid.
I want to use the same data-store for both widgets, but can't see how to achive this - the tree needs items with e.g. a children-attribute, the grid only needs those children.
because ther may be a huge dataset, I'm planning to use the jsonreststore.
i was trying with this, and got one solution like this, Please note that the grid and tree are using the same store.. Here the catch is if folder has id of fld1 then all the files under that folder should have id pattern like "fld1f1","fld1f2".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="djlib/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/Grid.css"/>
<link rel="stylesheet" type="text/css" href="djlib/dojox/grid/resources/claroGrid.css"/>
</head>
<body class=" claro ">
<div id="treeOne"></div>
<div id="gridHolder" style="height:500px"></div>
</body>
<script type="text/javascript">
s =[];
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojox.grid.DataGrid");
dojo.addOnLoad(function(){
baseStore = new dojo.data.ItemFileReadStore({
data:{
identifier: 'id',
label: 'name',
items: [
{id:'fld1',name:'folder 1', type:"folder", files:[{_reference:'fld1f1'},{_reference:'fld1f2'}]},
{id:'fld1f1',name:'file 1 of folder 1', type:"file", size:'1KB', dateLstMod:'15/15/2001'},
{id:'fld1f2',name:'file 2 of folder 1', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2',name:'folder 2', type:"folder", files:[{_reference:'fld2f1'},{_reference:'fld2f2'}]},
{id:'fld2f1',name:'file 1 of folder 2', size:'1KB', type:"file", dateLstMod:'15/15/2001'},
{id:'fld2f2',name:'file 2 of folder 2', size:'1KB', type:"file",dateLstMod:'15/15/2001'},
{id:'fld3',name:'folder 3', type:"folder"}
]
}
});
treeModel = new dijit.tree.ForestStoreModel({
store: baseStore,
query:{
type:'folder'
},
rootId: "root",
rootLabel: "List of folders on this drive",
childrenAttrs:['files']
})
t = new dijit.Tree({
model: treeModel
},"treeOne")
dojo.connect(t,'onClick', function(item, node, evt){
if(node.isExpandable){
updateGrid(baseStore.getValues(item,"id"));
}
})
function updateGrid(folderId){
grid.filter({
type:'file' , id:folderId+'*'
},true);
}
var gridStr = [{
cells:[
[
{ field: "name", name: "File Name", width: 'auto' },
{ field: "size", name: "Size", width: 'auto'},
{ field: "dateLstMod", name: "Date Last Modified", width: 'auto'}
]
]
}]
grid = new dojox.grid.DataGrid({
store:baseStore,
structure: gridStr,
noDataMessage:"NO DATA"
}, 'gridHolder');
grid.startup();
grid.filter({
type:'filee'
},true);
})
I think this link has the answer, you don't point the grid at the store, you create the grid and add items by iterating across the relevant children in the store
http://groups.google.com/group/dojo-interest/browse_thread/thread/af7265b19edeeb0/9fee8b5498746dd8