My grid has 5 data columns and 1 command column (update/delete)
the column separator between command column and last data column is missing, making everything shift when entering inline edit mode.
Any ideas what am I doing wrong ?
this is the grid's view code:
<%=
Html.Telerik().Grid<ActivityPOCO>()
.Name("ActivityGrid")
.DataKeys(dataKeys =>
{
dataKeys.Add(e => e.ActivityID);
}
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
.DataBinding(dataBinding =>
{
dataBinding.Ajax() //Ajax binding
.Select("SelectActivityGridAjax", "Activity")
.Insert("InsertActivityGridAjax", "Activity")
.Update("UpdateActivityGridAjax", "Activity"
.Delete("DeleteActivityGridAjax", "Activity");
})
.Columns(c =>
{
c.Bound(o => o.ActivityID).Title("ID").ReadOnly(true).Width(30);
c.Bound(o => o.ActivityName).Title("NAME").Width(130);
c.Bound(o => o.ActivityTimeHours).Title("TIME").Width(50);
c.Bound(o => o.Cost).Title("COST").Width(100);
c.Bound(o => o.WarrentyMonths).Title("WARRENTY");
c.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.Image);
commands.Delete().ButtonType(GridButtonType.Image); ;
}).Width(180).Title("COMMAND");
}).Editable(editing => editing.Mode(GridEditMode.InLine))
%>
Well, it looks like a problem in the RTL CSS:
I've changed the .t-last-header{border-right-width:1;} from 0 and got the separator.
Still looking for answer for the grid rows, especially in edit mode...
Related
Since Cypress can't easily use async/await, in order to use multiple chained values, right now I'm doing this:
const getScrubPosition = () => cy.getState().its('meta').its('scrubPosition');
const getScrollBar = () => cy.getByTestId('SCROLL_BAR').then(([bar]) => bar);
const getGutter = () => cy.getByTestId('GUTTER').then(([bar]) => bar);
// my workaround
const getScrubScrollGutter = () => getScrubPosition().then(initialPos =>
getScrollBar().then(([bar]) =>
getGutter().then(([gutter]) =>
({ initialPos, bar, gutter }))));
it('is ridiculous', () => {
getScrubPosition().then(initialPos => {
getScrollBarWidth().then(initialWidth => {
getScrollContainerWidth().then(containerWidth => {
// do something with initialPos, initialWidth, and containerWidth
});
});
});
it('>90 frames, with current series', () => {
clickSeries(1, 3); // x2x4, 94 frames, including pending
getScrubScrollGutter().then(({ initialPos, bar, gutter }) => {
expectPendingShown(true);
expectScrollBar();
// the bar shouldn't be wider than the gutter
expect(bar.offsetWidth).to.be.lessThan(gutter.offsetWidth);
// the right of the bar should be aligned with the right of the gutter
expect(rightEdgeOf(bar)).to.equal(rightEdgeOf(gutter));
debugger
// the bar shouldn't be to the left of the gutter
expect(bar.offsetLeft).to.be.greaterThan(gutter.offsetLeft);
});
There MUST be a better way to do this, right? The github issue mentioned above talks about things like
cy.get('something')
.then(x => doSomethingTo(x))
.then(y => console.log('please help'))
etc. But I'm having a hard time understanding it -- or, if I do understand it, it doesn't actually pass all the values along to the further contexts (i.e., I don't think you can use x in the third line of what I just wrote.)
What about Promise.all?
Yes, I tried that. Please only give a Promise.all related answer if you have actually been able to use it in Cypress.
Thanks.
I am using haml.erb file. I would like to add space between two buttons in UI. Now the two buttons are appearing one after one without space. How can i do?
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
you can add margin left on second button. you can add class on second button e.g
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success left-margin'
and then you can add css in your haml file
:css
.left-margin { margin-left: 2px }
Or you can add inline css to one of these buttons.
As you are using Bootstrap
Wrap your buttons in a div with class='col-xs-3' (for example).
Add class="btn-block" to your buttons.
Note: No need to use extra css unnecessary
Your current code puts a space behind the text 'Back', which is inside your link/button, so of course this will not have any affect on the spacing between the buttons themselves.
It has been a while since using haml but something along the lines of:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back
= link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'
Should work in your case.
However, why leave layout / styling to your template at all? use CSS for organizing your layout, put a margin on the right side of .btn class elements, or add a new custom button class and add the margin to limit the scope of buttons affected if you don't want a global margin setting on all buttons.
Try:
= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
%i.icon-arrow-left.icon-white
Back // does not workout
=link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success', :style => 'margin-left:10px;'
If you don't want to add a css for spacing. You can add ">" at the end of your brackets for space before and "<" for space after.
Example:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}
%button{type: "submit"}>
%i.fa.fa-search
Will space before the button, separating it from the input text box
Or Equivalently:
%form
%input{name: "search", placeholder: "Text Here", type: "text"}<
%button{type: "submit"}
%i.fa.fa-search
Will space after the input box
I have a drop down menu under a bell icon that displays notifications but when there is no data available for it, it displays this on click :
my haml :
%nav.navbar.navbar-default
.container
.navbar-brand= link_to "wat", root_path
- if user_signed_in?
%ul.nav.navbar-nav.navbar-right
%li.nav-item.btn-group{"data-behavior"=>"notifications"}
%a#dropdownMenu1.dropdown-toggle.nav-link{"aria-expanded" => "false", "aria-haspopup" => "true", "data-behavior" => "notifications-link", "data-toggle" => "dropdown", :type => "button"}
= fa_icon "bell"
%span.notifs{"data-behavior" => "unread-count"}
.dropdown-menu{"aria-labelledby" => "dropdownMenu1", "data-behavior" => "notification-items"}
How to remove the little rectangle ?
Check if has data before add .dropdown-menu div
- if hasData?
.dropdown-menu{"aria-labelledby" => "dropdownMenu1", "data-behavior" => "notification-items"}
I have a Kendo Grid and it the default CSS background-color or 'text' Color are what always display.
I was able to override the background colors with lines 1 & 2, however, it just replaced the colors. What I need to to be able to set the color based on the "InTruck" Boolean field.
I tried lines 5 and 6, and the html mark up is correctly updated and sometimes I see it flash the correct color before it is reset to the defaults. I have also tried adding in !important in rows 3 and 5, still no luck. Something seems to be setting the style AFTER everything is done using the kendo/telerik css. How do I stop that?
<style>
1 /*.k-grid-content>table>tbody>tr{background-color:lightgreen;}*/
2 /*.k-grid-content>table>tbody>.k-alt{background-color:red;}*/
3 .IN{color:lightgreen;}
</style>
<div id="divSearchResults">
#(Html.Kendo().Grid((IEnumerable<Models.SearchResult>)Model.SearchResults)
4 // .Events(ev => ev.DataBound("Grid_onRowDataBound"))
5 // .RowAction(row => { if (row.DataItem.InTruck) row.HtmlAttributes["style"] = "background-color:lightgreen"; else row.HtmlAttributes["style"] = "background-color:red !important"; })
.Name("grid")
6 .RowAction(row =>
{
if (row.DataItem.InTruck)
{
row.HtmlAttributes["class"] = "IN";
}
})
.DataSource(ds => ds.Ajax()
.PageSize(Constants.MaxSearchReults)
.Model(mod =>
{
mod.Id(m => m.ID);
mod.Field(p => p.Name).Editable(false);
mod.Field(p => p.CarrierCode).Editable(false);
mod.Field(p => p.CityState).Editable(false);
mod.Field(p => p.Phone).Editable(false);
}))
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='chkbx' value='#= CarrierID#' name='SelectedArea' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(20);
columns.Bound(p => p.Name).Filterable(false).Width(100);
columns.Bound(p => p.CarrierCode).Filterable(false).Width(75);
columns.Bound(p => p.CityState).Filterable(false).Width(100);
columns.Bound(p => p.Phone).Filterable(false).Width(75);
})
.Editable(ed => ed.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
)
</div>
I never did figure out how to do exactly what I wanted, however, this solution has the same results and I think it looks better and easier on the eyes than what was asked for. It will set the color behind the checkbox so there is an obvious color difference but it isn't gaudy.
.Columns(columns =>
{
columns.Template(#<text></text>)
.ClientTemplate("<span style='float:left; width:100%; background:#= InTruckMate ? \"lightgreen\" : \"palevioletred\"#'><input type='checkbox' #= IsSelected ? checked='checked':'' # class='chkbx' value='#= CarrierID#' name='SelectedArea' /></span>")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
.Width(25);
columns.Bound(p => p.Name).Filterable(false).Width(100);
How to set specific color to active cell when creating XLS document in PHPExcel?
$sheet->getStyle('A1')->applyFromArray(
array(
'fill' => array(
'type' => PHPExcel_Style_Fill::FILL_SOLID,
'color' => array('rgb' => 'FF0000')
)
)
);
Source: http://bayu.freelancer.web.id/2010/07/16/phpexcel-advanced-read-write-excel-made-simple/
function cellColor($cells,$color){
global $objPHPExcel;
$objPHPExcel->getActiveSheet()->getStyle($cells)->getFill()->applyFromArray(array(
'type' => PHPExcel_Style_Fill::FILL_SOLID,
'startcolor' => array(
'rgb' => $color
)
));
}
cellColor('B5', 'F28A8C');
cellColor('G5', 'F28A8C');
cellColor('A7:I7', 'F28A8C');
cellColor('A17:I17', 'F28A8C');
cellColor('A30:Z30', 'F28A8C');
This code should work for you:
$PHPExcel->getActiveSheet()
->getStyle('A1')
->getFill()
->setFillType(PHPExcel_Style_Fill::FILL_SOLID)
->getStartColor()
->setRGB('FF0000')
But if you bother using this over and over again, I recommend using applyFromArray.
Seems like there's a bug with applyFromArray right now that won't accept color, but this worked for me:
$objPHPExcel
->getActiveSheet()
->getStyle('A1')
->getFill()
->getStartColor()
->setRGB('FF0000');
This always running!
$sheet->getActiveSheet()->getStyle('A1')->getFill()->getStartColor()->setRGB('FF0000');
Here is how you do it in PHPSpreadsheet, the newest version of PHPExcel
$spreadsheet = new Spreadsheet();
$spreadsheet->getActiveSheet()->getStyle('A1:F1')->applyFromArray([
'fill' => [
'fillType' => Fill::FILL_SOLID,
'startColor' => [
'rgb' => 'FFDBE2F1',
]
],
]);
alternative approach:
$spreadsheet->getActiveSheet()
->getStyle('A1:F1')
->getFill()
->setFillType(Fill::FILL_SOLID)
->getStartColor()->setARGB('FFDBE2F1');
$objPHPExcel
->getActiveSheet()
->getStyle('A1')
->getFill()
->setFillType(PHPExcel_Style_Fill::FILL_SOLID)
->getStartColor()
->setRGB('colorcode'); //i.e,colorcode=D3D3D3
$objPHPExcel
->getActiveSheet()
->getStyle('A1')
->getFill()
->getStartColor()
->getRGB();
$objPHPExcel->getActiveSheet()->getStyle('B3:B7')->getFill()
->setFillType(PHPExcel_Style_Fill::FILL_SOLID)
->getStartColor()->setARGB('FFFF0000');
It's in the documentation, located here: https://github.com/PHPOffice/PHPExcel/wiki/User-Documentation-Overview-and-Quickstart-Guide
You can easily apply colours on cell and rows.
$sheet->cell(1, function($row)
{
$row->setBackground('#CCCCCC');
});
$sheet->row(1, ['Col 1', 'Col 2', 'Col 3']);
$sheet->row(1, function($row)
{
$row->setBackground('#CCCCCC');
});