I am using MVC 4 + EF 4.1 with jqgrid.
I am new with HTML & Javascript and I am trying without success opening a custom edit jquery dialog inside jqgrid. If you have better methods to implement my desired behaviour, they would be welcome.
I have the following jquery dialog script, attached to the class=’openDialog‘, which already works fine for other purposes:
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
height: $(this).attr("data-dialog-alt"),
width: $(this).attr("data-dialog-larg"),
autoResize: $(this).attr("data-dialog-autosize"),
position: 'top',
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
buttons: { "Ok": function () { $(this).dialog("close"); } }
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
This is what I’m trying to do. This is just a test with double click event, if it works I will put the code inside a specific button.
jqgrid
..........
{ name: 'act', index: 'act', width: 75, sortable: false, search: false }
],
ondblClickRow: function (id) {
if (id != null) {
// here I would like to launch the open dialog with a similar code:
// "<a class='openDialog' data-dialog-id='myEditDlg' data-dialog-autosize='false' data-dialog-alt='580' data-dialog-larg='740' data-dialog-title='test dialog' href='/mycontroller/EditDlg/myid'>test</a>"
}
},
pager: '#jqpager',
....
MORE DETAILS
Basically, now I am using a custom formatter, where I put a button styled anchor for each button/action I need; for example:
.....
gridComplete: function () {
applyZebra("mygrid");
var ids = grid.jqGrid('getDataIDs');
var rows = grid.jqGrid('getRowData');
for (var i = 0; i < ids.length; i++) {
var row = rows[i];
var t = row['myrow'];
var cl = ids[i];
tst = '<a class="mybuttonclass openDialog" data-dialog-id="tckDetDlg" data-dialog-autosize="false" data-dialog-alt="580" data-dialog-larg="740" data-dialog-title="test dialog" href="/mycontrolller/testDlg/' + t + '"></a>';
$("#jqTicketgrid").jqGrid('setRowData', ids[i], { act: tst });
}
},
.....
Where mybuttonclass styles the anchors like a button…
Thank you very much for your help!
Best Regards
I am not sure that I understand correct your requirements. I would recommend you to use
jQuery.jqGrid.dynamicLink.jswhich I described in the answer and which you can download from here or the last version from here (and download here). The usage offormatter: 'dynamicLink'is very easy and you can implement practically every link inside of jqGrid. You can useonClickcallback which would create the dialog which you need.One more remark to your code. On every click you create
<div>which represent the dialog and place it in the<body>of the page. Thecloseevent only hide the div, but not remove it from the body. So the first problem: your page will be longer and longer on every click. The second problem is the possibility to get id duplicates which are not permitted in HTML and if you do add different elements with the same id you can have many very strange effects. So you should be very careful in the usage ofdata-dialog-idattribute from your current code.UPDATED: I wanted to comment the code from
gridCompletewhich you posted. It’s not effective and you can use custom formatter to get more clear and effective code. You don’t posted the full code of jqGrid which you use, but I suppose that you have at least two columns in thecolModel: ‘act’ and ‘myrow’. You cant to place in ‘act’ column the<a>elements havinghrefwhich are constructed based on the value from the ‘myrow’ column.What the current code do. 1) the grid will be build and placed on the page with empty ‘act’ column. Then inside of
gridCompleteyou do the following: a) callgetDataIDswhich goes through the full grid and collect the ids from every row in the arrayids. b) callgetRowDatawhich goes through the full grid and collect all data from all column in objects and place the objects in arrayrows. c) get the content of the ‘myrow’ column, construct<a>and place it in'act'column *in every row of grid. You should additionally understand that changing of one element on the page follows the web browser have to recalculate the position of every element on the page.So to improve the performance of the page you should first of all reduce the modifications of the elements on the page. The most effective way to rewrite the code and have the same results is to use custom formatter. In you case you can just include in
'act'fromcolModelan additional property:You should additionally verify that you use
gridview: trueoption of jqGrid. The modified code will do the following. During constructing the HTML fragment of the body of the grid the full HTML fragment will be build as one string and will be placed to the HTML page in one operation. In the moment the web browser will recalculate position of other elements on the page and all will be done. So the code will be the same, it will be shorter, easy to read and it will work much more effective especially in case of many rows of the grid.If you would use
dynamicLinkformatter which I suggested you before the code can be like the following:The above code will be clear to read and understand in my opinion. The code from
onClickwill be the same as with you could use inside ofondblClickRow. In both cases you need just know therowidonly. So you can place the code ofonClickin a function instead of the usage of anonymous function and call the function in both cases: