Skip to content

Getting Started Article Revamp #561

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

yordan-mitev
Copy link
Contributor

@yordan-mitev yordan-mitev commented Apr 15, 2024

This PR updates the main Getting Started article (Composition API + JS). The main changes are:

  1. Significantly reduce the length and complexity of the article by removing the Window and DropDownList.
    • Shorter and easier-to-follow Getting Started articles reduce evaluation time and the bounce rate.
    • Less complex tutorials reduce the dropout caused by minor user errors.
    • Users are more likely to complete a shorter tutorial than a long and complex one.
  2. Remove sections that promote related Kendo/Telerik products but according to Google Analytics aren't popular among page visitors (ThemeBuilder, UI Kits, etc.) and add unnecessary length.
  3. Convert the Licensing section to a note and an additional link in the Next Steps section. This way we reduce the length of the article by removing a section that doesn't provide detailed step-by-step instructions and hence doesn't fit into the tutorial.
  4. Comment out the yarn code snippets. These snippets must be enabled once the new docs/demos platform is available as it will support tabbed code snippets. Currently, they add unnecessary length to the article.

Outstanding tasks:

  • Update the code snippets in the following sections:
    • Add a Vue Data Grid Component
    • Configure the Vue Data Grid
  • Add a new Stackblitz example that reflects the updated content of the tutorial.
  • Add the updated code to the github repo (if required).

></grid>
</template>
```
1. Implement the paging and sorting functionality in the `data` option:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The composition API doesn't have a 'data' option. Probably this is taken from the Options API article or is here because of the copy-paste process when creating the currently available getting started articles.

Copy link
Contributor Author

@yordan-mitev yordan-mitev Apr 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reused the content of the current article on line 281 but I may have misinterpreted it. What wording and terms should I use instead?

filter: filter.value
```

1. Define the Grid in the `<script>` block. Add user-friendly [column titles](slug:api_grid_gridcolumnprops#toc-title) by using the `title` property:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The latest version of the Composition API uses the <script setup> configuration as in the following code:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Let's make the composition API examples using the <script setup>

* Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.

```js
<script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same as above. Let's use the <script setup> configuration of the Composition API

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added placeholder code snippets, could you provide the actual code?

@filipKovachev filipKovachev self-requested a review June 24, 2024 08:19
filipKovachev
filipKovachev previously approved these changes Jun 24, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants