jQuery UI Widgets › Forums › Grid › Rowclick rendering view
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 9 months ago.
-
AuthorRowclick rendering view Posts
-
Hi,
I really didn’t find in this topics help for my problem, so I’ll ask 🙂 In my index.cshtml view in mvc is included javascript that contains jqxgrid. I am trying to make on that grid that if I click on a row, popup window opens with some other view on it(for example edit.cshtml), like this http://www.google.ba/imgres?imgurl=http%3A%2F%2Fwww.trirand.com%2Fjqgridwiki%2Flib%2Fexe%2Ffetch.php%253Fmedia%253Dwiki%3Aformeditshot.jpg&imgrefurl=http%3A%2F%2Fwww.trirand.com%2Fjqgridwiki%2Fdoku.php%3Fid%3Dwiki%3Aform_editing&h=297&w=532&tbnid=Hko2eEkQy8ir6M%3A&zoom=1&docid=sWT_jg77tuX39M&ei=rBZxU4KsIZSGyQOJ8oGABQ&tbm=isch&client=firefox-a&ved=0CFAQMygBMAE&iact=rc&uact=3&dur=741&page=1&start=0&ndsp=12
my code is…
var jqgPersonsCurrentPage = 0;
$(document).ready(function () {
LoadPaymentAccountsGrid();$(‘#btnSearch’).click(function () {
$(“#jqgPersons”).jqxGrid(‘updatebounddata’);
});});
function LoadPersonsGrid() {
var url = “/PaymentAccount/PersonSearch”;
// prepare the data
var source =
{
//type of data
datatype: “json”,
datafields: [
{ name: ‘PersonId’, type: ‘int’ },
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘CantonCode’ },
{ name: ‘IsActive’ },
{ name: ‘ValidTo’ }
],
id: ‘Id’,
url: url,root: ‘data’,
pagesize: 10,
pagenum: jqgPersonsCurrentPage,
beforeprocessing: function (data) {
source.totalrecords = data.TotalRows;
},pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}};
var dataadapter = new $.jqx.dataAdapter(source);
var editrow = -1;//initialize jqxGrid
$(“#jqgPersons”).jqxGrid(
{
width: ‘100%’,
source: dataadapter,
autoheight: true,
pageable: true,
selectionmode: ‘singlerow’,columns: [
{ text: ‘Number’, datafield: ‘PersonId’, width: 150 },
{ text: ‘Firs Name’, datafield: ‘FirstName’, width: 150 },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 150 },
{ text: ‘Canton Code’, datafield: ‘CantonCode’, width: 150 },
{ text: ‘Active’, datafield: ‘IsActive’, width: 150 },
{ text: ‘Valid’, datafield: ‘ValidTo’, width: 150 }
]
});//this is my problem part…what to do to get other view (or other url opened) in popupwindow with edit form filled with details from grid and editable
$(“#jqgPersons”).bind(‘rowclick’, function (event) {
editrow = event.args.rowindex;
var offset = $(“#jqgPersons”).offset();
var dataRecord = $(“#jqgPersons”).jqxGrid(‘getrowdata’, editrow);
alert(dataRecord.PersonId);
alert(dataRecord.FirstName);
alert(dataRecord.LastName);
alert(dataRecord.CantonCode);
alert(dataRecord.IsActive);
alert(dataRecord.ValidTo);// get the clicked row’s data and initialize the input fields.
$(“#PersonId”).val(dataRecord.PersonId);
$(“#FristName”).val(dataRecord.FirstName);
$(“#LastName”).val(dataRecord.LastName);
$(“#CantonCode”).val(dataRecord.CantonCode);
$(“#IsActive”).val(dataRecord.IsActive);
$(“#ValidTo”).val(dataRecord.ValidTo);
//show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 250, resizable: false, isModal: true, autoOpen: false,saveButton: $(“#Save”), modalOpacity: 0.01, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#PersonId”).jqxInput(‘selectAll’);
});$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
alert(“Save ” + editrow);
if (editrow >= 0) {
var row = {
PersonId: $(“#PersonId”).val(), FirstName: $(“#FirstName”).val(),
LastName: $(“#LastName”).val(), CantonCode: $(“#CantonCode”).val(),
IsActive: $(“#IsActive”).val(), ValidTo: $(“#ValidTo”).val()
};var rowID = $(‘#jqgPersons’).jqxGrid(‘getrowid’, editrow);
$(‘#jqgPersons’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);};
});});
}Thanks 🙂
Hello tetrasil,
Please check out the demo Popup Editing, which showcases a similar scenario.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.