jQWidgets Forums

jQuery UI Widgets Forums Grid Grid Functions

This topic contains 7 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Grid Functions #20000

    gotjam
    Member

    I can’t seem to fire a function. See my grid setup below. Whenever I click on the Edit button, the editrow function does not seem to be triggering at all. Interesting thing is that the deleterow function is working.

    $(document).ready(function () {
    // prepare the data
    var data = {};
    var theme = 'fresh';
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'class_id', type: 'integer' },
    { name: 'period_id', type: 'integer' },
    { name: 'location_id', type: 'integer' },
    { name: 'faculty_id', type: 'integer' },
    { name: 'class_title', type: 'string' },
    { name: 'class_weekday', value: 'integer' },
    { name: 'class_time', type: 'string' },
    { name: 'class_age_min', type: 'integer' },
    { name: 'class_age_max', type: 'integer' },
    { name: 'class_age_range', type: 'string' },
    { name: 'class_limit', type: 'integer' },
    { name: 'class_enrolled', type: 'integer'},
    { name: 'class_available', type: 'integer' },
    { name: 'p_title', type: 'string' },
    { name: 'p_start_date' },
    { name: 'p_end_date' },
    { name: 'instructor', type: 'string' }
    ],
    id: 'class_id',
    url: 'data_classes.php',
    editrow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    var data = "update=true&" + $.param({ class_id: rowid });
    $.ajax({
    dataType: 'json',
    url: 'form_class.php',
    cache: false,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    commit(true)
    },
    error: function (jqXHR, textStatus, errorThrown) {
    // cancel changes.
    commit(false);
    }
    });
    },
    deleterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send delete command
    var data = "delete=true&" + $.param({ class_id: rowid });
    $.ajax({
    dataType: 'json',
    url: 'data_classes.php',
    cache: false,
    data: data,
    success: function (data, status, xhr) {
    // delete command is executed.
    commit(true)
    },
    error: function (jqXHR, textStatus, errorThrown) {
    // cancel changes.
    commit(false)
    }
    });
    }
    };
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    autoheight: true,
    width: 750,
    selectionmode: 'singlerow',
    source: source,
    theme: theme,
    editable: true,
    pageable: true,
    sortable: true,
    filterable: true,
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
    // appends buttons to the status bar.
    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
    var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='img/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
    var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='img/edit.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>");
    var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='img/delete.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
    container.append(addButton);
    container.append(editButton);
    container.append(deleteButton);
    statusbar.append(container);
    editButton.jqxButton({ theme: theme, width: 60, height: 20 });
    deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
    // edit row.
    editButton.click(function (event) {
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    $("#jqxgrid").jqxGrid('editrow', id);
    }
    });
    // delete selected row.
    deleteButton.click(function (event) {
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    $("#jqxgrid").jqxGrid('deleterow', id);
    alert('Class Deleted Successfully.');
    window.location.replace('form_class.php');
    }
    });
    },
    columns: [
    { text: 'Period', datafield: 'p_title', pinned: true, width: 150 },
    { text: 'Class', datafield: 'class_title', pinned: true, width: 130 },
    { text: 'Weekday', datafield: 'class_weekday', width: 75 },
    { text: 'Time', datafield: 'class_time', width: 150 },
    { text: 'Ages', datafield: 'class_age_range', width: 60 },
    { text: 'Limit', datafield: 'class_limit', cellsalign: 'center', width: 40 },
    { text: 'Enrolled', datafield: 'class_enrolled', cellsalign: 'center', width: 60 },
    { text: 'Available', datafield: 'class_available', cellsalign: 'center', width: 100 }
    ]
    });
    });
    Grid Functions #20005

    Peter Stoev
    Keymaster

    Hi,

    jqxGrid does not have “editrow” function so you should not expect it to be called in that way. To update Grid rows, use its “updaterow” method or its “setcellvalue” method.

    Best Regards,
    Peter Stoev

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

    Grid Functions #20009

    gotjam
    Member

    I’m trying to submit a GET request with the selectedrow values to update the row in the database. I named editrow for testing purposes but was using updaterow before.

    So basically what I’m attempting is:

    When a user selects a row and clicks on the Edit Selected button defined below

    editButton.click(function (event) {
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    $("#jqxgrid").jqxGrid('updaterow', id);
    }
    });

    I want to use the updaterow function to submit a GET request with the row values to a php file to postback to the database.

                    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    var data = "update=true&class+id=" + rowdata.class_id + "&period_id=" + rowdata.period_id;
    data = data + "&faculty_id=" + rowdata.faculty_id + "&class_title=" + rowdata.class_title;
    data = data + "&class_time=" + rowdata.class_time + "&class_limit=" + rowdata.class_limit;
    $.ajax({
    dataType: 'json',
    url: 'form_classs.php',
    cache: false,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    commit(true)
    },
    error: function (jqXHR, textStatus, errorThrown) {
    // cancel changes.
    commit(false);
    }
    });
    },

    The updaterow function does not seem to be triggering at all. A similar, or should I say identical approach is in place in my setup for the deleterow function. Upon selecting a grid row and clicking on the Delete button (described below), the function deleterow is being triggered successfully.

                        deleteButton.click(function (event) {
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    $("#jqxgrid").jqxGrid('deleterow', id);
    }
    });

    Here is the delete function again:

                    deleterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send delete command
    var data = "delete=true&" + $.param({ class_id: rowid });
    $.ajax({
    dataType: 'json',
    url: 'data_classes.php',
    cache: false,
    data: data,
    success: function (data, status, xhr) {
    // delete command is executed.
    commit(true)
    alert('Class Deleted Successfully.')
    },
    error: function (jqXHR, textStatus, errorThrown) {
    // cancel changes.
    commit(false)
    alert('Oops. Something went wrong. (FC-DB-03): ' + errorThrown);
    }
    });

    Thanks!

    Grid Functions #20012

    Peter Stoev
    Keymaster

    Hi,

    I suggest you to take a look at our CRUD sample and the help documentation of jqxGrid. The “updaterow” method call in the posted code is passing just the row’s ID, without the Data to be actually updated i.e rowdata is undefined.

    Best Regards,
    Peter Stoev

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

    Grid Functions #20013

    gotjam
    Member

    Maybe I can express this a simpler way: Is there a way to pass the selected row values as a GET request to a php page using the grid functions?

    Grid Functions #20014

    gotjam
    Member

    Will verify this. Thanks a lot.

    Grid Functions #20025

    gotjam
    Member

    Still unable to configure this. Upon clicking this edit button, alert 1 is showing up but not alert 2. It’s as if the click method for the button is not completing and therefore not calling the updaterow function of the grid.

    If I manually edit a grid cell, the updaterow function gets triggered but I need to trigger it with the button before any editing takes place.

                        // edit row.
    editButton.click(function (event) {
    alert("1");
    var datarow = generaterow();
    alert("2");
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    $("#jqxgrid").jqxGrid('updaterow', id, datarow);
    }
    });
    Grid Functions #20030

    Peter Stoev
    Keymaster

    Hi,

    If alert 2 is not called then you have an error on the line above i.e generaterow() – i.e either that function is not defined in your code or you have an issue inside it.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.