Howdy...

We want to have the datagrid maintain state, so that when a user comes back to the grid their filters, page and sort is maintained.

The problem is I don't know how to setup the pager or datagrid to notify the server that the request is coming from a button click or filter instead of just a standard page call. When the datagrid loads, it sends all the filter and pagination information as if the user clicked a button. There's not way to identify user interaction versus a page request.

The simplest way would to have a post variable added only when a button is pushed, or filter selected.

Ideas?

Thanks - but what I'm looking for is to enable or disable the check box on a row by row basis. For some data grids, we want to show the data - but the user can't select (or unselect) some of the rows.

I have a datagrid that has the check box column, and I would like to enable/disable the checkbox depending on row data passed to the datagrid.

I'm assuming that I can't do this with the default checkbox property, and will have to write a custom editor via formatter.

Is there a better way to selectively enable / disable a checkbox on a row by row basis?

Thanks.

We have a Data Grid that is marginally complex. Merging Cells between rows, and about 15 columns. Grouping the data visually has become an issue in order to provide the fastest way to view the data.

We are thinking that column lines might be important in these visual groupings, applying them as end-caps to the grouped columns. e.g. front of column 6, and back of column 8, etc.

First question: How are others styling the Data Grids to visual group information?

Second question: Is there an equivalent to styler for adding a class instead of inline CSS? I would prefer to have a CSS Class that I can update centrally than a bunch of inline-styles. (Granted I could use a centralized function call, but if it's a class the designers can update it themselves.

Thanks - much appreciated.

When you do a load form, with a combobox, if you have a value to "set" in the combo box and the value doesn't exist, the load method puts the unmatched value in the textbox. e.g. I'm trying to set the combobox value to "5", and since 5 doesn't exist in the drop down, "5" is put in the textbox instead.

It should just not load the value at all. (Same with form submission, if the data in the text box doesn't match an option in the drop down, it shouldn't submit that unmatch value/text with the form submission.)

Anyway, is there an event I can utilize to detect this "failed" setValue? Or do I have to manually check it with the validate / isValid method immediately after setting it?

UPDATE: Here is a Fiddle I setup to show the action described above:

http://jsfiddle.net/FrEHv/

I also added the validate / isValid check - and it always returns true. How can I verify the data entered if it's always validates true? Or am I using this method incorrectly?

We have a dialog box that is expandable, so we only hcenter it. It works most of the time very well. Once in awhile the dialog's top starts off screen (too high), otherwise it stays within it's parent as per inline = false.

I'm not sure what's causing the re-positioning, but if we close and open back up it goes back to normal.

We are not doing any other positioning like forcing an x,y position for the upper left corner.

Ideas?

P.S. If I turn inline = true the top of the dialog always appears off screen.

We are still seeing intermittent row selected problems. The row is being un-selected by "something" between activating the menu and the selection of the menu option.

This only happens when the grid has merged cells.

Not sure the best path to debug this issue. Ideas welcome.

P.S. The issue was we had singleSelect="false" on the grid where we were merging cells. This caused the row to unselect sometimes when clicking on the menu link.

Thanks, much appreciated. I'll check this out.

Thanks - that's where I ended up.

Probably not "fixable" but merging the cells plays havoc with some for the datagrid methods. Hope that gets a look at to see if there are more direct ways to get the row data.

But I only want the "selected" row and it's two "siblings". Seems like a waste to grab them all, look for the selected row, and the next two that I really want.

The "..." is just our menu anchor. Click on that get our menu and then select the action you want. Edit / Remove / Etc.

Here's some code:

Table Headers HTML:

Code:

   <thead>  
        <tr>  
            <th field="BankUserName" width="100" sortable="true">Bank User</th>  
            <th field="AccountNumber" width="90" sortable="true">Acct #</th> 
            <th field="Action" width="30" formatter="(function(value, row, index){ return rowAction(row); })">&nbsp;</th>
            <th field="CCY" width="40" sortable="true">CCY</th>  
            <th field="ThresholdTypeName" width="50" sortable="true">Type</th>  
            <th field="isInitiator" width="60" sortable="true">Initiator</th> 
            <th field="InitiatorThreshold" width="80" sortable="true" formatter="(function(value, row, index){ return rowNumber(value); })">Threshold</th>  
            <th field="isApprover" width="60" sortable="true">Approver</th> 
            <th field="ApproverThreshold" width="80" sortable="true" formatter="(function(value, row, index){ return rowNumber(value); })">Threshold</th>  
            <th field="isReleaser" width="60" sortable="true">Releaser</th>  
            <th field="ApprovalStatus" width="70" sortable="true">Status</th> 
            <th field="Niente" width="500">&nbsp;</th> 
        </tr>  
    </thead>

rowAction Menu

Code:

    function rowAction(row) {
        return "<a href='javascript:niente();' style='text-decoration:none;' onclick='showMenu(this)'> ...</a>";
    }

Menu HTML

Code:

<div id="mm" class="easyui-menu" style="width:120px;">  
    <div data-options="name:'edit',iconCls:'icon-edit'">Edit</div>  
</div>  

Menu JS

Code:

    function showMenu(object) {
        var pos = $(object).offset();

        $('#mm').menu("show", {
            left: pos.left,
            top: pos.top
        });
    }
        $('#mm').menu({
            onClick: function (item) {
                switch (item.name) {
                    case "edit":
                        editAccount();
                        break;
                }
            }
        });

Edit Code:

Code:

    function editAccount() {
        var row = $('#dgAccounts').datagrid('getSelected');
        $.messager.confirm('Warning', "Changes will require approval, do you wish to proceed?", function (r) {
            if (r) {
            <snip>
            }
        });
    }

So we click on ".." to active the menu, choose Edit (it's our only option), and when editAcount activates, the getSelect does not alway return an object.

var row = $('#dgAccounts').datagrid('getSelected');

This only happens when we merge the cells. When we don't have any cells merged the above works perfectly.

Here's how we are merging the cells:

Code:

            onLoadSuccess: function (data) {
                var rowCount = 0;
                var mySize = Object.size(data);
                mySize = (mySize != 0 ? mySize + 1 : 0);
                while (rowCount < mySize) {
                    $('#dg').datagrid('mergeCells', {
                        index: rowCount,
                        field: 'BankUserName',
                        rowspan: 3
                    });
                    $('#dg').datagrid('mergeCells', {
                        index: rowCount,
                        field: 'AccountNumber',
                        rowspan: 3
                    });
                    $('#dg').datagrid('mergeCells', {
                        index: rowCount,
                        field: 'Action',
                        rowspan: 3
                    });
                    rowCount = rowCount + 3;
                }

            }

this might be helpful:

http://www.jeasyui.com/tutorial/datagrid/datagrid16.php

Another way might be to use the formatter option. pass in the path and image name, and reformat it as an image tag.

What does your JSON look like that is returned by get_users.php ?