I am using jqgrid for basic CRUD functionality on an asp.net mvc page. My requirement is that I want to show a dropdown on edit popup that will only contain static values e.g New and Existing. All the examples I find use editoptions with dataurl and buildselect method. Is there a way that I can build select list using static values when grid opens?
Thanks
It's very simple. You need just use value property of editoptions. Something like
{ name: "myColName", width: 100, editable: true, edittype: "select",
editoptions: { value: "New:New;Existing:Existing", defaultValue: "New" }}
or if you use toolbar searching additionally then
{ name: "myColName", width: 100, editable: true, edittype: "select", stype: 'select',
editoptions: { value: "New:New;Existing:Existing", defaultValue: "New" },
searchoptions: { sopt: ['eq', 'ne'], value: ':Any;New:New;Existing:Existing' }}
Related
In my FullCalendar rendering I use the dayGrid view to create a schedule. When populating this calendar view (schedule) with events, every event is the same height, regardless of the duration of the event. I would like to make the events bigger or smaller based on their duration, similar to what the FullCalendar demo shows for other calendar views. Is this possible to achieve using the dayGrid View?
My Calendar:
FullCalendar Desired Styling:
In v5 find in the CSS file .fc-h-event and add the height option. This is mine:
.fc-h-event { /* allowed to be top-level */
display: block;
height: 70px !important;
border: 2px solid #3788d8;
border: 2px solid var(--fc-event-border-color, #3788d8);
background-color: #3788d8;
background-color: var(--fc-event-bg-color, #3788d8)
}
I ended up finding a way to accomplish my goal. The CSS styling for the calendar rendering can be modified right in the html page using:
<style>
.fc-day-grid-event > .fc-content {
white-space: normal;
}
</style>
This allows the text of the event title to wrap onto multiple lines. Without modifying this styling the event text (title) just cuts off anything longer than the width of the event box.
Once this styling is in place, I can just insert newline characters ('\n') into my html in order to expand the size of the box. Because I am controlling my events from a database, it is easy to simply add newline characters into the title string corresponding to the desired size of the event.
Here is what my calendar looked like before:
And here are some sample events to recreate the image:
events: [
{
id: 'event1',
title: 'Event 1- 5h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
Here is what the calendar looks like using my solution:
And the simple modification to the events needed for this solution:
events: [
{
id: 'event1',
title: 'Event 1- 5h' + '\n\n\n\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h' + '\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
my jgGrid appears correctly, but the icons on the Navigator button are not appearing. There is an outline to the buttons and a tooltip when you hover over them, but no icon on the button, like a "+" or trash bin.
Also, is there a way to hide certain buttons and not others, like remove the add record butoon, but leave the delete record button.
I have followed the instructions relating to the style sheets and language files.
Below is the code that creates a grid:
// create the grid
$(gridName).jqGrid({
// server url and other ajax stuff
url: '/Admin/Blogs',
datatype: 'json',
mtype: 'GET',
height: 'auto',
shrinkToFit: false,
// columns
colNames: colNames,
colModel: columns,
// pagination options
toppager: false,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
// row number column
rownumbers: true,
rownumWidth: 40,
// default sorting
sortname: 'PostedOn',
sortorder: 'desc',
// display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false }
});
$(gridName).navGrid(pagerName,
{
// settings
cloneToTop: true,
search: false
},
{}, // add options
{}, // edit options
{} // delete options
);
Make sure your page got jquery-ui.js and jquery.ui.theme.css with icons images in your css/images folger.
About hiding some buttons:
$(gridName).navGrid(pagerName,
{edit:false,search:false,del:true,add:true,view:false,refresh:false,cloneToTop: true},
// navigator options ( where true = show / false = hide )
{}, // add options
{}, // edit options
{} // delete options
);
if you will add custom buttons, just give them id and hide :
$('#buttonId').hide();
By adding jquery.ui.theme.css with the theme images folder everything worked.
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.
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/),
Anyone know how to attach a renderer to a grid grouping header in ExtJS4? In ExtJS3 I have the following working code, which returns 'Past' if an event has been completed ('Y'), or 'Upcoming' if not completed:
function fmt_group_heading(groupVal) {
if (groupVal === 'Y') {
return 'Past';
} else {
return 'Upcoming';
}
}
// create the Grid
var fitGrid = new Ext.grid.GridPanel({
store: fitGroupingStore,
columns: [
{header: "ID", dataIndex: 'id', hidden: true },
{header: 'Event', width:320, dataIndex: 'event',
renderer:fmt_event_description},
{header: 'Events', dataIndex: 'completed', hidden: true,
renderer: fmt_group_heading }
],
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
hideHeaders: true,
view: new Ext.grid.GroupingView({
groupRenderer: 'completed',
forceFit: true
})
});
ExtJS4 provides grid grouping but I'm not understanding how to change the output of the group text. The 'groupHeaderTpl' attribute of Ext.grid.feature.Grouping seems to only take the raw field value as read from the store.
this.groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {completed}'
});
// create the Grid
this.fitnessGrid = new Ext.grid.Panel({
store: this.fitnessEventStore,
features: [this.groupingFeature],
// etc.......
try smth like this:
groupHeaderTpl:
'{[fmt_group_heading(values.name)]}
({rows.length}
Item{[values.rows.length > 1 ? "s" :
""]})'
The groupHeaderTpl requires you to use {name} when composing the template. It will only use the value provided by the groupField.
See the Docs.
Try this:
groupHeaderTpl: '{[values.rows[0].completed]}'