Kendo UI vs BootstrapVue

[Bruno71]

I have a large project that uses BootstrapVue.  It also uses Vuelidate for validation.  Why should I consider using Kendo UI instead?  What are the major differences or pros/cons of one versus the other?  Would Kendo UI be able to completely replace BootstrapVue + Vuelidate?

Thanks.

[Plamen]

Hi,

Thank you for this question. I will try to answer the question from our perspective without any means to downgrade the BootstrapVue project.

First of all we do our best to support and grow Kendo UI for Vue constantly - create new features, fix bugs and keep up to date with the latest trends. We recently reached 100 components and some of them are of great complexity like Grid, Scheduler and Chart. We release new versions every several weeks and have professional support  that is recognised as the best in the industry. One the other hand BootstrapVue seems to struggle with the support of the project - took them long time to add Vue 3 support and the latest commit in the repo (as far as I see today) was in January.

The only missing component as of now in Kendo UI for Vue compared with BootstrapVue is the Breadcrumb yet it is planned for implementation in our not so long feature and you can always share with us if it is heavily used in your application so we could rethink its exact implementation.

 For all the Form scenarios we do have our own version of Vuelidate its our Form component- there we have special guidelines and examples for all the possible form scenarios that we have hit so far.

Hope this will answer you current question. If you have more please don't hesitate to let me know. No matter if you choose us or not any general feedback is also welcomed.

Regards,
Plamen
Progress Telerik

[Bruno71]

Thanks for the response.  I'm still relatively new to some of these things, so I wanted to make sure I was understanding correctly.  If I were to switch to something like Kendo UI, are there any tools/tips for converting?  Or is it just a matter of running both options and slowly transitioning from one to the other?

[Plamen]

Both Kendo UI for Vue and BootstrapVue are built separately so the recommended approach is to slowly transition from one to the other feature by feature. If you have questions you can always ask us here or in a support ticket so we could help you in case the features are more complicated. 

[Bruno71]

Hi Plamen!  I just wanted to follow up on my previous comments, as I look more into incorporating Kendo UI into my project...

In comparison to BootstrapVue (or just plain Bootstrap), does Kendo UI have a "table" component or class?  Or is the Grid component meant to be used in place of a regular HTML <table>?

Also, is the GridLayout component meant to replace the "container/row/col" layout tools of Bootstrap/BootstrapVue?  Or is the GridLayout tool more for smaller components to be used inside of some other responsive page framework?

I'm just wondering if I still need to use regular Bootstrap for overall page layout?

Thanks.

[Petar]

Hi, Mike. 

I will continue the communication on the current ticket. I hope the following details will address all your questions but if there is something else you would like to know, please ask us. 

The Kendo UI for Vue Native Grid component is the one that addresses the HTML Table functionality. If there is something that you think you won't be able to implement with the Grid, please share details about your scenario and we will help you furhter, based on the shared information. 

The GridLayout and StackLayout components help you position the content on the webpage easier. In general, I would say that you don't need Bootstrap to define the page layout of your application but of course, there could be specifics in your implementation that may need additional CSS configuration. 

If you share more information about the layout result you want to achieve we could be more precise in our answer.

[Bruno71]

For example...I want the whole page laid out in 3 columns with the center column being the widest.  The columns should be responsive and scale to fit the browser window.  I could use Bootstrap to do something like this:

<div class="container">
   <div class="row text-center">
      <div class="col-md-3">Column 1</div>
      <div class="col-md-6">Column 2</div>
      <div class="col-md-3">Column 3</div>
   </div>
</div>

Then my page content and other components would go inside each column <div>.  
What would be the best way to reproduce this kind of page layout with the Kendo UI components?  

[Petar]

Hi.

The same functionality can be implemented using the CSS utilities of our Design system. Please check this link for more details about how the discussed layout can be configured. 

Here is an example that uses the following code to achieve the targeted functionality:

<div class="k-d-flex k-gap-2 k-w-full k-h-full">
  <div class="k-flex-basis-1/4 k-p-5 k-bg-primary">1</div>
  <div class="k-flex-basis-2/4 k-p-5 k-bg-primary">2</div>
  <div class="k-flex-basis-1/4 k-p-5 k-bg-primary">3</div>
</div>

Please let me know if you have additional questions or need furhter assistance with the current thread.

[Bruno71]

OK...thanks!  I had previously looked for CSS info on the website but couldn't find it.  I'll check this out.

[Petar]

You are welcome! Let me know if you have additional questions related to the discussed configurations.