This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
In my jqGrid, I want to have empty values in my grid...
Instead I am getting 1/1/0001
my model types for the dateTime are all nullable.
Am I missing something???
this is the code...
public DateTime? DischargeDateTime { get; set; }
What do you guys recommend?
tableToGrid("#frTable", {
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
height: '400',
gridview: true,
shrinkToFit: false,
autowidth: true,
colNames: ['Edit',
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth',
'Completed Pathway',
'Completed Pathway Reason',
'PCP Appointment',
'Specialist Appointment',
'Admit Date',
'Discharge Date',
'Discharge Disposition',
'Discharge To',
'Discharge Advocate Call',
'Home Healthcare',
'Safe Landing Accepted',
'PCP Name',
'PCP Phone',
'PCP Appointment Location',
'Specialist Name',
'Specialist Phone',
'Specialist Appointment Location',
'Comments',
'Patient Room Phone',
'Phone',
'Payor',
'MRN Type'
],
colModel: [
{ name: 'Edit', width: 95, align: 'left' },
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left' },
{ name: 'Completed_Pathway', width: 125, align: 'left', editOptions: {value:"1:Yes;0:No"} },
{ name: 'Completed_Pathway_Reason', width: 165, align: 'left' },
{ name: 'PCP_Appointment', width: 115, align: 'left' },
{ name: 'Specialist_Appointment', width: 125, align: 'left' },
{ name: 'Admit_Date', width: 185, align: 'left' },
{ name: 'Discharge_Date', width: 185, align: 'left' },
{ name: 'Discharge_Disposition', width: 155, align: 'left' },
{ name: 'Discharge_To', width: 85, align: 'left' },
{ name: 'Discharge_Advocate_Call', width: 155, align: 'left' },
{ name: 'Home_Health_Care_Accepted', width: 105, align: 'left' },
{ name: 'Safe_Landing_Accepted', width: 165, align: 'left' },
{ name: 'PCP_Name', width: 85, align: 'left' },
{ name: 'PCP_Phone', width: 85, align: 'left' }, // formatter: formatPhoneNumber,
{ name: 'PCP_Appointment_Location', width: 185, align: 'left' },
{ name: 'Specialist_Name', width: 195, align: 'left' },
{ name: 'Specialist_Phone', width: 135, align: 'left' }, //, formatter: formatPhoneNumber
{ name: 'Specialist_Appointment_Location', width: 185, align: 'left' },
{ name: 'Comments', width: 185, align: 'left' },
{ name: 'Patient_Room_Phone', width: 135, align: 'left' }, //, formatter: formatPhoneNumber
{ name: 'Phone', width: 125, align: 'left' }, //, formatter: formatPhoneNumber
{ name: 'Payor', width: 155, align: 'left' },
{ name: 'MRN_Type', width: 135, align: 'left' }
]
});
There are indeed several nulls in my database that come back... Not sure why this doesn't work...
Currently trying a UIHint...
#if (Model == null){
<text></text>
}else{
<text></text>
}
except now everything is being displayed incorrectly
Ok... I know what I was doing wrong. In my repository layer, I forgot I had a method that would take the string dates that were being pulled pack, parsed, and if the value was null I would set the minimum date.
I have now changed that so that it returns a null, or a parsed date...
public static DateTime? ValueOrMin(string value)
{
if (string.IsNullOrWhiteSpace(value)) return null;
return DateTime.Parse(value);
}
Thanks.
Related
i want to show the data in total of 3 rows with the v-for loop
this is the way will be displayed
whats happening is if more data comes in 4th row will be created but i want the data to be displayed only in these 3 rows and on click the next button show the data. i have tried computed properties to send data in chunks but nothing works. Kindly put some light on it
backgrounds:[
{
route:'/events',
img:'/images/events.png',
caption:'Veranstaltungen'
},
{
route:'/',
img:'/images/bilder.png',
caption:'Bildergalerie'
},
{
id:103,
route:'companies',
img:'/images/markenbetriebe.png',
caption:'Vulkanland Markenbetriebe'
},
{
id:101,
route:'companies',
img:'/images/gastro.png',
caption:'Gastronomiebetriebe'
},
{
id:102,
route:'companies',
img:'/images/naechtigungen.png',
caption:'Nächtigung'
},
{
id:115,
img:'/images/buschenschank.png',
caption:'Buschenschenken'
},
{
route:'/',
img:'/images/sehenswuerdigkeit.png',
caption:'Sehenswürdigkeiten'
},
{
id:104,
route:'companies',
img:'/images/bauern.png',
caption:'Direktvermarkter'
},
{
id:106,
route:'companies',
img:'/images/touriteninfo.png',
caption:'Touristeninformation'
},
{
id:109,
route:'companies',
img:'/images/kulture.png',
caption:'Kulturhäuser'
},
{
id:107,
route:'companies',
img:'/images/sport.png',
caption:'Sport und Spiel'
},
{
id:113,
route:'companies',
img:'/images/handel.png',
caption:'Handelsbetriebe'
},
{
id:114,
route:'companies',
img:'/images/gewerbebetriebe.png',
caption:'Gewerbebetriebe'
},
{
route: '/',
img:'/images/Button-1.png',
caption:'Schaukästen'
},
]
This is the code for a naive and quick 3 elements per row display
<template>
<section class="three-elements-per-row">
<div
v-for="background in backgrounds"
:key="background.route"
class="element"
>
{{ background.caption }}
</div>
</section>
</template>
<script>
export default {
data() {
return {
backgrounds: [
{
route: '/events',
img: '/images/events.png',
caption: 'Veranstaltungen',
},
{
route: '/',
img: '/images/bilder.png',
caption: 'Bildergalerie',
},
{
id: 103,
route: 'companies',
img: '/images/markenbetriebe.png',
caption: 'Vulkanland Markenbetriebe',
},
{
id: 101,
route: 'companies',
img: '/images/gastro.png',
caption: 'Gastronomiebetriebe',
},
{
id: 102,
route: 'companies',
img: '/images/naechtigungen.png',
caption: 'Nächtigung',
},
{
id: 115,
img: '/images/buschenschank.png',
caption: 'Buschenschenken',
},
{
route: '/',
img: '/images/sehenswuerdigkeit.png',
caption: 'Sehenswürdigkeiten',
},
{
id: 104,
route: 'companies',
img: '/images/bauern.png',
caption: 'Direktvermarkter',
},
{
id: 106,
route: 'companies',
img: '/images/touriteninfo.png',
caption: 'Touristeninformation',
},
{
id: 109,
route: 'companies',
img: '/images/kulture.png',
caption: 'Kulturhäuser',
},
{
id: 107,
route: 'companies',
img: '/images/sport.png',
caption: 'Sport und Spiel',
},
{
id: 113,
route: 'companies',
img: '/images/handel.png',
caption: 'Handelsbetriebe',
},
{
id: 114,
route: 'companies',
img: '/images/gewerbebetriebe.png',
caption: 'Gewerbebetriebe',
},
{
route: '/',
img: '/images/Button-1.png',
caption: 'Schaukästen',
},
],
}
},
}
</script>
<style scoped>
.three-elements-per-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.element {
background: seagreen;
border: 2px solid paleturquoise;
}
</style>
And this is how it looks
Quick guide on CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/
That one is maybe a more flexible solution overall (more responsive).
I have used the ExtJS properties of cls, bodyCls, componentCls but not getting the result.
For an example:
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyPadding: 10,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});
Now CSS:
.form {
background-color:orange !important;
}
I wanted to get background color orange but I am not getting the result what I want.
ANY HELP WOULD BE GREAT APPRECIATED
You need to apply class like below (need to apply background to the body of form):
.form .x-panel-body-default {
background-color:orange !important;
}
Working Fiddle
Hope this will help/guide you.
You can add css like this to Panel config,
Like bodyStyle: 'background: orange !important', in your panel
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyStyle: 'background: orange !important',
bodyPadding: 10,
defaultType: 'textfield',
In my extjs6 grid I have column headers that don't fit in the space. How do I do a word wrap in the column header only? This is what I have tried and is not working.
xtype: 'grid',
title: 'Daily Performance',
itemId: 'performanceAccountDailyGridID',
bind: {
store: '{myDailyPerformanceAccountStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
height: 400,
width: 800,
columns: [
{
header: 'Filedate',
dataIndex: 'filedate',
flex: 1
},
css
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
You CSS selector should be nested till .x-column-header-text which contains the column header text.Just giving white-space: normal is sufficient.
So your CSS should be:
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
Working Example:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'region'],
data: [{
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Arizona'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alabama'
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
width: 400,
cls: 'custom-gridPerformance',
renderTo: Ext.getBody(),
columns: [{
text: 'Name of zoro of life style',
dataIndex: 'name',
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
}, {
text: 'State',
dataIndex: 'region',
}],
});
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
I have a grid with very small columns with row filter, which cause them to have very small text-box. so I used
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
but when I define inputWidth to enlarge the text field the filter operator does not move over and in fact cover up the partial space of the text-box. Therefore, I was wondering if there is a way to move the filter operator over or preferably over to the title header, like the columnMenu filter icon. Any help would be greatly appreciated, thanks.
I took the following example from: http://demos.telerik.com/kendo-ui/grid/filter-row
and modified width and inputwidth of orderID
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read:"http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[{
field: "OrderID",
width: 100,
filterable: {
cell: {
inputWidth: 65
}
}
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains"
}
}
},{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}]
});
});
hii Guys!!!!.
In MyJqgrid Background color of Selected Row is not changing to 'yellow' whereas while Hovering It is changing.I want to change the color to yellow on slection.
<script type="text/javascript">
$(function () {
$("#UsersGrid").jqGrid({
url: 'getGriddahico.ashx',
datatype: 'json',
height: 250,
colNames: ['id', 'username', 'ordinal', 'authcode', 'extension', 'trunk', 'dialnumber', 'dialdate', 'dialtime', 'duration', 'destination', 'price', 'toc'],
colModel: [
{ name: 'id', index: 'id', width: 100, sortable: true, align: 'center' },
{ name: 'username', width: 100, sortable: true, align: 'center' },
{ name: 'ordinal', width: 100, sortable: true, align: 'center' },
{ name: 'authcode', width: 100, sortable: true, align: 'center' },
{ name: 'extension', width: 100, sortable: true, align: 'center' },
{ name: 'trunk', width: 100, sortable: true, align: 'center' },
{ name: 'dialnumber', width: 100, sortable: true, align: 'center' },
{ name: 'dialdate', width: 100, sortable: true, align: 'center' },
{ name: 'dialtime', width: 100, sortable: true, align: 'center' },
{ name: 'duration', width: 100, sortable: true, align: 'center' },
{ name: 'destination', width: 100, sortable: true, align: 'center' },
{ name: 'price', width: 100, sortable: true, align: 'center' },
{ name: 'toc', width: 150, sortable: true, align: 'center' }
],
rowNum: 100,
rowList: [100, 200, 300],
pager: '#UsersGridPager',
sortname: 'username',
viewrecords: true,
ignorecase:true,
sortorder: 'asc',
autowidth: true,
toppager: true,
height: '100%'
});
$("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false, search: false });
jQuery("#UsersGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
});
</script>
use css
.ui-jqgrid-btable .ui-state-highlight { background: yellow; }
or
.ui-jqgrid .ui-state-highlight { background: yellow; }