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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Rowclick rendering view #54359

    tetrasil
    Participant

    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 🙂

    Rowclick rendering view #54376

    Dimitar
    Participant

    Hello tetrasil,

    Please check out the demo Popup Editing, which showcases a similar scenario.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.