I'm upgrading a project from 2021.2.511 to 2023.2.829 and I have a page which is extremely data heavy. Using the .Size(ComponentSize.Small) option still results in a much larger drop-down list than before.
How can I reduce the size of these drop-downs further? In the old version, they simply inherited the font-size of the parent div.
This also applies to the multiselect controls as well
I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.
Please help.
This is how i have prepared my grid :
$("#ListofMF").kendoGrid({
dataSource: {
data: extractedData,
schema: {
model: {
fields: {
Id: {type: "integer"},
FullName: { type: "string" },
Temp1: { type: "boolean" },
Temp2: { type: "boolean" },
Industry: { type: "string" },
//Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
//scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: true,
pageSize: 6
},
columns: [
{
title: " ",
width: 30,
field: "Id",
hidden: true
},
{
title: " ",
width: 40,
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="isMFSelected"/>'
},
{
field: "FullName",
title: "Data",
//width: "140px",
headerAttributes: { style: "font-weight: bold;" }
},
{
field: "Temp1",
title: "Temp 1",
width: "130px",
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
},
{
field: "Temp2",
title: "Temp 2",
width: "130px",
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
},
{
field: "Industry",
title: "Industry",
editor: function (container, options) {
// Get the industry template and apply it to the column editor
console.log(container.html);
var industryTemplate = $("#industryTemplate").html();
container.html(industryTemplate);
}
}
]
});
<script id="industryTemplate" type="text/x-kendo-template">
@(Html.Kendo().MultiSelect()
.Name("Industry")
.DataValueField("Value")
.DataTextField("Text")
.BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
)
</script>
I have a DropDownList and users are annoyed that whilst the data is loaded it says "No data found." when in fact, the data hasn't been loaded yet - I found this config item:
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/messages.nodata
How do I make one message appear whilst the data source is loading, and another message once the data has loaded (and in fact, there was no data found)
Grid:
@(Html.Kendo().Grid().Name("EmployeesGrid").Columns(columns => {
columns.Bound(e => e.FirstName).Title("First Name");
columns.Bound(e => e.LastName).Title("Last Name");
columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");
columns.Command(command =>{
command.Edit();
}
);
}
).ToolBar(toolbar => toolbar.Create()).
Editable(editable => editable.Mode(GridEditMode.InLine)).
DataSource(dataSource => dataSource.Ajax().Events(events => events.Error("error_handler")).
Model(model => model.Id(e => e.Id)).
Create(update => update.Action("CreateEmployee","Home")).
Read(read => read.Action("ReadEmployees","Home")).
Update(update => update.Action("UpdateEmployees","Home"))))
After i select the values in the drop-down. im not able to see the values in the field... Need help with this
I am using the kendo dropdown tree with vuejs. Below is how I am using the dropwdowntree.
The "mySelectedList" contains an array of IDs. If the form is being edited and the array is populated, this array will check items on the dropdowntree. This is as expected.
But as items from the dropdowntree are checked or unchecked by the user, this array "mySelectedList" does not get updated.
What is the proper way to bind a property to the dropdowntree? How do I get "mySelectedList" to get updated as the user checks or unchecks items in the dropdowntree?
<dropdowntree
:data-source="myDataSource"
autoClose: false
:checkboxes="true"
:check-all="true"
:placeholder="'Select from tree'"
dataTextField="text"
dataValueField="id"
v-model="mySelectedList"
>
</dropdowntree>