How to customize edit event in JsGrid - javascript

I'm using jsGrid and want to know if it's possible how to customize onclick event of editButton. Basically, doing something like displaying modal instead of inline editing. I know that we can get the HTML output of control column like this :
{
type: 'control',
itemTemplate: function() {
var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments); // Array of string
return $result;
}
}
But how to have control on EditButton?

You can try this:
editItem: function(item) {
var $row = this.rowByItem(item);
if ($row.length) {
console.log('$row: ' + JSON.stringify($row)); // I modify this
this._editRow($row);
}
},
at your jsGrid config.
All lines except line // I modify this are default from original source of jsGrid, so dont change them.

Related

How to wrap a container div around a Ckeditor table onOk

When a user enters a table on the Ckeditor, I want to wrap a div around it with a class but I can't find a way to get this table HTML element. What is the best way to go about it?
I've tried creating a plugin to extend the table dialog onOk function (see code). This gives me all the properties from the table dialog but I don't want to have to create the whole table element again with all the properties as I don't want to re-write the existing table plugin.
I just need to get the code this plugin adds and wrap it in a div.
I thought about doing it in my projects javascript, when page loads, get all tables and wrap it in a div. However, this doesn't seem like the best way to do it at all. I thought there must be a way via ckeditor?
CKEDITOR.plugins.add( 'responsivetables', {
// The plugin initialization logic
init: function(editor) {
vsAddResponsiveTables(editor);
}
});
function vsAddResponsiveTables(editor){
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table') {
addTableHandler(dialogDefinition, editor);
}
});
}
function addTableHandler(dialogDefinition, editor){
dialogDefinition.onOk = function (a) {
// get table element and wrap in div?
}
}
I found the answer so for anyone else that needs it, this is what I did:
I used the insertElement event instead of when dialog was closed, only doing what I need if its a table that's being added.
// Register the plugin within the editor.
CKEDITOR.plugins.add( 'responsivetables', {
// The plugin initialization logic goes inside this method.
init: function(editor) {
vsAddResponsiveTables(editor);
}
});
function vsAddResponsiveTables(editor){
// React to the insertElement event.
editor.on('insertElement', function(event) {
if (event.data.getName() != 'table') {
return;
}
// Create a new div element to use as a wrapper.
var div = new CKEDITOR.dom.element('div').addClass('table-scroll');
// Append the original element to the new wrapper.
event.data.appendTo(div);
// Replace the original element with the wrapper.
event.data = div;
}, null, null, 1);
}
To the previous answer by 'gemmalouise' need to add one more line of code
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'responsivetables';
}
Otherwise it will not work (I cannot indicate this in the comment, because lack of 50 reputation).
And more compact code of this fuctional:
CKEDITOR.plugins.add('responsivetables', {
init: function (editor) {
editor.on('insertElement', function (event) {
if (event.data.getName() === 'table') {
var div = new CKEDITOR.dom.element('div').addClass('table-scroll'); // Create a new div element to use as a wrapper.
div.append(event.data); // Append the original element to the new wrapper.
event.data = div; // Replace the original element with the wrapper.
}
}, null, null, 1);
}
});

How to access a method inside Kendo UI's filterable itemTemplate?

I have a Kendo grid in which one of the columns is filterable. However to ensure proper localization of the values in the filterable popup, I need to call a method within the itemTemplate , which will return the localized value of the data.
I have tried implementing this in a sample DOJO , it worked . However this doesn't work for my actual code. My code looks a little like this. The kendo grid is created inside the Marionette View. I can't really find the difference between the dojo and my code. In my case it gives an error that the method is not defined.
Any leads on this will be appreciated.
define(function(require) {
var MarionetteView = Marionette.View.extend({
init: function(){
//init Variables
},
createGrid: function(){
var kendoGrid = $("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
itemTemplate: function(e) {
//Test Method is not accessible here
return "<span><label><span>#= test(data.country|| data.all) #</span><input type='checkbox' name='" + e.field + "' value='#= data.country#'/></label></span>"
e.field + "' value='#= data.country#'/></label></span>"
}
}
}],
filterable: true,
dataSource: [ { country: "BG" }, { country: "USA" } ]
});
function test( text ){
return text + 1;
}
}
)};
return MarionetteView;
}
The reason why it works in your DOJO is because the function is created in the scope of the Window. Since the Grid is also created in the Window scope, you could access test() in the item template.
In your case, your scope is changing to the Marionette view. So, if you would like to use test now, it will have to do something like this:
window.test = function(text){ //Your logic }
This should work.

How to update/add buttons once instantiated datatables

I am new to JavaScript and I lack knowledge javascript objects.
I would like to know how I can add the extension of the datatable 1.10 button once created .
My code is:
var table;
$('#MyDiv').DataTable({someCode;});
$.fn.dataTable.ext.buttons.ok = {
text: 'OK',
action: function (e, dt, node, config) {
console.log("Hi");
}
};
table = $('#MyDiv').DataTable();
//!Here I want to add my button in table var!
Option 1
The easiest way to do it (in my opinion) is to use the option form of the button declaration, instead of the function form you are attempting to use here. In your case, that would look something like this:
table = $('#MyDiv').DataTable({
/*Other DataTables config options go here*/
buttons: [
{
text: 'OK',
action: function ( e, dt, node, config ) {
console.log("Hi");
}
}
]
});
This can be found in the DataTables examples, which is a great source for DataTables information.
Option 2
If instead you wish to keep using the function notation, then you would simply have to add a button declaration to the options instead of the whole action/text block that is there in the above example. See below:
var table;
//You should not have 2 .DataTable() calls, so I removed this one
//Move any other options you had to the other call below
$.fn.dataTable.ext.buttons.ok = {
text: 'OK',
action: function (e, dt, node, config) {
console.log("Hi");
}
};
table = $('#MyDiv').DataTable({
/*Other DataTables config options go here*/
buttons: [
'ok'
]
});
Either way should work, it just depends on how you prefer to organize your code.
I'd also refer you to the custom buttons documentation on the DataTables website to get more information or to see where I got these code blocks from.

Sorting Tablesorter columns by input value

I am using jQuery Tabelsorter and it's working great.
But I want inside every -field an input-tag where the value for the sorting-script is located inside the input value param.
NOW: <td><?php echo $value; ?></td>
GOAL: <td><input value="<?php echo $value; ?>"></td>
How can I tell jQuery Tablesorter the new "value" location?
Found at Tablesorter 2.0 Samples http://tablesorter.com/docs/example-option-text-extraction.html
Example:
textExtraction: function(node) {
// extract data from markup and return it
return node.childNodes[0].childNodes[0].innerHTML;
}
My try but not working:
textExtraction: function(node) {
// extract data from markup and return it
return node.childNodes[0].val();
}
Instead of table sorter use kendoui.its provide more features & easy to use
kendoui
Tthe original tablesorter plugin has an issue using the updateCell method, so this method will not work when updating input values. But you can try my fork of tablesorter which doesn't have this issue.
Here is a demo of the all of the code below put together.
Basically instead of using textExtraction which applies to ALL table cells, you just need to add a parser:
$.tablesorter.addParser({
id: "inputs",
is: function () {
return false;
},
format: function (s, table, cell) {
return $(cell).find('input').val() || s;
},
type: "text"
});
then tell tablesorter which column to apply it to (zero-based index):
$('table').tablesorter({
headers: {
0: { sorter: "inputs" } // zero-based index (first column = column 0)
}
});
Then make sure any changes to the inputs (unless you make them read-only) are recognized by tablesorter and sent to your server
var resort = true, // resort table after update
// update all input types within the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'),
// instead of $('table')
$(window).load(function () {
// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
var alreadyUpdating = false;
$('table').find('tbody').on('change', 'input', function (e) {
if (!alreadyUpdating) {
var $tar = $(e.target),
$table = $tar.closest('table');
alreadyUpdating = true;
$table.trigger('updateCell', [ $tar.closest('td'), resort ]);
// *** update your server here ***
setTimeout(function () {
alreadyUpdating = false;
}, 10);
}
});
});

Create Generic Javascript/Jquery ajax function

I'm new to javascript, jquery, and ajax and need help making my code more efficient. I have the following javascript/jquery function that works fine:
<script type="text/javascript">
$(document).ready(function()
{
$("#promo1").change(function() //select menu id that triggers script on change
{
//data here
$.ajax
({
//ajax stuff here
{
//individual values from json array
//set each value textbook value
$("#discprice1").val(disc);
$("#itemprice1").val(total);
$("#tax").val(tax);
$("#grandtotal").val(grand);
}
});
});
});
</script>
I change my original function to this after a suggestion:
<script type="text/javascript">
$(document).ready(function()
{
var setupCalculation = function(index) {
$("#promo" + index).on("change", function() //select menu id that triggers script on change
{
//rest of the function is here....
and change my select to this:
<select name="promo<?php echo $i; ?>" id="promo<?php echo $i; ?>"
onchange="setupCalculation('<?php echo $i; ?>');">
However, it is not working. What am I missing?
However, I need to do the same thing 10 times for 10 different rows of calculations. How can I make it so I can use this function generically and just pass the "id" of the select box to the function and not repeat this code 10 times for each of the selectors, e.g. #promo1, #promo2, #promo3, etc....
I'm assuming I need to add onchange="javascript function here();" to the html code, but I can't get it to work.
Thanks!
This is a case when you should write a little plugin. Take a look how it can look like (I did'nt get what exectly you need but you will grasp the idea):
$.fn.myFirstPlugin = functin() {
return this.each(function() {
// This is currect select box
var $select = $(this);
// Change event
$select.change(function() {
// Do something for this select box; $(this) will point to current select element
$.ajax({ ... })
});
})
};
Then you would use it like:
$('#promo1, #promo2, #promo3').myFirstPlugin();
Instead of using an "onchange" attribute inline, I would use your current approach to wireup the event handler. That way you can define a function setupCalculation that wires up the logic for a given select list.
$(document).ready(function() {
var setupCalculation = function(id) {
$("#" + id).on("change", function() {
// ajax/calculation logic
});
}
setupCalculation("promo1");
setupCalculation("promo2");
// ...etc
});
If the result elements are different (eg discprice2, discprice3, etc), then it may be better to pass an index to the function instead, and hard-code the name part of the ids:
var setupCalculation = function(index) {
$("#promo" + index).on("change", function() {
// ajax stuff
$("#discprice" + index).val(disc);
// etc
});
}
Edit Using the form onchange=setupCalculation(), the function should look like this (no need to wire up the change event):
$(document).ready(function()
{
window.setupCalculation = function(index) {
//rest of the function is here....
sounds like your select boxes look like
<select id="promo1">...</select>
<select id="promo2">...</select>
add a class to each one
<select id="promo1" class="promo">...</select>
<select id="promo2" class="promo">...</select>
so that you can select all the boxes with one simple selector for the change event function:
$(".promo").change(function() {
...
});
You could set up a jQuery function and call it from the selected object:
$.fn.changePromo = function() {
/* return this jQuery object to allow chaining and execute in an 'each()' to allow multiple elements */
return this.each( function() {
$( this ).change( function() {
/* your ajax call here */
} );
} );
}
/* call examples */
$( '#promo1' ).changePromo();
$( '#promo1,#promo2' ).changePromo();

Categories

Resources