I'm using codeingniter, doctrine and KendoUI on a project and I've come across this problem:
in my DB I have 2 columns of a DB but I want to show them in only one column in the KendoUI grid, so far I've been able to show them, but when I try to create a new row or edit an existing one I can't because the in the template I created I don't know how to specify the fields so I can edit and create rows, I pasted a chunk of the code and if you see in the 4th column is the problem that I have.
Thanks in advance.
schema: {
model: {
id: "idAction",
fields: {
actionId: { editable: false },
strategy: {field:"strategy", type:"number"},
actionName: { validation: { required: true } },
actionDescription: { validation: { required: true }, type:"string" },
actionEstimatedTimeQuantity: {validation: {required:true}, type:"number"},
actionEstimatedTimeUnit: {validation:{required:true}},
actionEstimatedCost:{validation:{required:true},type:"number"},
actionCreatedBy: { editable:false },
actionCreatedDate: { editable:false, type:"date" }
}
}
}
And in my columns I have
columns: [
{
field: "strategy",
width: "180px",
title: "Estrategia a usar",
values: strategies
},
{
field: "actionName",
width: "100px",
title: "Accion"
},
{
field: "actionDescription",
width: "200px",
title: "Descripción"
},
{
field: "actionEstimatedTimeQuantity - actionEstimatedTimeUnit"
template: "#= actionEstimatedTimeQuantity # - #= actionEstimatedTimeUnit #",
width: "150px",
title: "Tiempo Estimado"
},
{
field: "actionEstimatedCost",
width: "150px",
title: "Costo Estimado"
},
{
field: "actionCreatedBy",
width: "100px",
title: "Creada Por"
},
{
field: "actionCreatedDate",
width: "150px",
title: "Fecha de Creación",
format: "{0:MM/dd/yyyy}"
},
Try making a new object 'model' that represents your target data. Populate it and parse it in a controller using whatever logic you specify. Map this new model to your grid.
My team does this for every data element, essentially turning them into business objects, even if it is a direct 1 to 1 relationship.
I think you want to display two Numeric columns as a string combination "TimeQuantitiy - TimeUnit". In this case, better you add one more field of type string to the datasource of your kendo grid.
from Server: send one more column of type string "a-b"
at client: display it in grid.
Editing: You have two choices -
Use one textbox which accepts input string as "a-b"
Use two textboxes seperated with "-" (you might need to define a custom editor for you column in this case"
I would like to apologize for being more theoretical, I would try to upload some programming if possible.
Related
I've started building a form in react-jsonschema-form and i'm having a lot of difficulty changing it visually.
The form is an array and it has a button to add and remove a set of input boxes.
I've build it as a component in a test project which has no css applied to it so far.
The form will render as a tiny box where there is no room for the buttons (they are cut of as shown below in images).
a single element
a second element
How its supposed to look on react-jsonschema-form playground
A key difference between my array and the sample array is that i'm having two text input elements per array element. I dont know if this could cause it.
I do need to have two input values as its a group of data that is related, and both is required.
This is my code:
//json schema
const schema = {
type: "object",
properties: {
listOfNumbers: {
title: "opret ledig nummerserie",
type: "array",
required: ["nr_fra", "nr_til"],
items: {
properties: {
nr_fra: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
nr_til: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
},
},
},
},
};
//uiSchema
const uiSchema = {
listOfNumbers: {
"ui:options": {
orderable: false,
},
items: {
//nr_fra: { "ui:options": { label: false } },
//nr_til: { "ui:options": { label: false } },
},
},
}
I'm applying no css to the below form.
// Form
<Form
schema={schema}
uiSchema={uiSchema}
formData={this.state.formData}
onSubmit={(formOutput) => this.handleSubmit(formOutput)}
transformErrors={transformErrors}
/>
I've spent a day and a half on trying to strongarm this, but i could really use some help on how to proceed.
It seems it was css inputs that was needed to solve this.
The below will expand the elements to their proper size/form.
Posting this here for posterity, as this is not accurately documented.
<div className="col-md-offset-3 col-md-6">
<Form schema={schema}
uiSchema={uiSchema}>
</Form>
</div>
how can I use jsgrid to present data on a table like the one jsgrid uses
i tried retrieving data as said by this documentation
https://firebase.google.com/docs/database/rest/retrieve-data#section-rest-reading-data-get
$.getJSON("/*url of databse*/.json",
function(data){
clients = data;
console.log(clients);
});
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Email", type: "number", width: 50 },
{ type: "control" }
]
});
is there anyway to present data on a table like in jsgrid?
jsgrid works with any REST service, firebase is not an exception.
In your example data loading happens asynchronously, so when grid is initialized clients data is not loaded yet. To fix the problem initialize grid on done of the $.getJSON:
$.getJSON("/*url of databse*/.json").done(function(data)
// initialize grid here
)
Worth to note that setting grid data with data config option is for static scenario. More common way is to define the controller (http://js-grid.com/docs/#grid-controller).
I want to display only 4 columns, but when I bind the grdOptions.Data=entity,
then all fields in entity are converted into a column. Can we prevent it from autogenerating all the columns?
As per the first page of documentation:
... if you wanted to configure the core ui-grid, you might choose to set some options and columns on your grid (the documentation for these is found in gridOptions and columnDef.
And here's the first example:
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'field1', enableSorting: false },
{ name: 'field2' },
{ name: 'field3', visible: false }
]
};
I would like to have a DateTime column in my Kendo UI grid. I've searched on forums, but I didn't find a solution for this problem.
My field for the TimeStamp column is defined such as:
TimeStamp: { type: "date" },
The records are showing data according to the format specified in the template. But I would like to be able to filter my data source with greater precision. However, currently my filter is only able to filter by date. Is there a way to filter by DateTime instead of filtering only by date?
I was informed that this is not possible currently with Kendo UI. I know this is bad news, but this is the answer to my question.
you can achieve it to use template on kendo grid column, create one more property and pass that property in template in kendo grid column.
like
timeStamp: { type: "date" },
timeStamp1: { type: "String" },
pass timestamp1 in template like
{
title: "Last Login",
width: 80,
template: '<span>#= timeStamp1#</span>',
field: "timeStamp",
type: "date"
},
its work fine according your requirement and sorting will work fine like database sorting.
Its Posible:
DeliveredDate: {
type: "datetime",
editable: false,
nullable: false
}
And the template is:
{
field: "DeliveredDate",
title: "Delivered Date",
template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
width: 60,
groupable: false,
sortable: true,
filterable: true
}
The easiest Way to us the TimeStamp format data from your Database for KendoGrid.
In your HTML file, use the data from DB as shown.
<kendo-grid [data]="gridData">
<kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
[width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
[style]="{'background-color': '#36455a','color': '#fff'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
</ng-template>
</kendo-grid-column>
</kendo-grid>
PS: gridData is my var that stores Data from DB. and CreatedAt is one of the fields.
I’m trying to create a Datagrid with editable cells.
As I am using dijits for the editable cells I try to set constraints within the “widgetProps” property of the layout, like this:
widgetProps: {
required: true,
constraints: {
min: 0,
max: 100,
places: '0,2'
}
}
Here required: true works as expected, whereas the constraints property is not working at all.
An example here: http://jsfiddle.net/LjVmJ/ where I've tried to use constraints both in a NumberTextBox and a DateTextBox.
Bug in Dojo or am I missing something?
From Oliver on the dojo mailinglist:
It should be "constraint", and it should be put outside "widgetProps".
Which solves the problem.
I found a ‘dirty’ solution to this issue:
First declare my own NumberTextBox with the required constraints:
dojo.declare(
"my.custom.PercentageNumberTextBox",
[dijit.form.NumberTextBox],
{
postCreate: function(){
this.inherited(arguments);
this.set('constraints', {min:0,max:100, places:'0,2'});
}
});
Then I’m using it as the widgetClass in the grid structure:
{
field: 'employmentPercentage',
name: 'Employment %',
type: dojox.grid.cells._Widget,
widgetProps: { required: true },
widgetClass: my.custom.PercentageNumberTextBox,
editable: true,
width: '150px'
}
This is a workaround for now (full example here: http://jsfiddle.net/LjVmJ/2/),