Hey Guys,
Wondering if anyone can assist in finding a solution to using Kendo UI grid data in a more MODERN Data Card solution such as https://www.google.com/flights results listings for instance (See attached) vs a standard Datagrid. I see that Kendo offers this
https://docs.telerik.com/devtools/winforms/controls/cardview/overview
However, this is far and away from a modern solution for Data Card UI. Of course, this will require sorting the filtering for cards, not grid. It would be awesome if the cards could interact with data from data grids too...
Any thoughts?
Thx in advance!
Michael
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
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
hi,
I have used vue wrapper grid, columns binding as a list. Columns are binded.
<
KendoGrid
ref
=
"ContactList"
id
=
"contactListView"
:selectable
=
"'multiple'"
:reorderable
=
"true"
:sortable
=
"false"
:resizable
=
"true"
:scrollable-endless
=
"true"
:filterable
=
"false"
:columns="columnList.filter(x=>x.selected==true)"
:editable="commonContactInfo.isGridEditable"
@change="onContactRowClick"
@save="saveContact"
:data-source="ContactsListForSelection"
@databound="onDatabound"
:allowCopy="true"
></
KendoGrid
>
ColumnList is as follows.
let columns: any[] = [
{
width: 50,
title: 'Select All',
selectable: 'multiple',
selected: true,
disabled: false
},
{
title: `First Name`,
field: 'firstname',
selected: true,
disabled: true,
isVisible: true,
width: 150
},
{
title: `Middle Name`,
field: 'middlename',
selected: true,
disabled: false,
isVisible: true,
width: 150
},
{
title: `Last Name`,
field: 'lastname',
selected: true,
disabled: false,
isVisible: true,
width: 250
},
{
title: `Initials`,
field: 'initials',
selected: true,
disabled: false,
isVisible: true,
width: 250
},
{
title: `Address`,
field: 'address',
selected: true,
disabled: false,
isVisible: true,
width: 250
}]
I use a seperate method to change this column list. later. There I add new columns to the grid as well.
if (this.commonContactInfo.customFieldsForGroups.length > 0) {
let Customcolumns: any[] = [];
let field = '';
let cusFieldId = '';
this.commonContactInfo.customFieldsForGroups.forEach((cf:CustomFieldsDto) => {
if (cf.pkFieldId !== undefined) {
cusFieldId = cf.pkFieldId;
}
this.commonContactInfo.fetchedContactsList.forEach((cont:ContactDto) => {
Object.keys(cont.customFields).forEach(k => {
if (this.commonHelper.getPlainGuidString(k) === cusFieldId) {
if (cont.customFields[k].DataType === 'DateValue') {
console.log(cont.customFields[k].DateValue);
field = 'customFields[' + k + '].DateValue';
}
if (cont.customFields[k].DataType === 'StringValue') {
console.log(cont.customFields[k].StringValue);
field = 'customFields[' + k + '].StringValue';
}
if (cont.customFields[k].DataType === 'IntValue') {
console.log(cont.customFields[k].IntValue);
field = 'customFields[' + k + '].IntValue';
}
}
});
});
Customcolumns.push({
title: cf.fieldName,
field: field, // 'customFields[' + field + '].DateValue',
selected: true,
disabled: true,
isVisible: true,
width: 150
});
});
let defcolumns = columnsList;
Customcolumns.forEach((tc:any) => {
defcolumns.push(tc);
});
this.ColumnsList= defcolumns;
this.ColumnsList.forEach((e:any) => {
e.selected = true;
});
}
columns are added like this because the data i have is as follows. datafieldvalue (see attached file)
Issue is after this even the columns are added the data in the customfields are not binding.
Any suggestions?
Hi
Is it possible to switch to a card view in the grid component? If not, is it possible to keep the filter options from <kendo-grid> and then have a switch to change between the <kendo-grid-column>'s and another custom view?
Or maybe another suggestion?