kendo inline cell edit not support for datetime format. I need "dd/MMM/yyyy" data format but kendo grid shows "the filed date must be a date" error. can you please advice me to what to do
You can use a custom editor to do this.
References:
Grid Custom Editing
DatePicker.format
Date Formatting
The code would look something like this (not tested, but it should be close enough to give you the right idea):
var customDateEditor = function (container, options) {
$('<input />')
.appendTo(container)
.kendoDatePicker({
format: "dd/MMM/yyyy"
});
};
$("#grid").kendoGrid({
...
columns:[
{
field: "myDate",
format: "dd/MMM/yyyy",
editor: customDateEditor
}
]
});
Related
Good day,
I have a datatable with the jQuery plugin that makes it editable and transform to text all the table rows.
Need to create a dropdown menu to select and store on database what is selected.
Everything is fine, since the plugin have an option to create a row with select options, the problem here is that the field that i have on the database is based on VARCHAR and the plugin only stores data with ENUM on the selected dropdown field.
So i cannot change the database field to ENUM because its going to delete or alter the already exixting data and could be a problem.
Example of what i see when i click on EDIT and see the dropdown options:
When i hit on SAVE button it shows this on the database:
This happens because the column type on the database is VARCHAR and the plugin needs it to be ENUM to read the data as text.
This is the code to draw the table and the edit plugin data:
$(document).ready(function(){
var dataTable = $('#tabla_clientes').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
},
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fectch.php",
type:"POST"
}
});
$('#tabla_clientes').on('draw.dt', function(){
$('#tabla_clientes').Tabledit({
url:'action.php',
deleteButton: false,
autoFocus: false,
buttons: {
edit: {
class: 'btn btn-sm btn-primary',
html: '<span class="glyphicon glyphicon-pencil"></span>   Editar',
action: 'edit'
}
},
dataType:'json',
columns:{
identifier : [0, 'id_customer'],
editable:[[1, 'customerID'], [2, 'RFC'], [3, 'firstname'], [4,'lastname'],[5,'email'],[6, 'tipo_cliente','{"1":"CONTADO","2":"CREDITO"}']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
}
});
});
I already did some research on the internet but i cannot find anyone with a solution or with this problem.
Like i said, i cannot simply change the field to ENUM because there is a LOT of information that may be changed or deleted because of the type change.
Does anyone know a solution to store the value as text with the VARCHAR type when selecting the dropdown info?
Thanks for the time and patience. Have a excelent day.
I already found a workaround very simple for this.
Instead of adding directly the value as number on database.
Added an IF to compare the number and store text on a variable.
$tipo_cliente = $_POST['tipo_cliente'];
$sitio = $_POST['sitio']
if ($tipo_cliente == 1) {
$tipo_cliente = 'CONTADO';
} else
{
$tipo_cliente = 'CREDITO';
}
This looks to be answered many different times but I can't seem to get it working with my implementation. I am trying to format and limit the data in a sap.m.Input element. I currently have the following:
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: {
path: '/amount',
type: 'sap.ui.model.type.Currency'
}
});
The first problem is that it kind of breaks the data binding. When I inspect the raw data (with Fiddler) submitted to the server it is an array like this:
"amount": [1234.25,null]
The server is expecting a single number and as such has issues with the array.
When I use the following, the binding works as desired but no formatting is performed.
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: '{/amount}'
});
The second problem is that the data entered is not limited to numbers.
I have tried using sap.m.MaskedInput instead but I don't like the usage of the placeholders because I never know the size of the number to be entered.
And lastly, it would be nice if when focus is placed on the input field, that all formatting is removed and re-formatted again when focus lost.
Should I be looking into doing this with jQuery or even raw Javascript instead?
Thank you for looking.
the array output is a normal one according to documentation. So you need to teach your server to acccept this format or preprocess data before submission;
this type is not intended to limit your data input;
good feature, but ui5 does not support this, because the Type object has no idea about control and it's events like "focus" it only deals with data input-output. So you have to implement this functionality on your own via extending the control or something else.
I would suggest using amount and currency separately. It's likely that user should be allowed to enter only valid currency, so you can use a combobox with the suggestions of the available currencies.
So, after much work and assistance from #Andrii, I managed to get it working. The primary issue was that onfocusout broke the updating of the model and the change event from firing. Simply replacing onfocusout with onsapfocusleave took care of the issues.
The final code in the init method of my custom control:
var me = this;
var numberFormat = sap.ui.core.NumberFormat.getCurrencyInstance({maxFractionDigits: 2});
me.addEventDelegate({
onAfterRendering: function() {
// for formatting the figures initially when loaded from the model
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
},
onfocusin: function() {
// to remove formatting when the user sets focus to the input field
me.bindValue(me.getBindingPath('value'));
},
onsapfocusleave: function() {
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
}
});
I know this has been asked before but I wanted to ask it in my own way with more clarification. I am trying to conditionally set the background of a td that is created using a webGrid in ASP.NET MVC. I don't see a good way to do this.
So far what I have come up with is this:
grid.Column("DATT", header: "Date", format: (item) => new MvcHtmlString
(
(item.isCurrentlyBackordered)
?
"<div style=\"background-color: red\">Item Backordered</div>"
:
""
)),
This is an okay solution but I would like a more clean look because the webgrid default has a small padding in the table cell so the div won't expand completely to the size of the cell either.
Is there a way to edit the td in any way? I know I can change the background and other style attributes using jquery or javascript but I don't like the idea of having doing duplicate work to first build the table on the server, then on the client side iterate over it again conditionally changing the colors when this should have been completed with the first iteration.
Hope the following answer will help you
grid.GetHtml(columns: grid.Columns(grid.Column(columnName: "DATT", header: "Date",format: #<text> #{
if (#item.isCurrentlyBackordered)
{
<span>Item Backordered</span>
<script>
$("tr:contains('Item Backordered')").css("background-color", "yellow");
</script>
}
}</text>)))
Also you can write this in a common JQuery too
grid.Column("DATT", header: "Date", format: (item) => new MvcHtmlString
(
(item.isCurrentlyBackordered)
?
"<span>Item Backordered</span>"
:
""
)),
JQuery
<script type="text/javascript">
$(function () {
$("tr:contains('Item Backordered')").css("background-color", "yellow");
})
</script>
With the help of Golda's response and here
I was able to create an elegant solution. This solution uses JavaScript/JQuery, as it doesn't seem possible to do it without it but using (to me) a cleaner solution than what I had came across. What I did in the model class (type for List<>()) was add a property that refers to itself and returns an instance cast to its interface like so:
public iTrans This
{
get
{
return this;
}
}
I did this because the webGrid seems to only allow access to the properties and not methods; regardless of access level.
Then in that same model I have a method which will conditionally attach markup for a hidden input field to the data string and return it as an MvcHtmlString object:
public MvcHtmlString htmlColorWrapper(string cellStr, string hexColor = "#ccc")
{
if (isOnBackorder)
{
cellStr = cellStr + "<input type='hidden' class='color' value='" + hexColor + "'/>";
}
return new MvcHtmlString(cellStr);
}
And in the markup (partial view) I make my grid.Column call:
grid.Column("Date", header: "Date", format: (item) => item.This.htmlColorWrapper(item.Date.ToString("MM/dd/yyy"))),
Then I create the JavaScript function(s):
window.onload = function () {
SetFeaturedRow();
};
function SetFeaturedRow() {
$('.color').each(function (index, element) {
$(element).parent().parent().css('background-color', $(element).val());
});
}
The window.onload is needed to point to the SetFeaturedRow() function to set the row colors at page load, the function name, "SetFeaturedRow" is stored in the ajaxUpdateCallback property through the webgrid constructor arguments: new WebGrid(Model ..... ajaxUpdateCallback: "SetFeaturedRow"); Or it can be set through the WebGrid reference, ref.ajaxUpdateCallback = "SetFeatureRow"
This will be used during any ajax call the WebGrid class will make. So for example if there are multiple pages to the webgrid each selection is an ajax call and the row colors will need to be re-updated.
Hopefully this helps someone.
Is it possible to have a free text search box on top of a dojo enhancedgrid, which I can type in text and it immediately filter out rows that do not contain the text?
I am aware of the filter plugin and that is not what I prefer.
Thanks so much!
If depends on how you grid view is bind. If it's bind to a ItemFileReadStore you can easily filter it:
store.fetch({ query: { filterCol: filterValue }, onComplete: function completed(items,findResult) {
store = new dojo.data.ItemFileReadStore({ data: { items: items, identifier: 'YourStoreIdentifier'} });}
});
grid.setQuery({name: 'a%'})
will call server on a JsonRest store with query string name=...
How to show a checkbox in a dojo datagrid?
I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:
{
name: "is awesome?",
width: "auto",
styles: "text-align: center",
type: dojox.grid.cells.Bool, editable: true
}
Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)
Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4
You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/
You can use something like this, with Json
HTML
<table id="myGrid" dojoType="dojox.grid.DataGrid"
clientSort="true" autoHeight="true" autoWidth="true">
<script type="dojo/method">
showFields();
</script>
</table>
DOJO
showFields:function () {
dojo.xhrPost({
url:"/getFields.do",
timeout:2000,
handleAs:"json",
load:dojo.hitch(this, "displayInGrid")
});
},
displayInGrid:function (jsonResult) {
var dataStore = new dojo.data.ItemFileReadStore(
{ data:jsonResult }
);
var checkboxLayout = [
[
{name:'ID', field:"id" },
{name:'Value', field:"id", formatter:this.addCheckBox}
]
];
var grid = dijit.byId("myGrid");
grid.setStructure(checkboxLayout);
grid.setStore(dataStore);
},
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},
If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php
If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
From markup, do like this for the desired result:
<th field="booleanField" cellType="dojox.grid.cells.Bool" editable="true">Checkbox field</th>