documentation should be more detailed

[Joko Pitoyo]

for combobox please add inline dataSource access to ajax directly :

<smart-combo-box dataSource=”url:some_file.php,valueMember:’id’,displayMember:’nama'”></smart-combo-box>

[admin]

Hi Joko,

What do you mean by default style compact? If you mean individual stylesheets for these components then they are already available in source\styles\components. In that folder you will find the individual stylesheets for each UI component.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[JoeLaRue]

One thing i’m finding difficult with the documentation is that there are 3 places to look for information. The ‘docs’ page, the ‘demos’ page, and the ‘api’ page. An example of how this caused an issue for me is that if im just looking at the API, i would have never known there was a ‘filter panel’ feature for Grid – that is found in the ‘docs’ page. Im finding myself navigating between all 3 of these pages as well as the forums for information.

Another issue i feel like is causing me problems is that in the ‘api’ page, at the top it lists properties. When you click on those, you find that those are actually objects containing more properties, so you sort of need to guess what the top level property is that contains the thing you are looking for. As an example, im trying to figure out how to set the width of the grid to be the full width of the page, and i can’t find it. I would guess it would be in ‘layout’ property, but no luck. (i still can’t seem to find it)

I think utilizing some of the horizontal space in the API page might help with readability. A table format would probably work well. The masonary-style property links are kind of a big wall and its daunting to read through.

Also on the API page, putting the ‘how to get and set this property’ after every property takes up a ton of space and is really redundant, making it hard to find useful information. if you just show the path to the property in the header, like ‘layout.allowCellsWrap’, and describe once somewhere how to get and set properties, that might make more sense.

sometimes the property descriptions arent helpful. example: the for the mapChar property, the description is ‘Sets the ‘mapChar’ data field of the record’. I think example, it should be a description of what the mapChar actually does.

I apologize for being so critical here. I really wanted to give some examples and reinforce the perception that the documentation is difficult to navigate. While fixing some of these specific examples would be helpful, i think it would be good to take them as symptoms of bigger problems.

I think these components are great, and would love to be able to work with them more easily.

[Giovanni Zomer]

Hi, JoeLaRue,
I’m setting the css to get the whole width

smart-grid
{
width: 100%;
–smart-background: var(–rows-bg-color);
–label-color: var(–rows-fg-color);
}

I understand your problems very well. The components are very well programmed and you can do professional things with them. Unfortunately there is a lack of documentation in each part. You cannot simply find what you’re looking for. The structure of the documentation is unclear. You’ll find some informations here and other ones there. What a programmer really needs is a very short example for each of the property and methods. I know it’s a huge work. But that would make the component very interesting to anyone who gives it a try. If I would not believe this is the right component for my needs, I probably would have left the tests long ago. But the components are really good! It’s just the docs which don’t show the potential of them.

 

[JoeLaRue]

oh, hey thanks for the tip. in the jqwidgets grid, the width was set in the javascript so i was looking for that sort of thing here too!

[Joseph Norris]

The Dropdown list could use updating. The sample code on the website doesn’t work as written.

Using the sample react same code the child element of ListItem with Droplist generates the following errors:

smart.dropdownlist.js:34 Uncaught TypeError: Cannot read properties of null (reading ‘_applyTemplate’)
Uncaught TypeError: Cannot read properties of null (reading ‘_applyTemplate’)
Warning: Can’t perform a React state update on an unmounted component

[admin]

Hi,

The Dropdownlist’s basic sample is like that:

import React from "react";
import ReactDOM from "react-dom";
import { DropDownList, ListItem, ListItemsGroup } from 'smart-webcomponents-react/dropdownlist';

class App extends React.Component {

	componentDidMount() {

	}

	render() {
		return (
			<div>
			    <DropDownList  selectedIndexes={[0]}>
			        <ListItem value="1">Affogato</ListItem>
			        <ListItem value="2">Americano</ListItem>
			        <ListItem value="3">Bicerin</ListItem>
			        <ListItem value="4">Breve</ListItem>
			        <ListItem value="5">Cappuccino</ListItem>
			        <ListItem value="6">Cafe Crema</ListItem>
			        <ListItem value="7">Cafe Corretto</ListItem>
			        <ListItem value="8">Cafe macchiato</ListItem>
			        <ListItem value="9">Cafe mocha</ListItem>
			        <ListItem value="10">Cortado</ListItem>
			        <ListItem value="11">Cuban espresso</ListItem>
			        <ListItem value="12">Espresso</ListItem>
			        <ListItem value="13">Eiskaffee</ListItem>
			        <ListItem value="14">Frappuccino</ListItem>
			        <ListItem value="15">Galao</ListItem>
			        <ListItem value="16">Greek frappe coffee</ListItem>
			        <ListItem value="17">Iced Coffee</ListItem>
			        <ListItem value="18">Instant Coffee</ListItem>
			        <ListItem value="19">Latte</ListItem>
			        <ListItem value="20">Liqueur coffee</ListItem>
			    </DropDownList>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.querySelector("#root"));

export default App;

It does not produce errors. In case you encounter an error, please share details how we can reproduce it.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Joseph Norris]

Here you go. This generates the error.

import {createRef, useEffect} from 'react'
import {DropDownList, ListItem, ListItemsGroup} from 'smart-webcomponents-react/dropdownlist'

const Dropdowns = () => {
  const dropdownlist = createRef<DropDownList>()

  useEffect(() => {}, [dropdownlist])

  return (
    <div>
      <DropDownList ref={dropdownlist} selectedIndexes={[0]}>
        <ListItem value='1'>Affogato</ListItem>
      </DropDownList>
    </div>
  )
}
export default Dropdowns

• This reply was modified 2 years, 6 months ago by Joseph Norris.

[admin]

Hi Joseph,

Online example using the provided code and the current version of Smart UI for React: https://codesandbox.io/s/happy-resonance-tt2vek?file=/src/App.js

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts