EzDevInfo.com

How do I have a list without the -none- option in w2ui?

I want to have a list (select) without the default -none- option using w2ui forms.

How can I remove it so only the items I put in there?

Best way to style w2ui grid

I have been using w2ui grid for displaying information in a table. It has worked great, but I did not particularly like how the table looks. So I was looking to style it. Is there a way to style the table without directly editing the css for w2ui?

How to select W2UI different rows (muti-select ) without using keyboard shift or ctrl or command keys

1. How do I select multiple rows in W2UI grid without using the keyboard?
2. How do I make a selection of a particular row only by using the multi-select checkbox in W2UI without allowing clicking on the entire row?

w2ui-form is there an option to follow redirect

I have a rails app, and I want to redirect to a new path after the form submits successfully. Is there an option to do that with w2ui-form? If not, what is the best way to do it?

Modifing w2ui plugin

I am using w2ui(http://w2ui.com/) plugin.

Consider this example: 1

1. I want when the add button is clicked an empty editable row be appeared in the grid to add a new row?

2. I did not find a config to hide search box, how can I hide it?

3. How can I set a column as id? currently it just recognize recid.

w2ui - toolbar change button image on click

I am using w2ui. I have a toolbar with one button. This button has the icon-image "icon-delete".

When I click on the button, I want it to change the icon-image to "icon-add", but my code doesn't work.

toolbar: {
    items: [{
        type: 'button',
        id: 'hide',
        caption: 'Menü',
        img: 'icon-delete'
    }],
    onClick: function (target, data) {
        if (target == 'hide') {
            this.items.img('icon-add');
        }
    }
}

Fire event on tab change w2ui

I have got some w2ui tabs and I would like to fire an event when a special tab is activated.
I tried:

w2ui["tabs"].add({onClick: function(event) {}});

Which works fine, but when I close another tab and get back to my tab, then my event is not fired.
How can I fire an event on activating my tab?

Render field of form to euro in w2ui

I have got a field in a form with the type 'currency'.
But I get a String like this from ajax: '12.345,67'

How can I render the string to '12345.67' before I put it in the currency field?

$().w2form({
        fields: [
            {field: 'amount', type: 'currency', required: true},                             
        ],
   });

Using w2ui with Rails: Submitting a form

I am trying to build a Rails application with w2ui.

I have hit my first snag when trying to submit a form built with w2ui.

I have a simple model called Project with two attributes: name and description.

The standard, scaffolded form built by Rails submits the form data as follows:

project[name]:Test Project
project[description]:A description

However, the form data submitted by w2ui looks as follows:

record[project[name]]:Test Project
record[project[description]]:A description

That is, w2ui wraps the data further in a record variable, which means I must either change the controller in Rails, which I am not wanting to do, or find a way to get w2ui to not wrap the data the way it does.

My code for w2ui is taken pretty much straight from their demos:

$(function () {
    $('#project_form').w2form({
        name  : 'project_form',
        url   : '/projects.json',
        fields: [
            { name: 'project[name]', type: 'text', required: true },
            { name: 'project[description]',  type: 'text' }
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.submit(); // tried .save() as well, same result
            }
        }
    });
});

First prize would be if w2ui could be configured to do this. Any ideas? I don't see anything in the w2ui docs...

How can I make a layout widget expand to full height in w2ui?

I'm trying out a relatively new JavaScript/jQuery UI library, w2ui. I've got a layout working in my LAMP application, but I am wondering how to make the layout div take the full height of the screen. Here's a demo of a resizable layout from the official site.

Here is the HTML div which will become my layout container:

<div
    id="layout"
    style="width: 100%; height: 600px; margin-bottom: 10px;"
></div>

That works with '600px' as a height, but not '100%', which makes it invisible.

And the JavaScript (a few bits removed just for brevity):

    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
            {
                type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1'
            },
            { type: 'main', style: pstyle, content: 'main' },
            { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
        ]
    });

The layout docs don't mention setting a % height, though it's early days! Perhaps this question will act as a prompt.

One solution would be to read the Y dimension of the top of the layout, and then subtract this from the screen height, and then create the layout of that height. That would probably work, but if the screen resized I'd have to recalculate and reset the height, which is a bit hacky.

I'll try to get an answer through other channels, and if I am successful I'll post it here.

w2uiGrid: Disable delete button on row select

This is related to my question: https://github.com/vitmalina/w2ui/issues/882#event-295994680

Thanks for the response. I have added the code as you recommended, but still does not work. I figured out that the id of the delete button is w2ui-delete by looking at the toolbar.items collection. I am sure I am still missing something, but not sure what.

   onSelect: function(event) {
    event.onComplete = function() {
      if(this.records[event.index].deletable)
        this.toolbar.enable('w2ui-delete');
      else {
        this.toolbar.disable('w2ui-delete');
        $(this.toolbar.items).last().disabled = true;
      }
    }
  }

W2UI Grid Inline Edit with Data Source

I'm using version 1.4.1 of w2ui Grid. I'm trying to do an inline edit whilst loading data from the server using the urls property.

