how can i have a regular expression on a igTextEditor in igGrid Updating?
i tried to use validate option but it didn't worked.
$("#schedulerTable").igGrid({
columns: $scope.schedulerColumns,
width: "87%",
height: "300px",
fixedHeaders: true,
autoGenerateColumns: false,
autofitLastColumn: true,
autoCommit: true,
renderCheckboxes: true,
responseDataKey: "results",
dataSource: $scope.schedulerData,
updateUrl: "",
primaryKey: 'Id',
features: [
{
name: "Updating",
generatePrimaryKeyValue: function (evt, ui) {
nextPrimarykey -= 1;
ui.value = nextPrimarykey;
},
enableAddRow: true,
enableDeleteRow: true,
editMode: "row",
columnSettings: [
{
columnKey: "Id",
editorType: "numeric",
editorOptions: {
readOnly: true
}
}, {
columnKey: "Time",
editorType: "text",
editorOptions: {
},
validatorOptions: {
regExp: /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\#\w{2,10}\.\w{1,10}$/,
onblur: true,
onchange: true
},
required: true,
validation: true,
defaultValue: "00:00"
},
{
columnKey: "Mo"
},
{
columnKey: "Tu"
},
{
columnKey: "We"
},
{
columnKey: "Th"
},
{
columnKey: "Fi"
}]
}]
});
i want to achive a time picker in the Time Column but that doesn't exist so i try to get only time in the textEditor by regular expression.
the grid gets loaded with columns named Time, Mo- Friday.
if you click on add in grid you can click in the input field and fill your time. the time should get validated before clicking on done and show a error message.
to see how the table look like: https://codepen.io/ablablabla/pen/PJLbJz
The lack of validation is because the validatorOptions belong to the editorOptions (as those get passed down to whatever editor you choose as provider). The validation: true only gets some defaults, which really won't do much for a text field besides the required.
And then the RegExp option (which is for an email in the snippet above as far as I can tell) has been pattern since 15.2 :) So in the end for that time column you can try:
//...
editorOptions: {
validatorOptions: {
pattern: /^\d{1,2}\:\d{2}$/,
onblur: true,
onchange: true
},
},
//..
Here's an updated codepen: https://codepen.io/anon/pen/YrgYxj
Edit: Or if you want to set the error message:
//...
editorOptions: {
validatorOptions: {
pattern: {
expression: /^\d{1,2}\:\d{2}$/,
errorMessage: "Time should match a pattern like 00:00"
},
onblur: true,
onchange: true
},
},
//..
Depending on your goals you could also use a Mask Editor or a Date Editor as provider. Also the obligatory docs link: https://www.igniteui.com/help/iggrid-updating
P.S. Bind to an empty array to avoid the error for that first row that has no values and more importantly primary key.
Related
Using Tabulator 4.4.3
When filtering the checkbox normally, everything works
If I set a filtered checkbox to true on a column, it works:
headerFilterEmptyCheck: function (value) {
return !value;
},
However, with using persistentFilter: true and I reload the page, that checkbox filter will only display true=true, never false or null when unchecked (just return 0 rows)
My Column Definition
{
title: "do it?",
field: "hasToDoIt",
responsive: 0,
formatter: "tickCross",
formatterParams: {
allowEmpty: true,
allowTruthy: false,
tickElement: "<i class='fa fa-check'></i>",
crossElement: ""
},
headerFilter: "tickCross",
headerFilterEmptyCheck: function (value) {
return !value; //only filter when the value is true
},
sorter: "string",
headerSortTristate: true,
width: 80,
align: 'center'
},
Table Definition
new Tabulator("#" + config.Key, {
index: "_id",
reactiveData: true,
persistenceMode: true,
persistenceID: "accountsummary",
persistentSort: true,
persistentFilter: true,
autoResize: true,
layout: "fitColumns",
responsiveLayout: true,
virtualDomBuffer: 100,
headerSortTristate: true, //enable tristate header sort for all columns
data: this.state.Data,
columns: this.state.Columns,
groupBy: "Geo",
groupToggleElement: "header",
groupStartOpen: true,
sortOrderReverse: true,
initialSort: [{ column: "Geo", dir: "asc" }, { column: "Account", dir: "asc" }],
rowClick: (e, row) => {
});
}
After selecting the checkbox, reloading the page, the checkbox should show the filtered results and unchecking the box show return to show all rows
This is because persistent filters functionality only persists filters set through the setFilter function, not header filters.
I have a handsontable with data that would have a property that indicates a specific status (hasShipped if specifics are required). Is there a way to remove the "remove row" button from a row where the hasShipped value is true?
Table definition, in case it's important:
var hot = new Handsontable(container, {
data: hotData,
dataSchema: { Product: null, UOM: "EA", QtyShipped: 0 },
columns: [
{
data: 'Product',
title: "Product",
type: "text",
readOnly: isShipped
},
{
data: 'UOM',
title: "UOM",
readOnly: true,
type: "text"
},
{
data: 'QtyShipped',
title: "Qty<br />Shipped",
type: "numeric",
readOnly: isShipped
}],
allowInsertRow: true,
//allowRemoveRow: true, //TODO: Depending on mode and row
autoWrapCol: true,
colHeaders: true,
columnSorting: { column: 0, sortOrder: false },
contextMenu: ['undo', 'redo', 'row_above', 'row_below', 'remove_row'],
currentColClassName: 'activeCol',
currentRowClassName: 'activeRow',
dropdownMenu: true,
fixedColumnsLeft: 1,
outsideClickDeselects: false,
readOnly: <%= IsWatchList.ToString().ToLower() %>,
removeRowPlugin: true,
rowHeaders: true,
stretchH: "all", //used in conjunction #hot-container styling to make the table take up 100% of parent width
});
Given that I was already implementing the code to remove a row and had altered the code to insert my own custom styled button, I knew where the buttons were being injected.
Thanks to MonkeyZues's comment, I looked at the code where I was injecting the remove row button and, depending on the value of the HasShipped property, was able to inject (or not) the required row buttons
if (jsonObject != "") {
if (jsonObject.LoadDetails[row]["HasShipped"] == true) {
div.appendChild(btnNode);
elem.appendChild(div);
}
}
I have customize filter on kendo grid but here i have small issue when i have date column in the grid i want to restrict user to type anything in filter input, Expected behavior is user should always select the date from datepicker to apply filter. How can i apply onkeydown function to the filter ?
config.js
getallCycles: {
sortable: true,
scrollable: true,
editable: false,
dataBound: function () {
},
filterable:{
extra: false,
operators: {
string: {
startswith: 'Starts with',
eq: 'Is equal to',
contains: 'Contains'
}
}
},
columns: [
{
field: 'assessmentDueDate',
title: 'Cycle Assessments Due Date',
width: '190px',
filterable: {
ui: function (element) {
'use strict';
element.kendoDatePicker({
format: 'yyyy-MM-dd'
});
element.onkeydown({
return false;
});
},
operators: {
string: {
eq: 'Is equal to'
}
}
}
},
]
}
You can add disabled attribute to the input control to disable typing
filterable: {
ui: function(element) {
element.kendoDateTimePicker(); // initialize a Kendo UI DateTimePicker
$(element).attr("disabled","disabled");
}
}
Please see the live demo here
I have a Kendo UI grid where some of the columns can be filtered. For each row in that column, you can open a popup to see some details to the specific entry.
I can open the popup without any problems. But: after closing it and trying to filter any of the columns, I get the following error: JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference
If I filter a column before I open a popup, it works like a charm.
If I filter a column and then open the popup, the already filtered column can be filtered again but the others not.
I don't know why I can't filter columns after opening and closing the popup.
Any ideas or hints would be really helpful. Thanks
HTML:
<div id="windoofTestOuter"><div id="windoofTest"></div></div>
<div id="processGrid"></div>
My grid:
$("#processGrid").kendoGrid({
sortable: true,
pageable: true,
selectable: true,
filterable: {
extra: false
},
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Home/GetProcesses",
cache: false,
type: "POST",
dataType: "json"
},
parameterMap: function (data) {
return $.extend({}, data, { sort: data.sort, filter: data.filter });
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
page: "#ViewBag.ProcessPage",
schema: { data: "Data", total: "Total", model: { id: "Id" } },
pageSize: "#(#Model.MaxCountToShow)"
},
columns: [
{ field: "ErrorDateTime", title: "ProcessDateTime", width: "170px"/*, filterable: { ui: dateFilter }*/ },
{ field: "Name", title: "Processtype", attributes: { value: "type" }, width: "240px;", filterable: { ui: processtypeFilter} },
{ field: "Service", title: "Service", width: "181px;", filterable: { ui: serviceFilter } },
{ field: "Operation", title: "Operation", width: "130px", filterable: { ui: operationFilter } }
]
}).data("kendoGrid");
The link/string which shall open the popup:
function createProcessActionString(process) {
var det = '<a class="makeANiceMouse" onclick="processDetailUrl(' + process.Id + ', ' + grid.dataSource.page() + ')">Details</a>';
return det;
}
My popup:
function processDetailUrl(id, page) {
var windoof = $("#windoofTest").kendoWindow({
width: "1150px",
height: "300px",
content: det,
title: "Process Details",
actions: ["Minimize", "Maximize", "Close"],
close: function (e) {
windoof.data("kendoWindow").content(" ");
}
});
windoof.data("kendoWindow").center().open();
}
I deleted the unnecessary columns and so on..
EDIT: I tried to intitialize the filter in the filterMenuInit. After opening and closing the popup, I clicked on the filter icon of one of the columns, and I get the error : JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference . The same one as before.
EDIT: I used the windoof.destroy() but the filters weren't accessable afterwards.
EDIT solution: I have a workaround for working with the filters again. I just fake a click on each of it before I open a popup. It's not beautiful but it serves me so far.
BUT It seems like everything gets kicked/killed by that damn popup. I can't even access the grid's datasource anymore.. It's strange...
I'm dealing with the same issues but got well passed the Data not being there. Check out or use onDataBound and use e.sender to get a handle to the Grid Object opposed to .data("KendoGrid") from the onClose of the popup this is what fixed it for me. I'm still trying to get my filters to work though after the pop up closes.
I am trying to figure out how to format individual values in a Kendo grid bound to a dynamic data source.
The challenge is that the columns are not fixed and the format is not even consistent throughout the column.
From what I can tell Kendo supports format strings at the column level using
columns:[{field:Name,format:{1:c}}]
However this solution is not suitable since it sets the format for the entire column.
I have also found a template based solution that lets you format your data manually using notation like this
columns:[{field:Name,template: "#= kendo.toString(kendo.parseDate(SomeDate, 'yyyy-MM-dd')}]
However, again this is too hard coded for me since it assumes a single type in the column.
I am looking for a way to specify in the data source itself what the type a value is. Is that possible?
Something like this
data = [{field:SomeField,Value:4,Format:{1:c}}]
It turns out you can solve this with a custom template. This will run formatting on every value.
for (var c = 0; c < grid.Cols.length; c++) {
grid.Cols[c].template = "#= FormatValue(" + grid.Cols[c].field + ")#";
}
function FormatValue(value) {
return kendo.toString(value, "c0")//currency formatting
}
If you are going to bind dynamic data source then there in no need to format value in column or feilds. It will automatic adjust with the data.
You should use this pattern
fields: {
EventID: { editable: true, nullable: false },
EventName: { validation: { required: true} },
UserID: { validation: { required: true} },
EventDate: { validation: { required: true} },
EventTimeFrom: { validation: { required: true} },
EventTimeTo: { validation: { required: true} }
}
columns: [
{ field: "EventID", title: "Event ID" },
{ field: "EventName", title: "Event Name" },
{ field: "UserID", title: "User ID" },
{ field: "EventDate", title: "Event Date" },
{ field: "EventTimeFrom", title: "Start Time" },
{ field: "EventTimeTo", title: "End Time" },
],