How can I generate Semantic UI dynamic popup - html

First I create my dynamic table and add the data-content to the table. Then I add my popup code but it is not working. How can I solve this problem?
var attachmentList = $("#newTable");
var table = $('<table id="list-table"></table>')
.addClass('ui very basic table listpeople');
var row = $("<tr class='tablerow'></tr>");
$("<td>").addClass("collapsing general-popup")
.attr("colspan", 3)
.html("<center><div class='ui image fluid label clearfix ellipsisSection wait-popup' id='wait-approve' data-content='Hello Stackoverflow'>" + labelMessage + "</div></center>")
.appendTo(row);
table.append(row);
attachmentList.append(table);
$('.wait-popup').popup();

Related

Dynamic apply the costom css to tabulator table cell

Dynamic apply the costom css to tabulator table cell
I need to change the style of "ID" column depands on dynamic number. It was done as you can see the tail of my codes but use SPAN tag to make it works.
Of coz i want to use CSS style sheet to make it look nice and i tried somethings like:
<div class="myclass">ID</div>
<font class="myclass">ID</font>
to make it work but fail.
How can i add costom CSS to tabulator table cell?
Or any better suggestion for my case?(Dynamic apply the costom css to tabulator table cell)
var table = new Tabulator("#table_1", {
height:"100%",
rowHeight:40,
layout:"fitColumns",
movablecolumns:true,
vertAlign:"middle",
columns:[
{title:"name", width:25,hozAlign:"center"},
{title:"age", width:80, hozAlign:"left" },
{title:"sex", width:25,hozAlign:"center",headerSort:false, headerVertical:true},
{title:"ID", width:25, hozAlign:"center", headerVertical:true,
formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value <= 3){
return "<span style='width:20px;height:20px;background-color:blue;color:white;'>" + value + "</span>"
}else{
return "<span style='width:20px;height:20px;background-color:red;color:white;'>" + value + "</span>"}
}
},]})

KendoUI export to excel not rending footer properly

I have a column on my kendoUi grid that has anchor tags for the entire column including the footer, here is my code for that:
columns.Bound(p => p.NonFlagged).Title("Non Flagged").Width(100)
.ClientTemplate(
"<a onclick='ShowPatientGapDetailsModal(" + "#=MeasureId#" + ")' href='\\#'>#=NonFlagged#</a>")
.ClientFooterTemplate("<a onclick='ShowPatientGapDetailsModal()' href='\\#'>#=sum#</a>");
It works fine for all the rows except the footer, which shows the full html anchor tag as you can see here:
Has anyone seen this before or have any suggestions?
it is because grid exports only data. Not templates. For usage templates into excel export you have to use ExcelExport event.
Here is small code snippet which I hope helps you.
Anyway I didn't work with footers and excel yet but I am sure there will be same rules like with normal data. Probably it will not work as you need but can kick you right direction.
I have met this behaviour when I had checkboxes in cells or datefields etc.
excelExport: function (e) {
var sheet = e.workbook.sheets[0];
var data = [];
for (var i = 1; i < sheet.rows.length; i++) {
var dataItem = {
FieldWithMyTemplate: e.data[i].FieldWithMyTemplate, // In e.data are data from row in grid
};
var row = sheet.rows[i];
for (var j = 0; j < row.cells.length; j++) {
var template = kendo.template(this.columns[j].template);
row.cells[j].value = template(dataItem);
}
}
};
Edit: Forgot to mention that in e.Data at first index ([0]) are data from headers. So on the last one will be your footer data.

How to hide a column in the Webgrid in aspasp.net MVC?

