I am trying to make the headers of my AgGrid table have 2 lines: the first line is the name, the 2nd line is the unit. I want the 2nd line's font size to be smaller than the 1st one.
I've tried to search for this but could not find the answer. I found this blog about styling the header and followed this answer to make my headers be in 2 lines. But none of them shows how to show 2-line headers and style each line independently. Appreciate any help.
I did this in my Markdown Editor using a Custom Header and having each line as as separate div.
The code for my custom header is here: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
The basic HTML for the header was:
this.eGui.innerHTML = `
<div class="customHeaderTop">
<div class="customFilterMenuButton">
<i class="ag-icon ag-icon-filter"></i>
</div>
<div class="customHeaderLabel">${this.agParams.displayName}</div>
</div>
<div class="headerbuttons">
<span title="add left">[<+]</span>
<span title="rename">[~]</span>
<span title="delete">[x]</span>
<span title="duplicate">[+=]</span>
<span title="add right">[+>]</span>
</div>
`;
Custom Header Components are described here:
https://www.ag-grid.com/javascript-data-grid/component-header/
It is also possible to add a header template if rendering requirements are simple.
This is covered in the AG Grid Blog post https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/
{
minWidth: 150,
field: 'athlete',
headerComponentParams: {
template:
'<div class="ag-cell-label-container" role="presentation">' +
' <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
' <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
' <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' +
' <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
' <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
' <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
' <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
' <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
' </div>' +
'</div>'
},
}
Related
I am trying to add an integer to the card id so that I can delete it when pressing the delete button. Any help?
var variable = '' +
'<div id="card+$num.toString(cnt);" class="card col-3" style="width: 18rem;" style="margin-right=3%; margin-right=3%">' +
' <img src="..." class="card-img-top" alt="..." id="image"+String(cnt)>' +
' <div class="card-body">' +
' <h5 class="card-title" id="title"+String(cnt) contentEditable="true"; >Card title</h5>' +
' <p class="card-text" id="desc"+String(cnt) contentEditable="true">Some quick example text to build on the card title and make up the' +
' bulk of the' +
' card\'s content.</p>' +
' <a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a>' +
' <a href="#" id="btn"+String(cnt) class="close"+String(cnt)>Delete</a>' +
' </div>' +
' </div>' +
'';
$(".create").click(function(){
document.getElementById("lastRow").innerHTML+=variable;
});
$(".close"+String(cnt)).click(function(){
console.log("Doulevw!");
document.getElementById("card"+String(cnt)).hidden=true;
});
There are a few concepts that you have to know when rendering dynamic elements with js.
you have a click listener for your .close button. This listener will never fire because this listener is relevant only for your initial DOM. But your closing button is rendered dynamically, which means that listener not relevant for your button.
Easily solving that by attaching onclick to the button, and creating a function. (example follows)
I inspected your code, you DON'T have to use id mechanism to delete/hide your card element (unless you need to fire POST request), you can use parentNode (example follows)
I made some simple changes to your code:
$(".create").click(function(){
let element = `
<div id="card" class="card col- 3" style="width:18rem;style="margin-right=3%; margin-right=3%"><img src="..." class="card-img-top" alt="..." id="image"+String(cnt)><div class="card-body"><h5 class="card-title" id="title" contentEditable="true">Card title</h5><p class="card-text" id="desc" contentEditable="true">Some quick example text to build on the card title and make up the bulk of the' card\'s content.</p><a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a><a href="#" class="close" onclick='deleteCard(this)'>Delete</a></div></div>`;
document.getElementById("lastRow").innerHTML+=element;
});
function deleteCard(delBtn){
delBtn.parentNode.parentNode.hidden = true
}
Notice for the function I added and the onclick that enables the hiding action.
Here is a codeped link for you to test by your self what I did.
Hope this was helpful, any other questions will be great :)
I am new in VUE JS.
I have a form where I want to add multiple media.
So on click of "Add media" button i want to add "li" tag with respective html content in which i have on remove button too.
On click on remove button i want to delete the respective li.
What will be the best way to do this?
Here is what i have done so far
HTML:
<div class="col-md-10">
<button #click="addMediaRow()" class="btn btn-primary" :disabled="mediaRowCount >= 3" type="button">Add Media</button>
<br>
<br>
<ul style="list-style-type: none; padding: 0;" id="project_media_ul">
<li v-for="(row, index) in mediaRowArr">
<span v-html="row.template"></span>
</li>
</ul>
</div>
JS
In data i have declared variable
mediaRowLI: '<a v-on:click="openMediaFileInput"><i class="fa fa-camera fa-2x"></i> \n' +
' <span class="photospan">Add Photo </span></a>\n' +
' or Input Video URL here : <input type="text" class="form-control"\n' +
' placeholder="use embed URL, e.g. www.youtube.com/embed/EXa9ZeqRKl8"\n' +
' name="media_video_url" style=" width: 50%">\n' +
' \n' +
' <i class="fa fa-close"></i>\n' +
'\n' +
' <input multiple type="file" accept=\'image/x-png,image/jpeg\' name="media_images"\n' +
' style="visibility: hidden;">\n' +
''
Methods :
addMediaRow () {
this.mediaRowArr.push({
template: this.mediaRowLI
})
},
removeMediaRow (key) {
this.mediaRowArr.splice(key, 1)
},
Thanks in advance
Note that:
you cannot use v-html to compose template partials, because Vue is
not a string-based templating engine. Instead, components are
preferred as the fundamental unit for UI reuse and composition.
(source)
meaning html raw with v-on:click="removeMediaRow" doesn't work.
As the documentation says, you should create a component instead.
(jsfiddle example here)
Hi I have some issue regarding Css and I have not been able to do it.
how to move those numbers which are highlighted to left with names.
I have tried flex direction margin auto etc but I cannot get desired result.
here is my html code
<section class="favorites">
<div class="category" *ngFor="let category of categoryKeys">
<div class="sub-header">{{category}}</div>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="panel.Tests.length === 0" *ngFor="let panel of testSelectionSession.FavoritesByCategory[category]"
id="{{panel.Id}}" [title] = "panel.Name">
<ng-template ngbPanelTitle>
<span class="test-length" style=""> {{ '(' + panel.Tests.length + ')'}}</span>
<div class="action-items">
<span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(panel.Code), 'next-day-2x': isNextDay(panel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
(ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
</app-custom-accordion>
I am trying to move this tag to left
<span class="test-length" style=""> {{ '(' + panel.Tests.length + ')'}}</span>
can someone help me regarding this issue?
The simplest solution will be including
'(' + panel.Tests.length + ')'
in the panel title:
<ngb-panel [disabled]="panel.Tests.length === 0" *ngFor="let panel of testSelectionSession.FavoritesByCategory[category]"
id="{{panel.Id}}" [title] = "panel.Name + '(' + panel.Tests.length + ')'">
The component seriously resembles a table, making contents of a separate column float left seems hard to achieve. Although I'm not familiar with ngb-panel.
I have code that's dynamically creating a 3 column image grid from a mySQL database using a JSON array and jQuery .append. How would I pass the database $row ID (array index) of each image in the <div> created by the .append using an href to a modal? I'm calling/building the modal with an AJAX statement.
The line below is from the full $.getJSON statement further down. I believe I can pass the ID in the href but I'm not sure where or how?
// These lines generate the clickable grid images
<a href="equipment.php?id=' + data.Surfboards[row].Surfboard.id + '">
<img class="photog-headshot" src="images/' + data.Surfboards[row].Surfboard.imageName + '" alt="' + data.Surfboards[row].Surfboard.imageName + '">
JSON Parser - builds the image grid:
//gets the JSON from surfboards.php
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="photog-group clearfix"><figure class="cap-bot"><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a href="#dataModal" class="view_data"><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption><p>Board Name: '
+ data.Surfboards[row].Surfboard.boardName
+ '<br>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
Modal for Images:
<!-- Ajax Database Modal Start -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Surfboard Details</h4>
</div>
<div class="modal-body" id="surfboard_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Link to page with working table example and blank modal on image click: Nalu.live/equipment
Link to github repo
Please let me know if any additional information is needed.
Please consider that I'm still a student and very new to web development.
Thanks for any help.
I solved this with the help of a classmate. Working code is in the GitHub repo at the link below. Please note, the code that builds the image grid from JSON database data is posted below and can also be found in scripts/surfboard.js
I'm happy to answer questions (if I can) or walk anyone though the code if needed.
Nalu Github Repo
//// From Dylan W. on Discord - Replace in the surfboard.js
$.getJSON("surfboards.php", function (data) {
//loop through each surfboard in the JSON file and append a <div> with the surfboard information
$.each(data.Surfboards, function (row) {
$("#board_table").append(
'<div class="equip-content">' + '<div class="photog-group custom-modal clearfix" data-title="'+ data.Surfboards[row].Surfboard.boardName +'" data-image="images/'
+ data.Surfboards[row].Surfboard.imageName +'" data-description="'+
data.Surfboards[row].Surfboard.caDescription +'"><figure><a href="equipment.php?id='
+ data.Surfboards[row].Surfboard.id
+ '"><a data-target="#surfboardModal" data-toggle="modal"><div class="equip-content-overlay"></div><img class="photog-headshot" src="images/'
+ data.Surfboards[row].Surfboard.imageName + '" alt="'
+ data.Surfboards[row].Surfboard.imageName
+ '"></a><figcaption class="fadeIn-bottom"><h1>'
+ data.Surfboards[row].Surfboard.boardName + '</h1>'
+ '<hr>'
+ '<p>Year Shaped: '
+ data.Surfboards[row].Surfboard.year + '</p></figcaption><figure></div>');
});
});
});
I'm trying to update the text of a p element which has a .bus_latitude class.
So first, I locate the parent div which has a data-* attribute.
After retrieving the div, I try to locate his closest p element which has the class .bus_latitude, and set his text to some static content.
I have tried enoumerous ways, specially because jQuery has various methods to do so, but none of them worked.
So here I inject a div with has a data-id attr
this:
var div = $('<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 bus_card" data-id="'+bus.getKey()+'"><br/><br/>'+
'<div class="thumbnail">'+
' <div class="caption">'+
' <div class="col-lg-12">'+
' <div class="header">'+
' <h4 class = "line_name" style="text-align:center;color:'+line.child("colorNormal").val()+';"><strong>Linha '+line.getKey()+'</strong></h4>'+
' </div>'+
' </div>'+
' <div class="col-lg-12 well well-add-card">'+
' <h4 class="pull-left">Cartão:</h4>'+
' <h4 class="pull-right">'+bus.child('cardid').val()+'</h4>'+
' </div>'+
' <div class="col-lg-12 bus_information">'+
' <div style="padding-left:10px!important;" class="row">'+
' <p class="pull-left"><kbd>Latitude</kbd></p>'+
' <p class="pull-right bus_latitude">'+bus.child('lat').val()+'</p>'+
' </div>'+
' <div style="padding-left:10px!important;" class="row">'+
' <p class="pull-left"><kbd>Longitude</kbd></p>'+
' <p class="pull-right bus_longitude">'+bus.child('long').val()+'</p>'+
' </div>'+
' <div style="padding-left:10px!important;" class="row">'+
' <p class="pull-left"><kbd>Velocidade:</kbd></p>'+
' <p class="pull-right bus_velocity">35km/h</p>'+
' </div>'+
' <div style="padding-left:10px!important;white-space: nowrap; overflow:hidden;" class="row">'+
' <p class="pull-left"><kbd>Geo-localização:</kbd></p>'+
' <class = "bus_georeference">  '+streetNameOfPosition+'</>'+
' </div>'+
' </div>'+
' <button type="button" class="btn '+(bus.child('state').val() === 1 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Terminal</button>'+
' <button type="button" class="btn '+(bus.child('state').val() === 2 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Andamento</button>'+
' <button type="button" class="btn '+(bus.child('state').val() === 3 ? 'btn-danger' : 'btn-default')+' btn-xs btn-update btn-add-card">Em Paragem</button>'+
' </div>'+
'</div>'+
'</div>').appendTo("#bus-cards-container");
So I have an event listener for a button to update the p element with some static content.
Here is where it isn't working:
function updateBusOnHTML(bus) {
alert(bus.getKey());
$("div[data-id='" + bus.getKey() +"'] .bus_information .bus_latitude").val("39.284035"); //this doesn't work, bus.getKey()
}
Both data-id are correct, even when the HTML is rendered, the div has the exact same id with the one that enters updateBusOnHTML().
So why doesn't it update the p text?
.val() is used to update the value of a form element like input. Use a method like .text() or .html() instead.
Another recommendation: use console.log() instead of alert().