Telerik Forums
Kendo UI for Vue Forum
1 answer
571 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
3 answers
225 views

I had this working and have tried to identify what change caused this but since yesterday, when I try to render a vue with kedopanelbar I get the following in Firefox debugger:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. found in ---> <KendoPanelbar> <LeftNav> at src\views\LeftNav.vue <App> at src\App.vue <Root>

The kendopanelbar is still being accessed but the error seems to be more to do with webpack etc.

Can anyone suggest where I can look please?

Brian

Ianko
Telerik team
 answered on 19 Dec 2018
1 answer
170 views

Hello Team,

Is it possible to execute a method, when user clicks on any amount cell of pivot. Refer screen shot for more.

Thanks,

Mohan Pal

Dimitar
Telerik team
 answered on 19 Dec 2018
4 answers
305 views

We have a number of Vue components we've built and are looking for a way render those components in a row's detail cell of a kendo grid.

Is there any guidance on how we might load a component and specify props and slots while accessing the event data?

Thanks,

Will

Konstantin Dikov
Telerik team
 answered on 13 Dec 2018
1 answer
329 views

https://demos.telerik.com/kendo-ui/html5-diagram-sample-app

i wanna to create something that like his page, the panel bar with horizontal item.

Ivan Danchev
Telerik team
 answered on 11 Dec 2018
3 answers
1.1K+ views

I know ListBox probably doesn't support this out of the box but I'm really struggling to find a solution to my problem.

I would like to customize the item template to contain a checkbox and a text input when it is moved to the right ListBox. I am able to put a checkbox and input in there no problem but I can't get the textbox to focus when clicked.I would also like to bind its value to the dataItem but I'm sure I can figure that part out once I'm able to actually type in the box.

Here is a Dojo demonstrating the problem:

https://dojo.telerik.com/eZuKoMoh/2

Ivan Zhekov
Telerik team
 answered on 10 Dec 2018
3 answers
128 views

I'm using TreeList component and I want to rend dropdown list in column filters, I have set filterable to true and filterable-ui to rend function, but still failed, while it works in jquery TreeList. Failed meaning is rending default string type filters, not dropdown list. And I'm sure the attribute is received by component from vue chrome plugin.

Hoping some demoes to show how to work fine.

 

Code as following

HTML:

<kendo-treelist :data-source="resourceDataSource"
:filterable="true">
<kendo-treelist-column :field="'name'" :width="140"></kendo-treelist-column>
<kendo-treelist-column :field="'resourceType'" :width="100" :filterable="true" :filterable-ui="resourceTypeFilterableUi" :template="typeTemplate"></kendo-treelist-column>
</kendo-treelist>

 

JS:

resourceDataSource:

new kendo.data.TreeListDataSource({
serverPaging:true,
serverFiltering:true,
transport:{
read:{
url:'/api/RBAC/Resource/GetResouceListByTid',
type:"post",
dataType:'json',
data:{
companyId:vm.companyId
}
}
},
page:1,
pageSize:10,
schema: {
model: {
id: "id",
parentId: "parentId",
fields:{
resourceType:{ type:'string' }
}
},
data:function (res) {
return res.data.data
},
total:function (res) {
return res.data.total
}
}
})

 

Rend Function:

resourceTypeFilterableUi:function(element){
element.kendoDropDownList({
dataSource: resourceType,
dataTextField: "value",
dataValueField: "id"
})
}

 

 

 

Plamen
Telerik team
 answered on 05 Dec 2018
1 answer
308 views

https://codesandbox.io/s/216z33wvjr

this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.

Veselin Tsvetanov
Telerik team
 answered on 05 Dec 2018
1 answer
431 views

hi,

I want to show my binding data in kendo grid but I cant this with schema,anybody can help me? i do this:and my data transfer from my controller in "/loadlists"

    <kendo-datasource
      ref="datasource"
      :type="'get'"
      :pageSize="20"
      :transportRead="'/loadlists'"
    ></kendo-datasource>
    <kendo-grid
      :height="550"
      :dataSourceRef="'datasource'"
      :groupable="true"
      :sortable="true"
      :pageable-refresh="true"
      :pageable-page-sizes="true"
      :pageable-button-count="5"
      :filterable="true"
      :columnMenu="true"
      :schema-model-fields="schemaModelFields"
    >
      <kendo-grid-column :field="'VehicleName'" title="  vehicle name">
</kendo-grid-column>
      <kendo-grid-column field="user_id" title="name"></kendo-grid-column>
      <kendo-grid-column field="load_id" title="load"></kendo-grid-column>
      <kendo-grid-column field="load_date" title="laod date"></kendo-grid-
column>
    </kendo-grid>

and my data in vue:

data() {
    return {
      isLoading: false,
      load: {},
      loads: {},
      schemaModelFields: {
        VehicleName: { from: "vehicle.name" }
       }
     };
   },

 

At this I try to bind my data transfer from controller to kendo grid and I cant

Plamen
Telerik team
 answered on 05 Dec 2018
7 answers
171 views
I need to add the component that was created and put into the tabstripe content to show on the tabstriped but i seem like not supported 
Ianko
Telerik team
 answered on 03 Dec 2018
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Button
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
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
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
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
SpeechToTextButton
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?