Just started using SlickGrid, Not sure if I am missing something, but this simple code doesn't seem to work. It is displaying headers, but not the rows.
Grid Code:
var grid;
var data = [
{ ID: 1, VALUE: "Value1"},
{ ID: 2, VALUE: "Value2"},
{ ID: 3, VALUE: "Value3"},
{ ID: 4, VALUE: "Value4"},
{ ID: 5, VALUE: "Value5"}
];
var columns = [
{name:'ID NUM', field:'ID', id:'ID'},
{name:'VALUE', field:'VALUE', id:'VALUE'}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
grid = new Slick.Grid("#container-div", data, columns, options);
grid.render();
For some reason, only first row's first cell is rendered in html and is not been displayed.
HTML:
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 0px;">
<div class="grid-canvas" style="height: 150px; width: 880px;">
<div class="ui-widget-content slick-row even" style="top:0px">
<div class="slick-cell l0 r0">1</div>
</div>
</div>
</div>
You are missing the container div to display the data, in your javascript code you are referencing #container-div but it does not exist inside your html code. Typically you don't have to write any html code like you seem to be doing (or is it the result you displayed?), except for the grid container itself. Try simply adding or replacing with this code in your html body: <div id="container-div" style="width:600px;height:500px;"></div> You can see a simple example from SlickGrid here: https://github.com/mleibman/SlickGrid/blob/master/examples/example1-simple.html
Related
I've added the placeholder widget to my CKEditor 5 build. However I don't like that I can't change the text after it is inserted. I tried removing isObject from the schema but that didn't do anything. I'd appreciate it if someone could show me how this can be achieved.
In version 4 the edit of the text is done via popup called by double clicking on the placeholder: https://ckeditor.com/cke4/addon/placeholder
In version 5 the placeholder was not fully implemented intentionally
"We didn't decide, though to implement a ready-to-use placeholder feature as it's usually needed to work differently in various systems"
https://github.com/ckeditor/ckeditor5/issues/871
So the only thing you can do is to implement the function you are missing yourself. I suggest looking at how version 4 does and understanding if it is applicable to version 5.
I have implemented it just with additional HTML block and control it with state (in my case I'm using React).
const CKInlineEditorField = ({
defaultValue = '',
onChange,
placeholder = '',
}) => {
const [showPlaceholder, setShowPlaceholder] = useState(false);
const { t } = useTranslation();
useEffect(() => {
if (!defaultValue) {
setShowPlaceholder(true);
}
}, [defaultValue]);
return (
<div>
<Paper variant="outlined" className="InlineEditor">
<div className="InlineEditor__placeholder">
{showPlaceholder && `${t(placeholder)}...`}
</div>
<div className="InlineEditor__editor">
<CKEditor
editor={InlineEditor}
data={defaultValue}
onChange={(event, editor) => {
const data = editor.getData();
setShowPlaceholder(!data);
}}
onBlur={(event, editor) => {
const data = editor.getData();
onChange(data);
}}
/>
</div>
</Paper>
</div>
);
};
And SCSS file:
.InlineEditor {
background-color: #eee;
position: relative;
&__placeholder {
position: absolute;
top: 15px;
left: 10px;
z-index: 0;
}
&__editor {
position: relative;
z-index: 2;
}
}
I am using D3 for the exercise. However, I am having trouble passing an object to the .style() method:
var myStyles = [
'#268BD2',
'#BD3613',
'#D11C24',
'#C61C6F',
'#595AB7',
'#2176C7'
];
This below piece of code is working
d3.selectAll('.item')
.data(myStyles)
.style('background',function(d){return d});
But none of the below two code pieces are working
d3.selectAll('.item')
.data(myStyles)
.style({'background':function(d){return d}});
d3.selectAll('.item')
.data(myStyles)
.style({'color':'white','background':function(d){return d}});
Please explain what is wrong here.
You can apply objects in styles and attributes by using d3-selection-multi.
First, you have to reference the mini library:
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
Then, you have to use styles, not style:
.styles({'color':'white','background':function(d){return d}});
You can see the code working in this fiddle, in which I'm using an object to set the styles: https://jsfiddle.net/gerardofurtado/o54rtrqc/1/
For attributes, use attrs instead of attr.
Here is the API.
I'm also working through the Lynda.com course. Here's an example of the "Binding data to the DOM" exercise using D3 version 4:
JSFiddle
HTML:
<!--
Added these two scripts:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
-->
<div class="container">
<h2>D3 Graphic</h2>
<section id="chart">
<div class="item">Darth Vader</div>
<div class="item">Luke Skywalker</div>
<div class="item">Han Solo</div>
<div class="item">Obi-Wan Kenobi</div>
<div class="item">Chewbacca</div>
<div class="item">Boba Fett</div>
</section>
</div>
JS:
var myStyles = [{
width: 200,
color: '#A57706'
}, {
width: 300,
color: '#BD3613'
}, {
width: 150,
color: '#D11C24'
}, {
width: 350,
color: '#C61C6F'
}, {
width: 400,
color: '#595AB7'
}, {
width: 250,
color: '#2176C7'
}];
d3.selectAll('.item')
.data(myStyles)
.styles({
'color': 'white',
'background': function(d) {
return d.color;
},
width: function(d) {
return d.width + 'px';
}
})
I'm using Kendo UI and trying to display multiple charts on a single web page. Everything works until I try to add a second bar chart. One of the charts does not display and just shows a generic chart image (it looks like it is not finding the data but if I reorder they reverse what is happening). I can display multiple line charts. Any ideas about what might be happening?
Below is my html for the two charts without the SVG info:
<div kendo-chart="" k-options="vm.barChartOptions" ng-show="this.dataItem.visible" class="move k-block ng-scope k-chart" id="costPerPound" style="float: left; margin: 5px 0px; position: relative;" data-uid="b543ff9a-ee57-4ce7-a39d-8f69a0505a2b" role="option" aria-selected="false" data-role="chart"></div>
<div kendo-chart="" k-options="vm.barChartOptions" ng-show="this.dataItem.visible" class="move k-block ng-scope k-chart" id="numShipments" style="float: left; margin: 5px 0px; position: relative;" data-uid="97094bf1-4366-4974-b92f-edf36d1980f4" role="option" aria-selected="false" data-role="chart"></div>
Here are is the k-options info. As you can see I am setting most of my information at render.
vm.barChartOptions = {
dataSource: vm.chartData_datasource,
series: [
{
}
],
valueAxis: {
line: {
visible: false
},
labels: {
rotation: "auto"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
},
render: function (e) {
var chart = e.sender;
var chartData = vm.findChartData(e);
if (chartData != null) {
chartData.categoryAxisField = vm.firstToLower(chartData.categoryAxisField);
chart.options.title.text = chartData.title;
chart.options.name = chartData.htmlID;
chart.options.categoryAxis.field = chartData.categoryAxisField;
chart.options.categoryAxis.labels.format = chartData.categoryAxisLabel;
chart.options.legend.position = chartData.legendPosition;
chart.options.seriesDefaults.type = chartData.chartType;
for (var i = 0; i < chart.options.series.length; i++) {
chart.options.series[i].type = chartData.chartType;
chart.options.series[i].field = vm.firstToLower(chartData.dataField);
}
}
}
}
I had same issue. It can be resolved by just providing different name
to each chart.
I'm using Kendo UI Grid with an action link into a client-template column. This action link call an data edit view. See example:
c.Bound(p => p.sID).ClientTemplate(#Html.ImageActionLink(Url.Content("~/Content/images/edit3.png"), "Edit", "Edit", new { id = "#= sID #" }, new { title = "Edit", id = "Edit", border = 0, hspace = 2 }).ToString()
).Title("").Width(70).Filterable(false).Groupable(false).Sortable(false);
My question is how can I configure the grid in order to show an ajax loader when the action link is clicked, until the edit view is rendered?
you can create relative div and insert there your grid and loader wrapper:
<div class="grid-wrapper">
<div class="loading-wrapper">
<div class='k-loading-image loading'></div>
<!-- k-loading-image is standart kendo class that show loading image -->
</div>
#(Html.Kendo().Grid()....)
</div>
css:
.grid-wrapper {
position: relative;
}
.loading-wrapper {
display: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
}
.loading {
position: absolute;
height: 4em;
top: 50%;
}
add to imageActionLink in htmlAttributes object class named "edit" (for example), and write click event handler:
$(document).on('click', '.edit', function (e) {
$('.loading-wrapper').show();
$.ajax({
// ajax opts
success: function(response) {
// insert your edit view received by ajax in right place
$('.loading-wrapper').hide();
}
})
});
you can do this like :
c.Bound(p => p.sID).Template(#Edit).Title("Edit").Encoded(false);
//encoded false = Html.Raw
I am writing a MVC3 project. Right now I have a table which has column with Data as actionLinks as:
<td style="color: Black; background-color: Bisque; text-align: center; width: 410px">
#Html.ActionLink(#item.LookUp_NameString, "EditPartial", "Capitation", new { id = item.CAPITATION_RATE_ID }, new { #class = "actionLink" })
</td>
EditPartial as the name suggests is a partial view, which I need to be opened as a pop-up menu so that user can edit the details of the object save it and we can come back to original page.
Thanks for the help!
You could use jQuery and jQueryUi to capture the click and open the rendered action in a dialog box.
<div id="popupWindow" style="display: none;" ></div>
<script type="text/javascript">
$(function() {
$("#popupWindow").dialog({
width: 600,
autoOpen: false
});
$('a.actionLink').click(function() {
var url = $(this).attr('href');
$('#popupWindow').load(url, function() {
$('#popupWindow').dialog('open');
});
return false;
});
});
</script>