I am new to MVC and I use Webgrid to display some customer values.
I need to hide columns together with their headers. How do i do this?
CSS: gridhide { visibility:hidden }
Code: grid.Column("Id", "ID", style: "gridhide"),
I hide particular column:
Please Try This:
WEBGRID
grid.Column(null,null, format: #<input type="hidden" name="IDHidden" value="#item.IDHidden"/>),
I ended up using jQuery to hide the column on the client side. Not ideal but easy to implement. Eg to hide the second column:
$('td:nth-child(2),th:nth-child(2)').hide();
Another option would be to simply not add the column to the grid in the first place like so, as seen here: https://forums.asp.net/post/5850519.aspx
var books = db.Query(sql);
var columns = new List<WebGridColumn>();
columns.Add(new WebGridColumn(){ColumnName = "BookId", Header = "Book Id" });
if(books.Any(b =>b.Price != null)){
columns.Add(new WebGridColumn(){ColumnName = "Price", Header = "Price" });
}
var grid = new WebGrid(books);
gridhide is a class, define class instead of style in grid.column

Add string to html element for javascript parsing?

I have a menu that is created dynamically with javascript.
First it looks for for section elements with a certain attribute eg:
<section something="add"></section>
And adds them to the menu. It also needs to get the title that will appear on each menu item from each element, eg:
<section something="add" something2="Services"></section>
I don't need any help with the js I just want to know how to add the data to the elements and what names give to the attributes. How should I do it?
it would be easy if we set an ID to section
<section id="sectionUniqueID" data-example="add"></section>
Then manipulate with setAttribute and getAttribute .
// 'Getting' data-attributes using getAttribute
var section = document.getElementById('sectionUniqueID');
var example = section.getAttribute('data-example');
alert(example);
// 'Setting' data-attributes using setAttribute
section.setAttribute('data-example2', 'substract');
var example2 = section.getAttribute('data-example2');
alert(example2);
Working Demo
Reference: http://html5doctor.com/html5-custom-data-attributes/
Here's what I am doing for my dynamic menu items (note: i have no idea what language you're using server side. I use node.js server side and jade for my client side templating).
Note that because you have not asked a precise enough question, I am not exactly sure what you need. You say you want to add data, give us an example of the data you are working with.
Server side:
var user_id = req.session.user.user_id;
// mysql statement to retrieve menu items
mysql.query('select * from menu where user_id = ?',[user_id], function(e, r) {
var menu;
// r would be array of objects:
// [{menu_name: "one", link: "http://foobar.com"},{menu_name:"two",
// link:"http:otherlink.com"}];
if (r.length > 0) menu = r;
else menu = [];
res.render('menu', {menu: menu});
});
Client side:
html
body
section#submenu.navbar
ul#menu
- if (menu.length > 0)
- for (var i = 0; i < menu.length; i++)
li
a(href=#{menu[i].link})= menu[i].menu_name

setSpacing in VerticalPanel vs. HorizontalPanel

Horizontal spacing using .setSpacing() within HorizontalPanels seems to work as expected when the App is included into a GoogleSite as App Gadget (Firefox), but I can't figure out how to control vertical spacing within widgets in VerticalPanels:
var panel_A = uiApp.createHorizontalPanel();
panel_A.add(t1).add(t2).setSpacing(30); // works as expected, horiz. space betw. t1 & t2
var panel_B = uiApp.createHorizontalPanel();
panel_B.add(t3).setSpacing(30); // shifts t3 widget to the right
var panel = uiApp.createVerticalPanel();
panel.add(panel_A).add(panel_B).setSpacing(10); // has no apparent effect
The docs do distinguish between a vertical setSpacing() and a horizontal setSpacing() but I'm clearly missing something. Thanks.
EDIT
Simplifying things further and combining various setHeight and setSpacing settings won't change the spacing between t1,t2,t3 (5 x 3 table charts). Ive tried enclosing the vpanel within an hpanel (I've been able to control the hpanel's width) but that didn't alter the vertical spacing between the three tables.
var uiApp = UiApp.createApplication();
var vpanel = uiApp.createVerticalPanel().setHeight('50%');
vpanel.add(t1).add(t2).add(t3);
uiApp.add(vpanel);
return uiApp;