Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
8 answers
478 views

I'm using the Kendo for Vue native grid and I'm trying to make an asynchronous API call inside of my cell render function. I'm sure there has to be a way around this, but I just can't seem to find an answer. You can see the example at the Stackblitz link below. The cell using a render function never gets rendered in this example. However, if you remove the setTimeout it works as expected.

 

https://stackblitz.com/edit/kendoui-nativegrid-cellrender-async

Thanks,

Ferg

Plamen
Telerik team
 answered on 26 Apr 2019
1 answer
463 views

I have below item in my 'columns' in 'data' function of my grid component. How can I write it in <kendo-grid-column> tag format?

I also need my isActive to render as a radio button all the time. Please help with these 2 things.

cell: "myTemplate", filterable: false, width: "210px" }

 

This is what I have so far. It display all columns except my v-slot.

<grid :style="{ height: '300px', width: '60%' }"

      ref="grid"
      :data-items="gridData"
      :pageable="pageable"
      :sortable="sortable"
      :skip="skip"
      :total="total"
      :edit-field="'inEdit'"
      @itemchange="itemChange"
    >
      <kendo-grid-column field="emailAddress" title="Account" :width="120">
      </kendo-grid-column>
      <kendo-grid-column
        field="Description"
        title="Description"
        :width="120"
      ></kendo-grid-column>
      <kendo-grid-column
        field="isActive"
        title="Is Active"
        :width="120"
      ></kendo-grid-column>
      <kendo-grid-column
        cell="myTemplate"
        filterable="false,"
        :width="120"
      ></kendo-grid-column>
      <template v-slot:myTemplate="props }">
        <custom
          :data-item="props.dataItem"
          @edit="edit"
          @save="save"
          @cancel="cancel"
      /></template>
Petar
Telerik team
 answered on 02 Sep 2021
1 answer
2.1K+ views

Hi,

 

I have simple two questions. 

 

I'm comparing both Kendo Vue Native components and wrapper components to migrate from Kendo jQuery. 

 

Wrapper components

 

-> If I set :columnMenu="true", I can see a list of menus like sort ascending and it also has 'Columns' menu which shows or hides columns by checking or unchecking check boxes. 

 

However When I implement same components by using native components, the list doesn't show 'Column' menu. 

Can someone tell how to show the column menu???

 

And, if I already have license for jQuery, is it possible to get license for Vue without extra payment?? 

Ivan Danchev
Telerik team
 answered on 30 Apr 2020
1 answer
89 views
Is it possible to make rows sticky similar to the locked option we have for columns?
Petar
Telerik team
 answered on 13 May 2022
1 answer
98 views

Hi All,

          We wish to start new project using Kendo UI and using Vue.Js. My requirement Listing Below

      In my application i had above 10 menus. When i click each menu it will load grid with data. When i login application it will land in default page with grid  and corresponding menu will be active. when i  click second menu i want to minimize  first grid data and load second grid data, when i click third menu again i want to minimize second grid data and load the third grid data. like that remaining  menus.  But when i click first or second or third minimized grid (not in menu) i want show that grid data . its will show only existing data(not going to data base and retrieve data). How will achieve this requirement using Kendo UI and vue.js? i don't  use session state kind of state management methods

Petar
Telerik team
 answered on 20 Aug 2019
1 answer
224 views

Hello, 

I want to integrate the Kendo UI Grid to my project (composition api + TypeScript).

In specific I need help to undertand al least one integration feature in the grid, the filtering

I readed this documentation: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/

I make the corresponding settings on my code but the filtering doesn't work.

So, do you have an example or better documenattion to undertand the integration, but using Composition API + TypeScript

Thanks in advance

 

 

 

 

Petar
Telerik team
 answered on 04 Jul 2022
1 answer
28 views

Hello forum,

can the Listview component be sortable and draggable? I would like to influence the order of the displayed Listview entries with the mouse. I would appreciate any feedback. Best regards

Konstantin Dikov
Telerik team
 answered on 20 Feb 2024
1 answer
436 views

I am facing issue with display number of rows in a particular group header in kendo grid group header template in single file component in Vue.


This is my code.

           <kendo-datasource ref="localDataSource" :data="filteredUsers"
          :group='{ field : "Role", aggregates: [ { field: "Role", aggregate: "count" }] }'>
    </kendo-datasource>
 
           <kendo-grid :height="500"  :data-source-ref="'localDataSource'"  :resizable="true"
               :filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"
               :scrollable-virtual="true" :pageable-numeric="false"
               :pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"
               :editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"
               :excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >

 

                  <kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>
               <kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>
               <kendo-grid-column :field="'UserName'"  :width="150"></kendo-grid-column>
               <kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>
              
            <kendo-grid-column :field="'Role'" :width="170"
:group-header-template='headerTemplate'></kendo-grid-column>

 

               <kendo-grid-column :field="'AssignedGroups'"  ></kendo-grid-column>
               <kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>
               <kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>
 
          <kendo-grid-column :field="'Status'"  :width="170" :template="this.toggleTemplate()"></kendo-grid-column>
 
</kendo-grid>

 

Vue js code

 
        data () {
 
   return {
                          
                 users:[ {
                          "UserId":1,
                          "UserName":"Rahul",
                          "UserType":"System Users",
                          "Role":"Super Admin",
                          "AssignedGroups":"Sales",
                          "Status":true,
                          "Email":"rahul@motadata.com",
                          "Description":"Rahul is a java developer"
                       },
                     {
                         "UserId":2,
                         "UserName":"Meet",
                         "UserType":"System Users",
                         "Role":"Super Admin",
                         "AssignedGroups":"Finance",
                         "Status":false,
                         "Email":"meet@motadata.com",
                         "Description":"meet is a CA"
                   },
                   {
                      "UserId":3,
                      "UserName":"Ravi1",
                      "UserType":"System Users",
                      "Role":"Admin",
                      "AssignedGroups":"Sales",
                      "Status":true,
                "Email":"ravi@motadata.com",
                "Description":"Ravi is a java developer"
            },
            {
}]
         }
        
    },
Methods:{ 
    headerTemplate () {
             return kendo.template("Role #=value# (#= count #)");
        }
}

Alex Hajigeorgieva
Telerik team
 answered on 20 Dec 2018
2 answers
84 views

Hi,

Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(

Adam
Top achievements
Rank 1
Iron
 updated answer on 12 Mar 2024
1 answer
41 views
https://codesandbox.io/p/sandbox/blissful-tdd-5g4x7w?file=%2Fsrc%2Fmain.vue%3A21%2C13

when i use row-render, rowclick event is not working ...
Konstantin Dikov
Telerik team
 answered on 18 Jan 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
Editor
DatePicker
DropDownTree wrapper
Scheduler
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
Chart
Chart wrappers (package)
DateTimePicker
Gantt wrapper
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?