Vue V Bind Disabled

Posted on  by admin

New to Kendo UI for Vue? Start a free 30-day trial. In this article you’ll learn how to use Kendo UI for Vue components by building a small app that includes a Grid, a DropDownList, a Window and a design theme.

  • The easiest way to start with Vue is to use its CLI.

To install the Vue CLI use the below commands. Install commands:.

Once the Vue CLI is installed, use the below commands to create a project.

Create a project commands:. The new project can be run with the npm run serve command.

Before you start playing with Kendo UI for Vue, let’s clean up the sample app a bit.

Here is a list of suggested edits:. In the src/components folder, delete the HelloWorld.vue file.

1. Set up the Vue project

In the src/App.vue file:. Remove the import of the HelloWorld component.

2. Add JSON data

Remove the HelloWorld component from the components’ definition.

4. Import the Kendo UI for Vue CSS styles

Remove the following code from the template definition:.

#{ "reportUnusedDisableDirectives": true }

Add dummy data needed by the components.

Create folder appdata in the src folder. Add the following files to the appdata folder.

Optional decade navigation buttons

Add a src/appdata/categories.json file and copy the content from this GitHub file.

Add a src/appdata/products.json file and copy the content from this GitHub file.

  • Kendo UI for Vue is distributed as multiple NPM packages, scoped to @progress.

  • For example, the name of the Grid package is @progress/kendo-vue-grid.

  • Kendo UI for Vue is a rich suite of many modular components.

Overview

For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window.

Let’s add the mentioned components’ packages and their dependencies:.

7. Add a Kendo UI for Vue Window

With the above, we not only add the packages of the Grid and DropDownList but also add another important package – kendo-data-query.

Accessibility

It contains useful functions for client-side data operations.

To install the Window component run the following:.

Kendo UI for Vue includes three gorgeous themes, which are all available as separate NPM packages.

Styling

The available theme packages are @progress/kendo-theme-default, @progress/kendo-theme-bootstrap and @progress/kendo-theme-material.

Let’s take the Default theme and install it just like we did with the component packages:.

Import the CSS files from the package in the src/App.vue file.

Conclusion

If needed, any additional custom styles can be added in the tag of the src/App.vue file.

Here is what we should add:. Now that you have everything set up and ready to go, let’s begin using the Kendo UI for Vue components, starting with the DropDownList component.Before we continue, the first thing we should do is to import the already installed DropDownList component into the src/App.vue file and the appdata/categories.json file using the following code:.

Add the DropDownList component with the following code:.

After importing the component, use the code below to bind a DropDownList to a list of categories.

The and :sortable="sortable"). Add the following properties in the data option. Configure data operation settings and the initial state of the Grid data.

For example:The initial skip will be the first one.The page size (take) will be 10.The Grid will be initially sorted by Product Name.We will save all these settings in data properties and add them to the Grid using the below code:.

# 📖 Rule Details

The initial skip will be the first one. The page size (take) will be 10. The Grid will be initially sorted by Product Name.

We will save all these settings in data properties and add them to the Grid using the below code:.

Internationalization

To display the correct Grid data, we will bind the Grid to the output of a function, rather than the products array directly.

We will use the imported process function, which is part of the kendo-data-query package.

The result of the function will be stored in the dataResult data property.

Define a dataStateChange handler.

5. Add a Kendo UI for Vue DropDownList

It does two things:Update the state of the take, skip, filter and sort data properties after each user interaction via the createAppState function.After the data properties are updated, the second thing that the function does is to get a result from the process function and set it to the dataResult property.

This will cause the Grid to refresh and display the expected data.

Validation states

To display the applied data changes, we have to change the data-items property of the Grid to :data-items="dataResult".

Update the state of the take, skip, filter and sort data properties after each user interaction via the createAppState function.

# 📚 Further Reading

After the data properties are updated, the second thing that the function does is to get a result from the process function and set it to the dataResult property.

This will cause the Grid to refresh and display the expected data.

To display the applied data changes, we have to change the data-items property of the Grid to :data-items="dataResult".

Define a template for the Discontinued field of the Grid.

Add the following inside the grid tag in the template section of the src/App.vue file.

Edit the columns data property by adding the cell property for the Discontinued cell. Finally, we will add Grid filtering via the DropDownList.

# 🔧 Options

To do that, we will use the existing handleDropDownChange function and add a filter descriptor to gridDataState.

We also need to reset the page index (skip) to zero, as the number of data items and pages will decrease.

Date constraints

To try all discussed above features, copy the below code and paste it in the App.vue file of your project.

In this section you were able to add a robust grid to your application—complete with paging, filtering, and sorting.

Not a bad accomplishment for a few minutes' worth of work!Feel free to explore the Kendo UI for Vue Data Grid documentation page to get a sense of just how many things the Grid can do.

The products array contains some fields which are not displayed in the Grid.

9. Complete Source Code

In this section, you’ll use the Kendo UI for Vue Window to display those additional product details when users select a Grid row.

Here are the required steps.First import the Window component:. Next, define new windowVisible and gridClickedRow data properties.

Next, add a row click handler to the Grid. After that, add the rowClick function below, which will set the windowVisible flag to true, and assign the data item of the clicked row to the gridClickedRow property.

10. VSCode Extension

You’ll use the data item values to render the Window's content.

Next, add the following Window declaration.

See also

(Add it immediately after the Grid's definition in the template.) Notice how the Window will be rendered only if the windowVisible flag value is true.

Finally, add the following Window close handler, which will set the windowVisible flag to false when the user closes the Window.

8. Activate Your Trial or Commercial License

With this code in place, try tapping on a row in the Grid.

You should see a custom Window appear with additional product information.

Once again, note how simple this functionality was to implement.

# 🚀 Version

With Kendo UI for Vue, you get a collection of Vue components that are easy to drop in and solve hard problems—in this case, building a customizable cross-browser-friendly Window.

  1. That’s the power of Kendo UI for Vue!

  2. You can learn more about the Window component and what it can do on the Kendo UI for Vue Window documentation page.

  3. Kendo UI for Vue is a professionally developed library distributed under a commercial license.