When I go into edit mode, my readOnly text field is shown with an input box, even though it is disabled from any editing.
Is it possible not to show the box as it is misleading to the user?
You should override the default editTemplate for your field so it just returns the text, not an input that is disabled.
You can 'editing' to false for field.
For example 'Link' will be auto-generated field and you don't want to see input:
fields: [
{ name: "Name", type: "text", width: 150 },
{ name: "Description", type: "text", width: 150, validate: "required" },
{ name: "Link", type: "text", width: 150, editing: false },
{ type: "control" }
]
Please, read documentation for more info
Related
As you can see in this codepen link, I have replaced the header text with v-text-field but the problem is the v-text-field is attached with filterBy icon (the up-down arrow icon) as well. When i click on the text-field the filterBy function is working that i dont want. So far I think the #click event is covering whole area. I wish to separate the text-field and filterBy behavior. Any help will be greatly appreciated.
https://codepen.io/MicroDreamIT/pen/vYRvMza
You can disable the filter option on v-table columns by using the property 'sortable'.
Your headers data should look like that :
headers: [
{
text: "Dessert (100g serving)",
align: "left",
value: "name",
sortable: false // this will disable filter property and hide the icon
},
{ text: "Calories", value: "calories", sortBy: true },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
I am new to Handsontable.
I am working on the drag and drop feature.
I am able to enable drag and drop by setting the 'manualRowMove' property to true.
However, I want to disable drag and drop on just the last row.
Question: Is there any way to achieve this?
I have checked their documentation and online forums but did not find an answer.
Handsontable code:
table = new Handsontable(container1, {
data: data,
defaultRowHeight: 20,
rowHeaders: true,
colHeaders: true,
manualRowMove: true,
licenseKey: LicenseKey,
colHeaders: ["Name", "Email", "Designation", "Id"],
columns: [
{ data: "Name", type: "text", readOnly: true },
{ data: "Email", type: "text", readOnly: false },
{ data: "Designation", type: "text", readOnly: false },
{ data: "Id", type: "text", readOnly: true }
]
});
Is it possible to persist grid sort/filter/selection on grid.refresh() in some smart optimized way? I need to refresh grid on window resize event to adjust to a new window size. I guess refresh internally destroys and recreates grid, not accounting for possible active sort/filter/selection. Because grid can contain a lot of data (virtual scrolling), I would like to a avoid unnecessary db querying, rendering and sorting. I guess I am looking for a refresh which will refresh on existing data.
Seams like they just implemented it - here is the example.
Maybe to be included in the next release.
Here is the code in the example that does this:
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { type: Number },
name: { type: String },
company: { type: String },
phone: { type: String },
age: { type: Number },
gender: { type: String }
}
},
filter: {
// create the initial filter in that form
and: [
{ path: "name", filter: "con", value: "John" }
]
}
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "id", width: "250px", title: "ID" },
{ field: "name", title: "Person Name", width: "250px" },
{ field: "company", title: "Company" },
{ field: "phone", title: "Phone", width: "250px" },
{ field: "age", title: "Age" }
]
});
});
I found the solution in refresh method it self. It accepts options objects where one can provide current data source options to persist. Example to persist sort and/or filter:
var options = {
dataSource: $("#grid").swidget().dataSource
}
$("#grid").swidget().refresh(options);
Please stand me correct if I am wrong here. For selections I guess one can retrieve selected indices and reselect after calling refresh.
EDIT: filter and sort are preserved, but filter row resets (loses all active input values). Could this be a bug? How to keep values in filter row?
I tried the following to add the placeholder attribute to the input field using the following code,
dataSource: {
...
schema: {
data: "storeEmployeeData",
total: "storeEmployeeDataCount",
model: {
id: "ID",
fields: {
Id: { type: "number", editable: false, nullable: true },
FirstName: { type: "string", nullable: true, editable: true, validation: { required: false } },
MiddleName: { type: "string", nullable: true, editable: true, validation: { required: false } },
LastName: { type: "string", nullable: true, editable: true, validation: { required: false } },
**Email: { type: "string", nullable: true, editable: true, placeholder: "(optional)", validation: { email: true, required: false } }
}
}
},
...
}
Also tried the following,
columns: [
{ field: "FirstName", title: "First Name", type: "string", width: "150px" },
{ field: "MiddleName", title: "Middle Name", type: "string", width: "150px" },
{ field: "LastName", title: "Last Name", type: "string", width: "150px" },
{ field: "Email", title: "Email", type: "string", width: "250px", sortable: false, placeholder: "(optional)" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
None of them yielded the result I was looking for i.e., having placeholder attribute placeholder="(optional)" added to the input field.
This is part of HTML5, if this feature already exists in Kendo UI Grid is it also compatible with IE 7 and IE 8 ?
Am I missing something? Any help is appreciated!
There is no placeholder option in the Kendo UI Model documentation; therefore, it is not supported directly. Reference: http://docs.kendoui.com/api/framework/model#configuration-Example. Maybe you meant to use defaultValue?
Alternatively, you could use the attributes option for the Kendo UI Grid configuration. Reference: http://docs.kendoui.com/api/web/grid#configuration-columns.attributes.
The placeholder attribute is only supported in IE 10 and above.
Update: (due to comments)
To give you an example, in order to add the placeholder attribute to the input element, you could use the editor option on the column.
columns: [
{ field: "Email", title: "Email", width: 250, sortable: false,
editor: function (container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.attr("placeholder", "(optional)");
input.appendTo(container);
}
}
]
If your looking for a place holder for when there are no records then,
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
noRecords: true,
dataSource: []
});
</script>
or
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
dataSource: {
data: [{name: "John", age: 29}],
page: 2,
pageSize: 10
}
});
</script>
I have some requirement for dhtmlx scheduler, here I would like edit the event and add one text box and one button.Can you please suggest me how we can cusomize the .js(compressed) file.
Is there any separate .js files are availble for Development version.
If any please suggest me.
Thanks,
Rajasekhar
It is possible to configure the details of this form (or lightbox).
The documentation on how to do this is here
There is no need to edit the main dhtmlx source for this.
I found this solution:
Modify the file dhtmlxscheduler.js i mean section fields :
lightbox: {
sections: [
{ name: "description", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Note", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Status", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Type", height: 40, map_to: "text", type: "textarea", focus: true },
{ name: "Sequence", height: 40, map_to: "text", type: "textarea", focus: true },
{name: "time", height: 72, type: "time", map_to: "auto"}
]
},
and
labels:{
dhx_cal_today_button:"Today",
day_tab:"Day",
week_tab:"Week",
month_tab:"Month",
new_event:"Nouvelle Tache",
icon_save:"Save",
icon_cancel:"Cancel",
icon_details:"Details",
icon_edit:"Edit",
icon_delete:"Delete",
confirm_closing:"",//Your changes will be lost, are your sure ?
confirm_deleting:"Event will be deleted permanently, are you sure?",
section_description: "Description",
section_Note: "Note",
section_Status: "Status",
section_Type: "Type",
section_Sequence: "Sequence",
section_time:"Periode",