Dgrid: Same row height for across multiple ColumnSets - css

Is it possible to automatically have the same height in all columns when using ColumnSets (without specifying the height manually)?
new table({
store: store,
columnSets: [
[
[colA]
],
[
[colB]
]
]
}, "grid1");
If all the columns are within the same ColumnSet there is no problem.
new table({
store: store,
columnSets: [
[
[colA, colB]
]
]
}, "grid2");
Please take a look at this fiddle:
http://jsfiddle.net/dawp21Ly/

Related

How to display multiple ckeditor-textarea in a component with different toolbar?

I have multiple ckeditor in a component and for some reason i want a textarea-ckeditor to be readonly with some toolbar enabled;
ie: 'print','preview','find', and 'maximize'.
How can i achieve this? i've tried removing the plugins but only success if i alter the config.js which will 'standardize' all my ckeditor.
What i can think is that i need to alter something from this code.
CKEDITOR.replace('header',{
width: '100%',
height: 570});
Thanks in adv..
I found the solution but instead of removing the toolbar buttons, i list all the desired buttons as following;
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: ['-','Preview', 'Print', '-' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find','-','-' ] },
{ name: 'tools', items: [ 'Maximize'] }
]

MS AdaptiveCard Issue: Placeholder and the grid cannot be displayed correctly

These two questions are all about the AdaptiveCard Botframework.
Q1: I have set the default placeholder value in the adaptivecard :text1, but after triggering the event, the placeholder cannot be displayed correctly , the placeholder was blank. There is no hint information(text1) in the placeholder. And even I copied the MS sample code to my source, it still not working. I have tried in the Chrome the Firefox and also in IE11, but all failed.
The placeholder was blank
MS samplecode
MS sample linkage
Q2: I have set the width for two columns in the columnset using the adaptivecard(one was set as 40 and another one was set as 10), but it seems not working. The grid was not displayed correctly.
My source
Width limit seems not working
[
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Test",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"spacing": "none",
"columns": [
{
"type": "Column",
"width": 40,
"items": [
{
"type": "Input.ChoiceSet",
"id": "country",
"style": "compact",
"placeholder": "Country",
"value": "1",
"choices": [
{
"title": "UnitedStates",
"value": "US"
}
]
}
]
},
{
"type": "Column",
"width": 10,
"items": [
{
"type": "Input.Number",
"placeholder": "text1",
"min": 0,
"id": "Text1"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Button"
}
]
}
}
]
Q1:
The placeholder value is rendered depending on the host renderer. What you can see in this image, is a comparison of several different hosts, and you can see that two of them do render the placeholder.
Q2:
The columns are correctly set and the columnset does render correctly.
What you can see here is that columns width in numeric format is a % of overall width, after auto and stretch column widths have been taken into consideration
In the following, your first column is set to Auto, and the second remains at 10
The second column takes up the entire space because AUTO brings the first column to the slimmest width it can be rendered at.
Visualisers in different hosts may show this differently, but the certainly are intended to be the same regardless of the host.
Hope this helps.

Want to make cell of 1 row of angular ui grid columndef editable

how to change columndef settings dynamically loaded , like one row must be editable and other should not be editable when loaded,but mine whenever celleditable true for one row it makes all other rows cells also editable
I can't understand if you meant 1 row or row 1. But customizing the celltemplates of columns based on rowRenderIndex might help.
var gridOptions = {
enableFiltering: true,
rowTemplate: rowTemplate(),
data: [{one : 1, two : 2, three: 3, four : 4, five:5 }],
columnDefs: [
{ field: 'one' },
{ field: 'two' },
{ field: 'three' },
{ field: 'four' },
{ field: 'five', cellTemplate: '<div class="ui-grid-cell-contents">
<input ng-if="!rowRenderIndex" type=number />
<span ng-if="rowRenderIndex">{{row.entity.five}}</span>
</div>'}
]
};

There is one concern regarding angular UI-grid

I want to display only 4 columns, but when I bind the grdOptions.Data=entity,
then all fields in entity are converted into a column. Can we prevent it from autogenerating all the columns?
As per the first page of documentation:
... if you wanted to configure the core ui-grid, you might choose to set some options and columns on your grid (the documentation for these is found in gridOptions and columnDef.
And here's the first example:
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'field1', enableSorting: false },
{ name: 'field2' },
{ name: 'field3', visible: false }
]
};

Highcharts - Maps data structure

I am trying to build an array of data returned from a third party API, and display it using the Highcharts map module.
I've done so with the charts module, using line and pie charts both with not much difficulty. Now that I've moved onto maps, I seem to be running into a bit of difficulty. It was quite clear from the examples provided how the data should be structured to be properly read by Highcharts.
When it comes to the maps module, the data structure is not clear at all. How would I structure my data to pass into my Highcharts map???
[ 'US' , 'United States' , 32 ] , [ 'CA' , 'Canada' , 100 ]
If I use the provided :
jQuery.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
console.log(data);
// Initiate the chart
jQuery('#geo_map').highcharts('Map', {
title : {
text : 'Campaign Link Clicks Around The World'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/kmĀ²'
},
}],
credits: {
enabled: false
},
});
});
});
It works. But I can't seem to figure out how to pass in my data. I thought it was as simple as
[ 'Abbreviation' , 'Name' , Value ] , [ 'Abbreviation' , 'Name' , Value ]
but clearly not. The documentation isn't very clear on data structure.
Thanks.

Resources