css inside gridview not showing after ajaxupdate - ajax

inside a gridview i have a css based inline graph. everything is working fine untill i filter something and the gridview gets updated. then css is not registering inside the grid anymore. anyone knows a solution? to be honest i don't even know what to try in this situation. css is not one of my strong points.
this is the element before ajaxupdate:
This is after the ajax update
.stat-block .stat-graph {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D7D7D7;
border-radius: 3px;
margin-right: 10px;
padding: 10px 10px 8px;
text-align: center;
width: auto;
}
as far as i can see first time the grid is generated css generates a canvas tag like so
<canvas style="display: inline-block; width: 29px; height: 20px; vertical-align: top;" width="29" height="20"></canvas>
but after the ajax update and the refresh of the gridview that tag won't appear anymore.
i have tried to put the graph data inside the canvas tag whit no success.
here is the gridview code:
this->widget('zii.widgets.grid.CGridView', array(
'id' => 'cartuse-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'afterAjaxUpdate' => 'reinstallDatePicker',
'columns' => array(
array(
'id' => 'autoId',
'class' => 'CCheckBoxColumn',
'selectableRows' => '50',
),
// 'id',
array(
'name'=>'client',
'type'=>'raw',
'value'=>'client($data->client)',
'htmlOptions' => array(
'align'=>'center',
//'width'=>'35%'
)
here is the client function:
function client($client) {
...
return '<div class="stat-block" id="graph">
<ul>
<li class="stat-graph inlinebar" id="activitate-lunara">
'.$data.'
</li>
<li class="stat-count">
<span>'.$data['0'].'
</span>
</li>
<li class="stat-percent">
<span class="text-info stat-percent">'.$target.'</span>
</li>
</ul>
</div>';
}
Edit 1 :
as recomended in answer 1 i used the removeClass() and addClass() functions to refresh css after ajax update. nothing hapens, the canvas tag still won't appear.
i tryed to use replaceWith() and just insert the canvas tag that way but then it will brake the filtering.
here's the reinstallDatePicker function
<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
$('#datepicker_min').datepicker({ dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeYear: true,
changeMonth: true,
});
$('#datepicker_max').datepicker({ dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeYear: true,
changeMonth: true,
});
$( \"#activitate-lunara\" ).removeClass( \"stat-graph inlinebar\" );
$( \"#graph\" ).removeClass( \"stat-block\" );
$( \"#graph\" ).addClass( \"stat-block\" );
$( \"#activitate-lunara\" ).addClass( \"stat-graph inlinebar\" );
}"); ?>
Edit 2:
i wasn't using renderPartial as column content. just a function that returned the content i wanted. after exhausting All posible ideeas i moved to renderpartial and with renderpartial + registering scripts / css in the partialview and removeclass / addclass everything is working fine now.

I have this issue sometimes as well.
First thing: If you're using partial views, include the CSS in the partial view as well.
If not, you will probably have to re-apply the style after each ajax update.
I see that you are using "afterAjaxUpdate"=>"reinstallDatePicker" so one way to fix your problem is to add that CSS to .stat-block .stat-graph inside that function. You can use jquery functions like css(), addClass() and many others.
But the important thing is that you style your elements after each ajax update. Since your function reinstallDatePicker is being called after each ajax update, you can just add some code to this function to do what you want (that is, re-style the elements).

i have tried everything i can think of without success. the only way i could get it to work was to store my filter data in my session and then afterajaxupdate force a reload. (not really recommended because if your query's are not optimized i guess it could slow down your page)
i'm just posting this here in case someone else has this problem and want to get it working before someone else finds a correct solution
so now in my controller i have this
public function actionAdmin()
{
$model=new Cartuse('search');
$model->unsetAttributes(); // clear any default values
if(isset($_GET['Cartuse']))
$_SESSION['filterData'][$this->id][$this->action->id] = $_GET['Cartuse'];
$model->attributes=$_SESSION['filterData'][$this->id][$this->action->id];
if (isset($_GET['pageSize'])) {
Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
unset($_GET['pageSize']);
}
$this->render('admin',array(
'model'=>$model,
));
}
and in my gridview
$this->widget('zii.widgets.grid.CGridView', array(
'id' => 'cartuse-grid',
'dataProvider' => $model->search(),
'filter' => $model,
'afterAjaxUpdate' => 'reinstallDatePicker',
'columns' => array(/*
.....
)
));
and the reinstall datepicker (for some reason if i put the location.reload () directly in the afterajaxupdate field my datepickers won't register (not even first time) and filtering stops working. so i put it in the reinstalldatepicker function. no problems till now.
<?php Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
location.reload();
$('#datepicker_min').datepicker({ dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeYear: true,
changeMonth: true,
});
$('#datepicker_max').datepicker({ dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeYear: true,
changeMonth: true,
});
$.datepicker.setDefaults($.datepicker.regional['ro']);
}
");
this is not really a solution, its jut a cheap workaround so if anyone has a solution i'll be waiting for it.

Related

How to set the height of CKEditor 5 (Classic Editor)

In CKEditor 4 to change the editor height there was a configuration option: config.height.
How do I change the height of CKEditor 5? (the Classic Editor)
Answering my own question as it might help others.
CKEditor 5 no longer comes with a configuration setting to change its height.
The height can be easily controlled with CSS.
There is one tricky thing though, if you use the Classic Editor:
<div id="editor1"></div>
ClassicEditor
.create( document.querySelector( '#editor1' ) )
.then( editor => {
// console.log( editor );
} )
.catch( error => {
console.error( error );
} );
Then the Classic Editor will hide the original element (with id editor1) and render next to it. That's why changing height of #editor1 via CSS will not work.
The simplified HTML structure, after CKEditor 5 (the Classic Editor) renders, looks as follows:
<!-- This one gets hidden -->
<div id="editor1" style="display:none"></div>
<div class="ck-reset ck-editor..." ...>
<div ...>
<!-- This is the editable element -->
<div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
...
</div>
</div>
</div>
In reality the HTML is much more complex, because the whole CKEditor UI is rendered. However the most important element is the "editing area" (or "editing box") marked with a ck-editor__editable_inline class:
<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>
The "editing area" is the white rectangle where one can enter the text. So to style / change the height of the editing area, it is enough to target the editable element with CSS:
<style>
.ck-editor__editable_inline {
min-height: 400px;
}
</style>
Setting the height via a global stylesheet.
Just add to your common .css file (like style.css):
.ck-editor__editable {
min-height: 500px;
}
In the case of ReactJS.
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onInit={(editor) => {
// You can store the "editor" and use when it is needed.
// console.log("Editor is ready to use!", editor);
editor.editing.view.change((writer) => {
writer.setStyle(
"height",
"200px",
editor.editing.view.document.getRoot()
);
});
}}
/>
editor.ui.view.editable.editableElement.style.height = '300px';
From CKEditor 5 version 22 the proposed programmatic solutions are not working. Here it is how I get the work done:
ClassicEditor.create( document.querySelector( '#editor' ) )
.then( editor => {
editor.ui.view.editable.element.style.height = '500px';
} )
.catch( error => {
console.error( error );
} );
.ck-editor__editable {min-height: 500px;}
<div>
<textarea id="editor">Hi world!</textarea>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
Add this to your stylesheet:
.ck-editor__editable {
min-height: 200px !important;
}
If you wish to do this programatically, the best way to do it is to use a Plugin. You can easily do it as follows. The following works with CKEditor 5 version 12.x
function MinHeightPlugin(editor) {
this.editor = editor;
}
MinHeightPlugin.prototype.init = function() {
this.editor.ui.view.editable.extendTemplate({
attributes: {
style: {
minHeight: '300px'
}
}
});
};
ClassicEditor.builtinPlugins.push(MinHeightPlugin);
ClassicEditor
.create( document.querySelector( '#editor1' ) )
.then( editor => {
// console.log( editor );
})
.catch( error => {
console.error( error );
});
Or if you wish to add this to a custom build, you can use the following plugin.
class MinHeightPlugin extends Plugin {
init() {
const minHeight = this.editor.config.get('minHeight');
if (minHeight) {
this.editor.ui.view.editable.extendTemplate({
attributes: {
style: {
minHeight: minHeight
}
}
});
}
}
}
This adds a new configuration to the CKEditor called "minHeight" that will set the editor minimum height which can be used like this.
ClassicEditor
.create(document.querySelector( '#editor1' ), {
minHeight: '300px'
})
.then( editor => {
// console.log( editor );
} )
.catch( error => {
console.error( error );
} );
I tried to set the height and width on the config but it just didn't work on the classic Editor.
I was able to change the height of the editor programmatically on Vue by doing this.
mounted() {
const root = document.querySelector('#customer_notes');
ClassicEditor.create(root, config).then(editor=>{
// After mounting the application change the height
editor.editing.view.change(writer=>{
writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
});
});
}
Use css:
.ck.ck-editor__main .ck-content {
height: 239px;
}
Add this to your global stylesheet, this will increase the size of the CKEditor :)
.ck-editor__editable_inline {
min-height: 500px;
}
Just add it to the style tag.
<style>
.ck-editor__editable
{
min-height: 150px !important;
max-height: 400px !important;
}
</style>
As for configuring the width of the CKEditor 5:
CKEditor 5 no longer comes with a configuration setting to change its width but its width can be easily controlled with CSS.
To set width of the editor (including toolbar and editing area) it is enough to set width of the main container of the editor (with .ck-editor class):
<style>
.ck.ck-editor {
max-width: 500px;
}
</style>
Simply you can add this to your CSS file
.ck-editor__editable {min-height: 150px;}
Put this CSS in your global CSS file and the magic will happen. CkEditor is full of unsolved mysteries.
.ck-editor__editable_inline {
min-height: 400px;
}
Use max-height and min-height both. Beacuse max-height give scroll bar option after reached maximum mention height. Where min-height give static height to <textarea>.
.ck-editor__editable {
max-height: 400px; min-height:400px;}
If its in latest version of Angular say 12 or 12+. We can add below style to your components style file.
:host ::ng-deep .ck-editor__editable_inline { min-height: 300px; }
If you use jQuery and the CKEditor 5 has to be applied to a textarea, there is a "quick and dirty" solution.
The condition:
<textarea name='my-area' id='my_textarea_id'>
If you use jQuery the Editor call could be:
var $ref=$('#my_textarea_id');
ClassicEditor
.create( $ref[0] ,{
// your options
} )
.then( editor => {
// Set custom height via jQuery by appending a scoped style
$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);
} )
.catch( error => {
console.error( error );
} );
In other words, after rendering, you can address the same element used to build the editor and append after a scoped style tag with containing the custom height.
$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);
If you like to use a function (or some class method) to do this, you need something like this:
var editorBuildTo = function(id,options){
var options=options || {};
//Height represents the full widget height including toolbar
var h = options.height || 250; //Default height if not set
var $ref = $('#'+id);
h=(h>40?h-40:h);//Fix the editor height if the toolbar is simple
ClassicEditor
.create( $ref[0] ,{
// your options
} )
.then( editor => {
// Set custom height via jQuery
$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: '+h+'px !important;}</style>').insertAfter($ref);
} )
.catch( error => {
console.error( error );
} );
}
editorBuildTo('my_textarea_id',{
height:175,
// other options as you need
});
This works well for me
1.resource/assets/js/app.js
=================================
2.paste this code
=================================
require('./bootstrap');
//integrate
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic');
============================================
3.write on terminal
============================================
npm install --save #ckeditor/ckeditor5-build-classic
npm run watch
=======================================
4.in blade file
=======================================
<!DOCTYPE html>
<html lang="en">
<title></title>
<body>
<form action="{{route('admin.category.store')}}" method="post" accept-charset="utf-8">
#csrf
<div class="form-group row">
<div class="col-sm-12">
<label class="form-control-label">Description:</label>
<textarea name="description" id="editor" class="form-control" row="10" cols="80"></textarea>
</div>
</div>
</form>
<script>
$(function () {
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
} )
.catch( error => {
console.log( error );
} );
})
</script>
</body>
</html>
click to show image here
Building on #Jaskaran Singh React solution. I also needed to ensure it was 100% height to it's parent. I achieved this by assigning a ref called "modalComponent" and further adding this code:
editor.editing.view.change(writer => {
let reactRefComponentHeight = this.modalComponent.current.offsetHeight
let editorToolbarHeight = editor.ui.view.toolbar.element.offsetHeight
let gapForgiveness = 5
let maximizingHeight = reactRefComponentHeight - editorToolbarHeight - gapForgiveness
writer.setStyle(
'height',
`${maximizingHeight}px`,
editor.editing.view.document.getRoot()
)
})
This CSS Method works for me:
.ck-editor__editable {
min-height: 400px;
}
I resolve this just adding in my layout page
<style>
.ck-content{
height: 250px;
}
</style>
Hope i help someone :D
For this particular version https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js,
the below code block worked for me.
.cke_contents { height: 500px !important; }
I guess the difference is just the fact that is it in plural.
In my case it worked for me
Add a ck class and write style like below:
<style>
.ck {
height: 200px;
}
</style>
Using plugin here I came up with this
let rows: number;
export class MinHeightPlugin {
constructor(public editor) {
}
init = function () {
this.editor.ui.view.editable.extendTemplate({
attributes: {
style: {
minHeight: (rows * 40) + 'px',
}
}
});
};
}
export const MinHeightPluginFactory = (rowss: number): typeof MinHeightPlugin => {
rows = rowss;
return MinHeightPlugin;
};
and the usage(4 rows each rows is considered 40px height):
this.editor.builtinPlugins.push(MinHeightPluginFactory(4));
I couldn't manage to make rows variable local to MinHeightPlugin, does anyone know how to do it?
.ck-editor__editable_inline {
min-height: 400px;
}
This makes height change for every editor used across all components. So it doesn't work in my case.
In Case of react js
<CKEditor
toolbar = {
[
'heading',
'bold',
'Image'
]
}
editor={ClassicEditor}
data={this.state.description}//your state where you save data
config={{ placeholder: "Enter description.." }}
onChange={(event, editor) => {
const data = editor.getData();
this.setState({
description : data
})
}}
onReady={(editor)=>{
editor.editing.view.change((writer) => {
writer.setStyle(
//use max-height(for scroll) or min-height(static)
"min-height",
"180px",
editor.editing.view.document.getRoot()
);
});
}}
/>
In order to enable both rich text editor and source mode to have the same height, use the following CSS:
.ck-source-editing-area,
.ck-editor__editable {
min-height: 500px;
}
.ck-editor__main {
height: 500px;
min-height: 500px;
max-height: 500px;
overflow-y: scroll;
border: 1px solid #bbbbbb;
}
Just test it's work. Hoping help you
var editor_ = CKEDITOR.replace('content', {height: 250});

Animated icon inside input

How can I add a font awsome animated icon ( like fa fa-reload fa-spin) inside an input using $this->form->input(code)
<div class="input-wrapper">
<input id="stuff">
<label id ="spin" for="stuff" class="fa fa-spinner fa-spin input-icon">
</label>
</div>
and for css
.input-icon{ position: relative; right: 20px; }
input{ padding-right: 20px; }
.input-wrapper{ position: relative; }
I don't know if what you're trying to do it's right from a css point of view
Don't even know if it is the right way to use fontAwesome (You're applying the fa classes to the label instead o using in a <i> as usually done)
So I'm just going to show you how to replicate your exact html using cakephp
if you want to do using just one command you have to leverage on templates. You can change the form templates just for one form, for your whole application or just for a single control.
In my exhample I'm changing the templates just for this control
echo $this->form->control(
'my_input_name',
[
'label' => [
'text' => '',
'id' => 'spin',
'class' => "fa fa-spinner fa-spin input-icon"
],
'templates' => [
'inputContainer' => '<div class="input-wrapper">{{content}}</div>',
'formGroup' => '{{input}}{{label}}',
]
]
)

Kendo.UI Grid Change row color on hover

I have a Kendo Grid declared inside of a Kendo Splitter like this in my partial view.
#(Html.Kendo().Splitter()
.Name("adminSplitter")
.Orientation(SplitterOrientation.Horizontal)
.Panes(p =>
{
p.Add()
.HtmlAttributes(new
{
id = "adminLeftHandPane"
})
.Resizable(false)
.Size("150px")
.Content(#<text>
#(Html.Kendo().Grid<AdministrativeTask>()
.Name("grdAdminTasks")
.ClientRowTemplate("<tr class=\"gridRow\"><td style=\"cursor:pointer\"><img src=\"#=ImageUrl#\" style=\"height: 16px; width: 16px;\" /> #=Title#</td></tr>")
.Columns(c => c.Bound(i => i.Action)
.Title("Administrative Tasks"))
.Selectable(s => s.Mode(GridSelectionMode.Single))
.DataSource(ds => ds.Ajax().Read("LoadAdministrativeTasks", "Admin").ServerOperation(false))
.Events(e => e.Change("change"))
)
</text>);
p.Add()
.HtmlAttributes(new
{
id = "adminRightHandPane"
})
.Content(#<text>
<div id="adminRightHandPaneContent"></div>
</text>)
;
}
)
)
and in this same partial view my script looks like this
<script>
function change() {
var row = this.select();
var item = this.dataItem(row);
$.ajax({
url: '/' + item.Controller + '/' + item.Action,
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
cache: false,
})
.success(function (result) {
// Display the section contents.
$('#adminRightHandPaneContent').html(result);
})
.error(function (xhr) {
$('#adminRightHandPaneContent').html("ERROR: <br><br>" + xhr.responseText);
//alert(xhr.responseText);
});
}
$(document).ready(function () {
alert($('.gridRow'));
$(".gridRow").hover(
function () {
alert("hit");
$(this).addClass("highlightRow");
},
function() {
$(this).removeClass("highlightRow");
}
);
});
When the partial view loads I get the alert "[object Object]" which tells me that Jquery found the row. However, when I hover over the row in question I do not get the "hit" alert message so at this point I am at a loss on how to proceed.
I am trying to get the row highlighted when the user hovers over the row. What am I doing wrong?
If you just want to change the styling of a row when the cursor is over the row of table, you can simply define a CSS style as:
#grid tbody tr:hover {
background: #ff0000;
}
Where grid is the id of the grid.
See if running here http://jsfiddle.net/OnaBai/uN2W5/
So you don't even need to add a CSS classes, hover function handlers,...
in generic form:
.k-grid table tr:hover td {
background :rgb(107, 188, 242) !important;
cursor: pointer !important;
}
in Q1 2016
kendo ui has in the css this line
.k-grid tr:hover{background-image:url(textures/highlight.png);background-image:none,-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.45)),to(rgba(255,255,255,0)));background-image:none,-webkit-linear-gradient(top,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 100%);background-image:none,linear-gradient(to bottom,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 100%);background-color:#88c5e0}
so it should work out of the box
.k-grid table tr.k-state-selected{background: red;color: black; }

CakePHP: Error message not showing Validate Fields

I am new to CakePHP. I have two problem with the view.
There is line break between text field name and text field area. I have tried to pass 'div' => false but that didn't work. How can I remove line break and display both on same line?
I have added validation rule to this textfield but when I click save Error message doesn't show up. Do I need to do something else beside adding validates in my model?
Here is my view input.ctp
echo $this->Form->input('fileId', array(
'type'=>'text',
'style' => 'width: 200px; height: 15px'
));
echo $this->Form->end('Save Post');
Here is my model:
var $validate = array(
'fileId' => 'notEmpty',
'message' => 'Should not be empty'
);
Controller:
if ($this->request->is('post')) {
$data = $this->request->data;
if ($data) {
// saving the data
}
}
If you are not using save then you need to manually validate the data using validates. In such case you also need to set the data. For e.g. in your controller
$this->ModelName->set($data);
$this->Modelname->validates();
For validate your data, you should have something like this:
public $validate = array(
'fileId' => array(
'rule' => 'notEmpty',
'message' => 'Should not be empty'
)
);
And your Controller:
if ($this->request->is('post')) {
if ($this->Model->save($this->request->data)) {
// saved
}
}
If you can not save, the error will be shown near the corresponding field. Or you can customize your error using $this->Model->validationErrors array.
For the line break question, make sure that 200px does the automatic line break because of where these elements are positioned.
validation errors appear when validates() or save() was called.
setup your action completely.
If you're not using FormHelper::input, which outputs the field, label and error, you need to manually output the error as well using $this->Form->error('fileId').
And for the form try this:
add this to your css
label { float: left;
width: 150px;
display: block;
clear: none;
text-align: left;
vertical-align: middle;
padding-right: 0px;}
.xg {
display: block;
float:left;
}
echo $this->Form->input('fileId', array('div'=>'xg','type'=>'text', 'style' => 'width: 200px; height: 15px'));
echo $this->Form->end('Save Post');
you can customize your output by following method:
<tr>
<td><label>Username</label></td>
<td>
<?php echo $this->Form->input('username',array('label'=>false,'div'=>false,'error'=>false)); ?>
</td>
<td><?php echo $this->Form->error('username'); ?></td>
</tr>
This method will give you output in same line.

JQGrid within a dialog

How will you display a JQGrid within a dialog?
in html page place table tag which will be used to construct grid inside dialog div like
<div id="dialog-div">
<table id="JqGrid">
</table>
<div id="pager" style="text-align: center; </div>
</div>
then in js first set dialog settings like
$("#dialog-div").dialog({
width: 'auto',
resizable: false,
height: '395',
autoOpen: false,
open: function (event, ui) {
ConstructJqGrid();
},
});
function ConstructJqGrid(){
jQuery("#JqGrid").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
...
})
}
This is how I did it, with AJAX to get the page containing my jqGrid :
$.ajax({
[...],
success: function( data ){
var popup = document.createElement( "div" );
// Appending
$( popup ).append( data );
$( "body" ).append( popup );
// Dialoging
$( popup ).dialog({
[...]
});
}
});
PS : I don't know the rules about necroposting but since the answer was never given, I chose to answer it.
If you are using the jquery-ui dialog use this page,the first example will show you how to create a dialog with #dialog. Then this page will have a have a basic JQGrid example which you will embed into your #dialog. If you are using a different type of a dialog, the process should be similar.

Resources