How to implement edit in modal popup in grid, modal popup opens on click of icon

[Sudeshna23Member]

Hi,

I have a grid containing user details whose 2 columns have edit and delete icons in them.On click of icon it opens edit or delete modal popup respectively, using which I should be able to edit or delete the particular row selected. On click of icon the popups open and the values are filled in.Though the cancel button in the popup works, the edit/delete functionalities themselves in the popup donot. Following is the code. Kindly help.

$(document).ready(function () {
var source = {
datatype: “json”,
datafields: [{ name: ‘UserName’ },
{ name: ‘FirstName’ }, { name: ‘Phone’ }, { name: ‘City’ },
{ name: ‘Discontinued’, type: ‘bool’}],
url: ‘User/GetUsers’,
id: ‘UserID’,

};

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
var editrow = -1;
var deleterow = -1;
$(“#jqxgrid”).jqxGrid({
width: 860,
source: dataAdapter,
editable: true,
theme: ‘darkblue’,
filterable: true,
sortable: true,
pageable: true,
selectionmode: ‘singlerow’,
editmode: ‘click’,
groupable: true,
enabletooltips: true,
autoshowfiltericon: true,
columns: [{ columntype: ‘checkbox’, datafield: ‘discontinued’, width: 100 },

{ text: ‘UserName’, datafield: ‘UserName’, width: 150 },

{ text: ‘FirstName’, datafield: ‘FirstName’, width: 180 },

{ text: ‘Phone’, datafield: ‘Phone’, width: 200 },

{ text: ‘City’, datafield: ‘City’, width: 120 },

{ text: ‘Edit’, datafield: ‘Edit’, width: 60, cellsrenderer: function () {
return ‘‘;
}
},

{ text: ‘Delete’, datafield: ‘Image’, width: 60, cellsrenderer: function () {
return ‘‘;
}
}

]
});
$(“#discontinued”).jqxCheckBox({ theme: ‘darkblue’, checked: true });
$(‘#clearfilteringbutton’).jqxButton({ height: 25, theme: ‘darkblue’ });
$(‘#filterbackground’).jqxCheckBox({ checked: true, height: 25, theme: ‘darkblue’ });
$(‘#filtericons’).jqxCheckBox({ checked: false, height: 25, theme: ‘darkblue’ });
// clear the filtering.
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
// show/hide filter background
$(‘#filterbackground’).bind(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$(‘#filtericons’).bind(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ autoshowfiltericon: !event.args.checked });
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, height: 230, resizable: true, theme: ‘darkblue’, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#popupWindow1”).jqxWindow({ width: 250, height: 230, resizable: true, theme: ‘darkblue’, isModal: true, autoOpen: false, cancelButton: $(“#CancelD”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: ‘darkblue’ });
$(“#Save”).jqxButton({ theme: ‘darkblue’ });
$(“#CancelD”).jqxButton({ theme: ‘darkblue’ }); //Used in delete modal popup
$(“#Delete”).jqxButton({ theme: ‘darkblue’ });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { UserName: $(“#UserName”).val(), FirstName: $(“#FirstName”).val(), City: $(“#City”).val(),
Phone: parseInt($(“#Phone”).jqxNumberInput(‘decimal’))
};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}

$(“#Delete”).click(function () {
if (deleterow >= 0) {
var row = { UserName: $(“#UserNameD”).val(), FirstName: $(“#FirstNameD”).val(), City: $(“#CityD”).val(),
Phone: parseInt($(“#PhoneD”).jqxNumberInput(‘decimal’))
};
$(‘#jqxgrid’).jqxGrid(‘deleterow’, deleterow, row);
$(“#popupWindow1”).jqxWindow(‘hide’);
}
});

});
});

var buttonClickDelete = function (event, row) {
// open the popup window when the user clicks a button.
deleterow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow1”).jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, deleterow);
$(“#UserNameD”).val(dataRecord.UserName);
$(“#FirstNameD”).val(dataRecord.FirstName);
$(“#PhoneD”).val(dataRecord.Phone);
$(“#CityD”).val(dataRecord.City);
// show the popup window.
$(“#popupWindow1”).jqxWindow(‘show’);
}
var buttonClickEdit = function (event, row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#UserName”).val(dataRecord.UserName);
$(“#FirstName”).val(dataRecord.FirstName);
$(“#Phone”).val(dataRecord.Phone);
$(“#City”).val(dataRecord.City);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}

Edit

UserName:

FirstName:

Phone:

City:

Delete

UserName:

FirstName:

Phone:

City:

Filter Background

Show All Filter Icons

[Sudeshna23Member]

$(document).ready(function () {
var source = {
datatype: “json”,
datafields: [{ name: ‘UserName’ },
{ name: ‘FirstName’ }, { name: ‘Phone’ }, { name: ‘City’ },
{ name: ‘Discontinued’, type: ‘bool’}],
url: ‘User/GetUsers’,
id: ‘UserID’,

};

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
var editrow = -1;
var deleterow = -1;
$(“#jqxgrid”).jqxGrid({
width: 860,
source: dataAdapter,
editable: true,
theme: ‘darkblue’,
filterable: true,
sortable: true,
pageable: true,
selectionmode: ‘singlerow’,
editmode: ‘click’,
groupable: true,
enabletooltips: true,
autoshowfiltericon: true,
columns: [{ columntype: ‘checkbox’, datafield: ‘discontinued’, width: 100 },

{ text: ‘UserName’, datafield: ‘UserName’, width: 150 },

{ text: ‘FirstName’, datafield: ‘FirstName’, width: 180 },

{ text: ‘Phone’, datafield: ‘Phone’, width: 200 },

{ text: ‘City’, datafield: ‘City’, width: 120 },

{ text: ‘Edit’, datafield: ‘Edit’, width: 60, cellsrenderer: function () {
return ‘‘;
}
},

{ text: ‘Delete’, datafield: ‘Image’, width: 60, cellsrenderer: function () {
return ‘‘;
}
}

]
});
$(“#discontinued”).jqxCheckBox({ theme: ‘darkblue’, checked: true });
$(‘#clearfilteringbutton’).jqxButton({ height: 25, theme: ‘darkblue’ });
$(‘#filterbackground’).jqxCheckBox({ checked: true, height: 25, theme: ‘darkblue’ });
$(‘#filtericons’).jqxCheckBox({ checked: false, height: 25, theme: ‘darkblue’ });
// clear the filtering.
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
// show/hide filter background
$(‘#filterbackground’).bind(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$(‘#filtericons’).bind(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ autoshowfiltericon: !event.args.checked });
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, height: 230, resizable: true, theme: ‘darkblue’, isModal: true, autoOpen: false, saveButton: $(“#Save”), cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#popupWindow1”).jqxWindow({ width: 250, height: 230, resizable: true, theme: ‘darkblue’, isModal: true, autoOpen: false, cancelButton: $(“#CancelD”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: ‘darkblue’ });
$(“#Save”).jqxButton({ theme: ‘darkblue’ });
$(“#CancelD”).jqxButton({ theme: ‘darkblue’ });
$(“#Delete”).jqxButton({ theme: ‘darkblue’ });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { UserName: $(“#UserName”).val(), FirstName: $(“#FirstName”).val(), City: $(“#City”).val(),
Phone: parseInt($(“#Phone”).jqxNumberInput(‘decimal’))
};
$(‘#jqxgrid’).jqxGrid(‘updaterow’, editrow, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}

$(“#Delete”).click(function () {
if (deleterow >= 0) {
var row = { UserName: $(“#UserNameD”).val(), FirstName: $(“#FirstNameD”).val(), City: $(“#CityD”).val(),
Phone: parseInt($(“#PhoneD”).jqxNumberInput(‘decimal’))
};
$(‘#jqxgrid’).jqxGrid(‘deleterow’, deleterow, row);
$(“#popupWindow1”).jqxWindow(‘hide’);
}
});

});
});

var buttonClickDelete = function (event, row) {
// open the popup window when the user clicks a button.
alert(‘HereDelete’);
deleterow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow1”).jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, deleterow);
$(“#UserNameD”).val(dataRecord.UserName);
$(“#FirstNameD”).val(dataRecord.FirstName);
$(“#PhoneD”).val(dataRecord.Phone);
$(“#CityD”).val(dataRecord.City);
// show the popup window.
$(“#popupWindow1”).jqxWindow(‘show’);
}
var buttonClickEdit = function (event, row) {
// open the popup window when the user clicks a button.
alert(event);
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#UserName”).val(dataRecord.UserName);
$(“#FirstName”).val(dataRecord.FirstName);
$(“#Phone”).val(dataRecord.Phone);
$(“#City”).val(dataRecord.City);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}

Edit

UserName:

FirstName:

Phone:

City:

Delete

UserName:

FirstName:

Phone:

City:

Filter Background

Show All Filter Icons

[Sudeshna23Member]

I am unable to enter the html part of the code here- the edit and delete cellsrenderer function return anchor tags within which image tag is present

[Peter StoevKeymaster]

Hi Sudeshna23,

For editing with Popup see this demo: popupediting.htm.

For formatting of code when you post in the Forum, see this topic: http://www.jqwidgets.com/community/topic/code-formatting/

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Sudeshna23Member]

Hi,

Following is the solution that I found for my problem. Using this button click event I was able to edit in the popup.

var buttonClickEdit = function (event, row) {
    // open the popup window when the user clicks a button.
    id = event.target.id;
    var value = $("#jqxgrid").jqxGrid('getcellvalue', id, 'UserID');
    var offset = $("#jqxgrid").offset();
    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.right) + 60, y: parseInt(offset.top) + 20} });
    $("#popupWindow").jqxWindow('setContent', 'Loading...');
    alert(urlRedirectEdit + '/' + value);
    var jqxhr = $.get(urlRedirectEdit + '/' + value, function (data) {
        //alert(data);
        $("#popupWindow").jqxWindow('setContent', data);
    })
                                          .success(function (data) {
                                              // alert("Success");
                                          })
                                          .error(function () {// alert("Failure");
                                          })
                                          .complete(function () {// alert("Complete");
                                          });
    $("#popupWindow").jqxWindow('show');
}

[Author]

Posts