I am trying to change the class attribute that Backpack 4.1 isusing for the element in a list operation.
Currently I end up with something like this:
<table id="crudTable" class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs dataTable dtr-inline collapsed has-hidden-columns" cellspacing="0" aria-describedby="crudTable_info" role="grid">
I would actually need to insert 'table-dark' and remove 'bg-white' from it to combine it with our design. How would this work?
I could change the container div but that won't do in this case it seems :)
Thanks
Currently the only option is to create the same view file in your project, in which Backpack will pick up your view instead of the package view. Of course, this means you'd forfeit all updates to that file, since Backpack will be using yours.
So you can do that using php artisan backpack:publish crud/list. This will copy the package file to your resources/views/vendor/backpack/crud/list.blade.php where you can make any changes you want to it.
If you don't want to create a custom blade template (as #tabacitu mentions, this will lock you out of updates), another option is to add a script via a widget that listens for the DataTables init event:
In your crud controller:
use Backpack\CRUD\app\Library\Widget;
protected function setupListOperation()
{
Widget::add()->type('script')->content('path/to/script.js');
}
And the script:
$('#crudTable').on('init.dt', function() {
$(this).removeClass('bg-white');
$(this).addClass('table-dark');
});
Related
I'm trying to make a simple extension of the table element. Where you can click a td, then it becomes editable, and when you edit the data it gets automatically persisted via a REST service.
Here's what I got so far
As you can see, you can click the td's and edit them, but the data does not get persisted to the other side (which is firebase in this case). That's because the data in the td's aren't bound anymore to the data-property from which they came. Can somebody tell me how I can bind them to that property again? Or any other way I can persist the data to the correct row and key?
As far as I know contenteditable change events are not supported by polymer.
You could use the onkeys to update the model manually.
In a on-* handler, you can access the named model instance using: e.target.templateInstance.model.:
<polymer-element name="x-foo">
<template>
<template repeat="{{user in users}}">
<div on-click="{{clickHandler}}">{{user.name}}</div>
</template>
</template>
<script>
Polymer('x-foo', {
clickHandler: function(e, detail, sender) {
console.log(sender.templateInstance.model.user.name);
}
});
</script>
</polymer-element>
Sevesta told me that it could only be done manually, so I gave every td extra data-attributes so I could identify them and then at the stopEditing() function I update the models manually.
See here.
One part of my meteor application is a semi-collaborative table where users can edit different rows at the same time. When a user is editing a row, the static text values need to switch to input boxes so that the values can be edited and then saved. I would like a template/helper to do this, essentially I want:
<td>
{{#if iAmEditing}}
{{foo}}
{{else}}
<input type="text" name="foo" value="{{foo}}">
</td>
except that there are several columns with different values of "foo" and I don't want to copy and paste this several times. What's the right way to approach this with templates and helpers?
Another approach might be to use the HTML5 contenteditable attribute. Either way, what is the right way to template these values with handlebars?
You should be able to integrate with Bootstrap Editable
For reference, an answer to the original question...
As of today, handlebars partials can't accept anything other than a context argument, but helpers can. Hence. you can define a helper that sets up the context for the template:
Coffeescript:
Handlebars.registerHelper "eventCell", (context, field, editable) ->
return new Handlebars.SafeString(
Template._eventCell
_id: context._id
field: field
value: context[field]
editable: editable
)
Template:
<template name="_eventCell">
<td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
{{value}}
</div></td>
</template>
Then, I just use the following to render each field:
{{eventCell this "province" iAmEditing}}
I ended up integrating with bootstrap editable, so the template is a little different than my original question. Also, I'm not sure if this is the best way to do it, but it's a lot cleaner than what I had before.
meteor-editable is a new project implementing something like x-editable, but nicely integrated with Meteor reactivity. Unfortunately inline editing is not supported yet (you have to use a popover the way it's set up now).
I would like to set an own table style as default style within the TinyMCE editor (version 3.4.9 within Moodle 2.2.3).
Right now, my new styles are shown in the dropdown, but I cannot manage to get one as the default table style. The default value is always "-- not set --", which means that no table style will be used.
This is how it looks at the moment:
https://img.skitch.com/20111226-f4wgp8kudx45t6e2s17yse4cq6.jpg
This is how it should look like at the end ("Tircia Style" should be default):
https://img.skitch.com/20111226-dcf3t3w7qxagst1xgr2ieas26b.jpg
Pictures are from the TinyMCEforum.
When you initialize tinymce please add the path to a new css file which will define the styles used within the editor.
tinymce.init({
content_css: [
'/css/innerLayout.css'
]
});
Some sample styles for innerLayout.css for tables -
.mce-content-body table{width:100%;border-spacing:0;border-collapse:separate;border:0}
.mce-content-body table tr:nth-child(even){background:#FAFAFA}
.mce-content-body table caption,.mce-content-body table td,.mce-content-body table th{padding:15px 7px;border:0;font:inherit}
.mce-content-body table th{font-weight:400;color:#6E6E6E;border-bottom:2px solid #B9B9B9!important;
Other styles can be found here - link
Don't modify core files. I realize there previously wasn't a choice, but in TinyMCE 4.x there is now a way to set default table styles with table_default_styles.
http://fiddle.tinymce.com/iUeaab
in tables.js add the following code:
function init() {
settings = tinyMCE.settings;
settings["table_styles"] = "default1=red;default2=blue;" + settings["table_styles"];
tinyMCE.settings["table_styles"] = settings["table_styles"];
I had the same issue and I tried to solve it by passing Configuration or changing library JavaScript files. I started doing reverse engineering of table.js (/tiny_mce/plugins/table/js/table.js). But, no luck.
So, I went to table.htm (/tiny_mce/plugins/table/table.htm) which is template file for table plugin's modal dialog box. Commented out preset option {#not_set} form the select control.
<tr id="styleSelectRow">
<td><label id="classlabel" for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<!--<option value="" selected="selected">{#not_set}</option>-->
</select>
</td>
</tr>
Now, you should pass table_styles always to the initial configuration when we initiate TinyMCE.
var varTimyMCE = $("textarea").tinymce({
table_styles : "Custom 1=classTable1",
});
This is not the ideal solution but it works for now. I hope TinyMCE developer will give configuration options to control select control in the future releases.
You can edit the plugin.js(\tinymce\js\tinymce\plugins\table\plugin.js) if you are using the unminified tinyMCE.js. On the current version it is line 1872. I added to make the default table styling responsive.
html = '<div class="table-responsive"><table class="table"><tbody>'; // line 1882 or 1916
html += '</tbody></table></div>'; // line 1884 or 1928
I'm new to ASP.NET MVC 2, and I need some advice on the best 'Control' to use for this situation. (I'm know ASP.NET MVC doesn't really use server controls, but there are a number of add-ons such as MVC Controls ToolKit).
Here's what I need to do. I have a table in a database which contains a list of tests. I need to be able to display these in a View, and allow the user to select them in some way (via checkboxes or whatever).
Then I need to be able to determine which items are selected.
Can someone tell me the best way to achieve this?
Any help/comments are appreciated.
TIA.
If you do it with client side functionality, it will end up consisting mainly of two parts:
The visual HTML
The functional Javascript
How would I'd do it
I'd create a partial view that displays the table. If you need to reuse this, put the partial in Views/Shared folder
Each TR of the table would have serialized JSON of the object that is displayed in that particular row. Serialization can be done by writing a custom object extension method, so you can call ToJson() on any object afterwards
<tr data='<%= this.Model[0].ToJson()'>
<td class="actions"> Select ... </td>
<td>...</td>
...
</tr>
Mind the extra column with actions that you need to provide.
also add a Javascript that would provide the client side functionality (important: this script uses jQuery)
$(function(){
var selection = {};
$(".actions a.action-select").click(function(evt){
evt.preventDefault();
var context = $(this);
var rowObj = $.parseJSON(context.closest("tr[data]").toggleClass("selected").attr("data"));
if (selection[rowObj.Id])
{
// deselect
delete selection[rowObj.Id];
}
else
{
// select
selection[rowObj.Id] = rowObj;
}
});
This way your rows will have additional selected class when they're selected and your selection object will always have selected rows (or better said their objects) taht you can use however you please.
Additional note
Why did I set selection to be an object rather than an array? Because Javascript objects are kind of associative arrays so searching for a particular element is faster than enumerating over its elements it it was a normal array. This way I can immediately see whether row is selected or not and also remove an element from it directly.
Outcome
This way you'll have a reusable table that you can put on various pages (hence similarities with user controls). but in case you'd need to add several of these tables to your pages you'd have to tweak them a little so that client-side functionality won't mix data between different tables.
I am trying to access an HTML table from code behind, and set its visible="false" property (depending on what value the user has selected). The table has an id value and a runat=server attribute.
How can I call the table from the code behind in C# 2008 and set its display?
Make sure you have your table set up to run at server.
Example
<table id="tblMyTable" runat="server">
....
</table>
On server side you can access it by using the variable tblMyTable
To hide the visibility is not simple. There is not a property for it since it is a Html control rather than a server control.
I would wrap the table in an ASP.NET control such as a panel, and hide the panel.
I would wrap the table in an <asp:Panel control and change the visible property on that instead.
Seting the visibility from the codebehind is a simple as setting the Visible property:
table_control.Visible = false;
If you are doing this in response to some client side activity, then you need some javascript:
document.getElementById("<%= table_control,ClientID %>").style.display = "none";
or jQuery:
$("#<%= table_control,ClientID %>").hide();
Call this from an onclick or onchange event, as needed for your page.
we can hide the table control from server side use the following code in server side at which event you want to hide the table
your html code
<table id="tblMyTable" runat="server">
....
</table>
your server code in which event you want to hide table
tblMyTable.Style.Add("display", "none");
You should use an <asp:Table> control if you want to access the table from code behind eg
<asp:Table ID="Table1" CssClass="data" runat="server" CellSpacing="0">
<asp:TableHeaderRow>
<asp:TableHeaderCell>SKU</asp:TableHeaderCell>
<asp:TableHeaderCell>Description</asp:TableHeaderCell>
<asp:TableHeaderCell>Quantity</asp:TableHeaderCell>
<asp:TableHeaderCell>Amount</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
Bind data to the table eg. like so:
var row = new TableRow();
row.AddCell(stock.Sku);
row.AddCell(stock.Description);
row.AddCellTextbox("txtQty", cart.Values[key]);
row.AddCell(stock.Price.ToString());
Table1.Rows.Add(row);
Note: The table control doesnt provide viewstate for items added in code, for that you need to use a GridView or similar control.
In-order to set the visibility of the Table you need to set the Runat="server" attribute to your table
Design View:
....
Code Behind (C#)
tbl_test.Visible=false;
Try this it works... ;)