Grid inside jQuery Dialog?

[Adam]

I'm having trouble getting my SlickGrid to work right inside a
jQueryUI Dialog. Is there a working example of this someone can point
me to?

Specifically, I'm running into the following issues...
1. Grid rows don't appear if the dialog is created with autoOpen=false
and the grid is instantiated after the dialog
2. Inline editing seems pretty broken, especially when the dialog is
modal

Here's some sample code that breaks for me. If lines 9 and 10 are
commented out (no jQuery dialog), the SlickGrid works perfectly.

What am I missing?

...
1 <button id="open_btn">Open</button>
2
3 <div id="dialog">
4 <div id="grid"></div>
5 </div>
6
7 <script type="text/javascript">
8 $(document).ready(function() {
9 $("#dialog").dialog({autoOpen:false, modal:true});
10 $("#open_btn").click(function() { $
("#dialog").dialog("open"); });
11 var options = {
12 autoHeight : true,
13 editable : true
14 };
15
16 var columns = [
17 { id:"first", field:"first", name:"First Name",
editor:TextCellEditor },
18 { id:"last", field:"last", name:"Last Name" }
19 ];
20
21 var data = [
22 { id:1, first:"John", last:"Smith" },
23 { id:2, first:"Joe", last:"Jones" },
24 { id:3, first:"Sally", last:"Sails" },
25 { id:4, first:"Bob", last:"Roberts" },
26 ];
27
28 var myGrid = new Slick.Grid($("#grid"), data, columns,
options);
29 });
30 </script>
...

[Doug B]

disclaimer: I am new to slickgrid and there are probably people better
informed that can comment.

One thing to look at is the order of when you create the grid, vs.
when you make visible/create the object in which it is placed (the
parent). I was trying to do this within jquery tabs. I couldn't fire
up a grid in a non-visible tab. I think the grid needs to be able to
detect the parent geometry and it can't do that when the parent has
none (invisible or non-existent). Try putting the slickgrid call
inside the open_btn click handler.

Doug

[Adam]