$(function () {
    $('#grid').w2grid({ 
        name: 'grid',
        // begin block that causes grid to be uneditable 
        // url: {
        //    get    : '<?php echo site_url('sections')?>/all',
        //    save   : '<?php echo site_url('sections')?>/save'
        // },
        // end block that causes grid to be eneditable
        show: { 
            toolbar: true,
            footer: true,
            toolbarSave: true,
            toolbarEdit: true
        },
        columns: [  
                  { 
                      field: 'code', 
                      caption: 'Code', 
                      size: '120px', 
                      sortable: true, 
                      resizable: true, 
                      editable: { 
                          type: 'text' 
                      }
                  }
                   ],
         // this records array can be removed once the urls are added back
         records: [
             { recid: 1, code: '100' }
         ]

    });    
});

If I uncomment the "url" block, the "code" field on the grid is no longer editable on double click. If I remove it, it is. Does anyone have a working example of loading data dynamically from the server while also allowing for inline editing?

ANSWER As described below, my return structure was incorrect. I am using CodeIgniter (CI) on the back end and my controller method looks like:

public function all() {
    $data = $this->myModel->findAll ();
    $gridData = new W2GridData ( $data );
    echo $gridData->toJson();  //important to put "echo" here and not "return"
}

where the findAll() method in my model class is:

    function findAll() {
        $query = $this->db->get ( TABLE_NAME );
        return $query->result ();
    }

and my utility class for wrapping a CI db result is now:

<?php
class W2GridData {
    var $total = "-1";
    var $records = "-1";
    function __construct($items) {
        $this->records = $items;
        $this->total = count ( $this->records );
    }
    function toJson() {
        $strValue = json_encode ( $this );
        return str_replace ( "\"id\":", "\"recid\":", $strValue );  // this line was missing
    }
}

As you can see, I was returning "id" straight from the db, and not translating it to w2ui's preferred "recid", thus the grid was not rendering correctly.

W2UI grid: Checked Checkboxes not saving;

I introduced two buttons on the toolbar one 'CheckAll' and the other 'UncheckAll', they are to have effect on a particular column say 'Status' (with checkboxes) in the grid. I wrote two Javascript functions to do this.

function check_all(the_unchecked){
        for(i=0; i<the_unchecked.length; i++){
        the_unchecked[i].checked = true;
    }
}

function uncheck_all(the_checked){
    for(i=0; i<the_checked.length; i++){
        the_checked[i].checked = false;
    }

} The effected field:

{field: 'status', caption: 'Status', size: '50px', searchable: 'text', resizable: true, render: function (records) {
                    if (records.status === true) {
                        return   '<span style="background-color:#a3e9a4; width:100%;display:block;"> <input class="enable_check" type="checkbox" name="enable_check[]" value="true" checked="true"></span>';
                    } else {
                        return  '<span style="background-color:#f69988; width:100%;display:block;"> <input class="enable_check2" name="enable_check[]" value="false" type="checkbox"></span>';
                    }
                }, style: 'text-align:center'},

The problem is when I clicked on Save button the checked buttons are nor sent/saved to the database.

What I want is when CheckAll is clicked it checks all checkboxes in the column Status of the fetched rows, then 'Save' persist all the changes to the database.

w2ui grid how to get sortData to sort on initialize

I have copied the example on the grid sortData http://w2ui.com/web/docs/w2grid.sortData and added sortable:true to lname, but the grid does not sort until I click the header. What am I doing wrong.

Here is the jsfiddle: http://jsfiddle.net/snwaw16v/

$(function () {
    $('#grid').w2grid({
    name    : 'grid',
    columns: [                
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ],
    sortData: [
        { field: 'lname', direction: 'asc' }
    ]
});
});

How to remove file with w2ui plugin

I am using w2ui(http://w2ui.com/) plugin. I am using the upload model.

fields: [
        { name: 'taskName', type: 'text', required: true},
        { name: 'taskDomain', type: 'text', required: true},
        { name: 'mailList', type: 'file', accept:'.txt',options: formoptions('you can only upload file that ext txt',['txt']), required: true}
    ],
function formoptions (placehold,allowExt){
options = {
        selected        : [],       // selected array
        placeholder     : placehold,      
        max             : 0,        
        maxSize         : 0,       
        maxFileSize     : 0,        
        maxWidth        : 250,     
        maxHeight       : 350,    
        maxDropHeight   : 350,      
        silent          : true,    
        renderItem      : null,     
        style           : '',       
        onClick         : null,  
        onAdd           : function (event){
                            s =this;
                            for(var i in event){console.log(i)}
                            event.onComplete=function (argument) {
                                if(!isAllowUpload(event.file.name,allowExt)){
                                    //forbidden filetype
                                    w2alert('just allow'+String(allowExt)+'!');
                                    /***the question is here How do I remove this file***/
                                }
                               }
                            },     
        onRemove        : null,     
        onMouseOver     : null,     
        onMouseOut      : null      
};
return options;
}

I have some questions about using the w2ui upload model. When users uploads a file, we need to check the file to ensure the file type is permitted. How can I exclude files of a forbidden type?