Thanks, Doug - you're partly right. The order of operations does seem
to matter as far as the initial grid rendering (issue #1) goes.

My main problem at the moment is that if the grid lives in a jQuery
dialog that is *modal*, the Editors don't seem to work right. Cells
seem to switch into Edit mode successfully, but nothing seems to
happen when I type. Switching the dialog to non-modal immediately
resolves the issue.

I even tried using two stacked jQuery dialogs where the bottom one is
modal, and the top one is non-modal and placing the SlickGrid in the
top (non-modal) one...still didn't work right.

Any thoughts on using the TextCellEditor for inline editing grid cells
for a grid in a Modal jQuery Dialog?

[Doug B]

that's a pretty complex setup for me to comment on...what do you see
when you debug? I don't know how modal dialogs have been implemented
to disable or make inactive other objects that you might need to
interact with.

also did you look at the events from slick.grid.js. you could define
these for debugging purposes.

* onBeforeCellEditorDestroy - Raised before a cell editor is
destroyed. Args: current cell editor.
* onCurrentCellChanged - Raised when the selected (active) cell
changed. Args: {row:currentRow, cell:currentCell}.

the first would be interesting because it returns the cell editor
object.

[Eric Beekman]

Hello Adam,

A few weeks ago i was having the same problems. Got it working now.

There are two major things that did it for me.

1: Editorlock. Michael Leibman told me the following:

The grid uses an "editor lock" to synchronize access. By default, it
uses Slick.GlobalEditorLock singleton which gets shared between
multiple grid instances. You should set them up to use different
editor locks by passing a new instance to each grid using
options.editorLock.

So I gave the first grid a new editorlock and that way they are both
able to go in edit mode, without breaking the other.

2: Dialog load on call

To make sure your rows display correctly and directly on loading (this
is just a result of a bigger problem) load it on call.

So, I have an empty div for the dialog somewhere. In my onClick
function of the first grid, i tell the div that it's a dialog, and
load the contents (grid + other html) in it. That way it works
perfect.

When i close the grid, i empty the div again for the next call.

Hope this helps and saves you from lots of debugging!

Eric

[Adam]

@Doug: Good suggestions - I'll try to get some debug info today.

@Eric: Great suggestions, but unfortunately I don't believe my problem
has to do with the EditorLock -- if you look at my example, you'll see
I'm only using a single grid. I did try it out anyways just to see if
it made a difference, but as I suspected it did nothing. Is your
dialog modal? If so, is there any chance you could point me to an
example of it?

I'll keep digging. Does anyone have any example of an editable
SlickGrid working in a modal jQuery dialog?

[Eric Beekman]

Hé Adam,

I have this empty div for the dialog:

<div class="dialog-form" id="dialog-form" title="Title here"></div>

This is my jquery function to open the dialog, run it when i want it
to open, like onclick of a button:

<script>
var openDialog = function() {
$("#dialog-form").dialog({
autoOpen: false,
height: 350,
width: 500,
modal: true,
buttons: {
'Selecteer': function(e) {
if ($('#selected').val() != '')
$input.val($('#selected').val());
$(this).empty();
$(this).dialog('close');
$input.focus().select();
},
'Cancel': function() {
$(this).empty();
$(this).dialog('close');
$input.focus().select();
}
}
});
$("#dialog-form").load('/article/dialog');
$('#dialog-form').dialog('open');
};
</script>

I first make it a dialog and set the options, then load a remote view
(containing the grid) in the dialog, and then open it.

On the select i fetch the selected id (simple input field set by
onclick event of the grid with the PK of the row). Than set what field
you like with that. You could also fetch the entire record with a json
call to set multiple fields.

After that i empty the dialog and close it. And set my focus back to
the input field.

The remote view with the grid is actually a plain and simple one. Uses
JSON to remotely load the data.

The trick for me was loading the remote grid at the click for opening
the dialog, else it would always get broken. (ie not showing rows on
open and breaking the lines).

Hope this helps!

[Adam]

Thanks Eric - can you include the code where you instantiate your
SlickGrid? I'd like to see your Grid Options and Columns definitions.

[Eric Beekman]

Hé Adam,

No problem:


<div class="form">
<div>
<div id="article_list_grid" class="viewlistgrid"
style="width:475px; height:200px;"></div>
<input id="selected_art_code" type="hidden" />
</div>
</div>

<!-- jQuery for SLICKGRID -->
<script>

var article_list_grid;
var article_list_data = [];
var article_list_columns = [
{id:"article_list_art_code", name:"Artikel code", field:"art_code",
cssClass:"cell-title" },
{id:"article_list_art_title", name:"Naam", field:"art_title", width:
200 },
{id:"article_list_sales_price", name:"Stuksprijs",
field:"sales_price", cssClass:"value" },
{id:"article_list_vat_code", name:"BTW", field:"vat_code",
cssClass:"value", width:50 }
];

var article_list_options = {
editable: false,
enableAddRow: false,
enableCellNavigation: true,
forceFitColumns: true,
syncColumnCellResize: true,
asyncEditorLoading: false
};


// IMPLEMENT
$(function()
{

//GRID
$.getJSON('article/get_articles', function(json)
{

for (var i = 0; i < json.length; i++) {
article_list_data[i] = {
art_code: json[i].ART_CODE,
art_title: json[i].ART_TITLE,
sales_price: json[i].SALES_PRICE,
vat_code: json[i].VAT_CODE
}
}

article_list_grid = new Slick.Grid($("#article_list_grid"),
article_list_data, article_list_columns, article_list_options);

article_list_grid.onClick = function (e, row, cell)
{
$('#selected_art_code').val(article_list_data[row]['art_code']);
};

});

});

</script>

[jasonxz]

Hey Adam,

 

Did you ever get this figured out?

[Stephanie]

For the editing problem, it seems to be an issue with z-index. I fixed it by adding the following style to my CSS:

.ui-dialog .slick-cell.editable
{
    z-index: 1005;
}

I also added a style for the header row columns, because the issue was also affecting filtering:

.ui-dialog .slick-headerrow-column 
{
    z-index: 1005;
}

[pclem]

Thank you so much Stephanie! I was messing with the inline editors forever in every major browser and couldn't figure it out.

[Sam Blowes]

Works a charm for me, thanks.

[nishant shete]

Thanks stephanie...it really helped

[nishant shete]

it worked with z-index 9999

On Sunday, 7 November 2010 09:31:54 UTC+5:30, Adam wrote: