0

JQgrid code

    function LeaveHalfDay() {
    var url1 = URL

    $("#LeaveHalfDayDataEntryList").jqGrid({
        url: url1,
        datatype: 'json',
        mtype: 'POST',
        colNames: ['RowId', 'With Halfday <br /> Morning', 'With Halfday <br /> Afternoon', 'Date', 'Day'],
        colModel: [
                { name: 'rowId', index: 'rowId', hidden: true, editable: true, sortable: false, width: 80, align: 'left' },          
                {name: 'cbox_leave_half', index: 'cbox_leave_half', editable: true, formatter: cboxFormatterLeaveHalfDay, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
                { name: 'cbox_leave_halfPM', index: 'cbox_leave_halfPM', editable: true, formatter: cboxFormatterLeaveHalfDayPM, formatoptions: { disabled: false }, edittype: 'checkbox', editoptions: { value: "True:False" }, sortable: false, width: 70, align: 'center' },
                { name: 'LStartDate', index: 'LStartDate', editable: false, sortable: false, width: 70, align: 'left' },
                { name: 'LDate', index: 'LDate', editable: false, sortable: false, width: 70, align: 'left' }           
          ],
        pager: $('#LeaveHalfDayDataEntryPager'),
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: '',
        sortorder: '',
        viewrecords: true,
        imgpath: '/Content/themes/redmond/images/',
        height: '100%',
        loadComplete: function (result, rowid) {
            var ids = jQuery("#LeaveHalfDayDataEntryList").getDataIDs();
            var len = ids.length, newLine;
            if (len < 5) {
                AddNewRowToGrid(len, "#LeaveHalfDayDataEntryList");
            }
            $("#LeaveHalfDayDataEntryPager").css("width", "auto");
            $("#LeaveHalfDayDataEntryPager .ui-paging-info").css("display", "none");
        }
    });
    return false;
}

I have this function for the AM checkbox inside my jqgrid

$('.cbox_leave_half').live('click', function (e) {
    var tr = $(e.target).closest('tr');        
    var target = $(e.target).is(':checked');
    HalfDayrowsObj[tr[0].id].HalfDay = $(e.target).is(':checked'); 
    _hashalfday = _hashalfday + 1;
    var EmployeeId = $("#hidEmployeeId").val();
    var StartDate = $("#LSDate").val();
    var EndDate = $("#LEDate").val();
    var noofdays = $("#txtNoDays").val();
    if (StartDate != "" && EndDate != "") {

        if (HalfDayrowsObj[tr[0].id].HalfDay == true) {
            NoOfHalfDay = NoOfHalfDay + 4;
            ComputeTotalDayHourLeave(EmployeeId, StartDate, EndDate, NoOfHalfDay);
            noofdays = parseFloat(noofdays) - parseFloat('.5');
            $("#txtNoDays").val(noofdays);
            $("#hidNoofDays").val(noofdays);
            $("#txtNoHrs").val(noofdays * 8);
        }
        else {
            NoOfHalfDay = NoOfHalfDay - 4;
            ComputeTotalDayHourLeave(EmployeeId, StartDate, EndDate, NoOfHalfDay);
        }
    } 
});

For PM checkbox

$('.cbox_leave_halfPM').live('click', function (e) {
    chkrowidPM = $(this).closest("tr").attr("id");
    var tr = $(e.target).closest('tr');
    var target = $(e.target).is(':checked');
    HalfDayrowsObjPM[tr[0].id].HalfDayPM = $(e.target).is(':checked'); // update the checked date on HalfDayrowsObj.
    _hashalfdayPM = _hashalfdayPM + 1;
    var EmployeeId = $("#hidEmployeeId").val();
    var StartDate = $("#LSDate").val();
    var EndDate = $("#LEDate").val();
    var noofdays = $("#txtNoDays").val();
    if (StartDate != "" && EndDate != "") {

        if (HalfDayrowsObjPM[tr[0].id].HalfDayPM == true) {
            NoOfHalfDay = NoOfHalfDay + 4;
            ComputeTotalDayHourLeave(EmployeeId, StartDate, EndDate, NoOfHalfDay);
            noofdays = parseFloat(noofdays) - parseFloat('.5');
            $("#txtNoDays").val(noofdays);
            $("#hidNoofDays").val(noofdays);
            $("#txtNoHrs").val(noofdays * 8);
        }
        else {
            NoOfHalfDay = NoOfHalfDay - 4;
            ComputeTotalDayHourLeave(EmployeeId, StartDate, EndDate, NoOfHalfDay);

            noofdays = parseFloat(noofdays) + parseFloat('.5');
            $("#txtNoDays").val(noofdays);
            $("#hidNoofDays").val(noofdays);
            $("#txtNoHrs").val(noofdays * 8);
        }

    }
    if ($('.cbox_leave_halfPM').is(':checked')) {
        $('#divLeaveIsHalfDay').attr('checked', 'checked'); // checked Half Day if one of the checkboxes is checked.            
    }
    else {
        $('#divLeaveIsHalfDay').removeAttr('checked'); // unchecked Half Day if one of the checkboxes is unchecked.

    }
});

And this code for toggle a checkbox inside my jqgrid

Thanks to vijayP for this code.

 if ($(this).attr("checked", true)) {
    $(tr).find('.cbox_leave_halfPM').attr("checked", false);
}

Now my problem is I want to determined if the AM/PM is check or not.

For example they both uncheck AM/PM and i check the PM and it has a condition to subtract the # of days and # of hours. I'm having a trouble to make a condition that if the AM is check or uncheck to click the PM with the same row. I hope you guys understand :).

  • Why don't you use same name for the checkboxes, and get the value which returns array of checked values. – Vinod Gubbala Aug 10 '16 at 07:29
  • Which version of jqGrid you use and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? You use for example `imgpath` option, which not exist already in the version 3.5, (more as 7 years ago.old version). – Oleg Aug 10 '16 at 08:36
  • @Oleg oh sorry i forgot again to mention my jquery version. `<= 1.8.2` so old :) –  Aug 10 '16 at 08:40
  • I asked you about the version of **jqGrid**. 1.8.2 is probably the version of **jQuery UI**. – Oleg Aug 10 '16 at 08:41
  • By the way, the version of jQuery could be important too if you have to use some retro (very old) version of jQuery. For example you write about the usage `.attr("checked", false)`. It's wrong for jQuery version >=1.6. You should use `.prop("checked", false)` instead. In any way **setting** of checkbox inside of `if` condition is very bad (see `if ($(this).attr("checked", true)) {...}` which should be `if ($(this).prop("checked")) {`) – Oleg Aug 10 '16 at 08:47
  • @Oleg sorry for being beginner. I'm don't know yet what version of jqgrid i am using. All i can see in my `Scripts>userdefined> is jquery.jqgrid.js` but don't have any version. Sorry. –  Aug 10 '16 at 08:50
  • @Oleg I see it now.. its `jqGrid 4.4.4 - jQuery Grid ` –  Aug 10 '16 at 08:52
  • You can open `jquery.jqgrid.js`, `jquery.jqgrid.src.js` or `jquery.jqgrid.min.js` in text editor and see the version in the comment at the beginning of the file. If you don't **require** any specific version then I would recommend you to use **[free jqGrid](https://github.com/free-jqgrid/jqGrid) 4.13.4**. If you included 4.4.4 from NuGet then you used wrong package. You can deinstall NuGet package of 4.4.4 and install [this one](https://www.nuget.org/packages/free-jqGrid) in version 4.13.4. – Oleg Aug 10 '16 at 08:53
  • Which version of jQuery you use (or have to use)? You use `jQuery.live` in your code. It's **deprecated** since jQuery 1.7 version. If you have no explicit requirement to jQuery version then you should use jQuery 1.12.4 if you need support of old web browsers and jQuery 3.1.0 if you can be sure that IE8 and lower don't need be supported. I write much about the versions of jQuery, jQuery UI and jqGrid because **the same code can be wrong or correct depend on the version of products which you use**. – Oleg Aug 10 '16 at 09:04
  • [The old answer](http://stackoverflow.com/a/24239416/315935) with [the corresponding demo](http://www.ok-soft-gmbh.com/jqGrid/EditableCheckbox1.htm) could be interesting for you too. It shows how to use `beforeSelectRow` instead of multiple `.live('click'` – Oleg Aug 10 '16 at 09:33
  • @Oleg sorry but the demo is different for what i am looking. –  Aug 11 '16 at 02:15
  • @Yure: The demo shows how to use `beforeSelectRow` to have callback on `click` on **any** cell of jqGrid. It registers **one** `click` handler on ``. It will be called on click on any internal (inner) element of grid because of bubbling. Thus you can use `beforeSelectRow` instead of `.live('click'`. `$(e.target)` gives you information about the clicked element. The element `$(e.target).closest("td")` or more exactly `$(e.target).closest("tr.jqgrow>td")` to get the clicked `
    ` element. You can use `$(e.target).closest("tr.jqgrow>td").next("").find("input:checkbox")` for example.
     – Oleg Aug 11 '16 at 06:00
  • @Oleg - I try your suggested method and its working fine. But i'm having a problem for the code for check/unchecking`(toggle)` the checkboxes because it affect some of my code. :( –  Aug 11 '16 at 07:00
  • @Yure: One have to know the version of jQuery which you use. If you don't use some retro version (if you use version >1.6) then you can use `$elem.prop("checked", true)` to check element, `$elem.prop("checked", false)` to unckeck it and `$elem.click()` to toggle it. You can use `$elem.is(":checked")` to test whether the checkbox `$elem` is checked or unchecked. You should use `attr` and `removeAttr` only if you use retro version of jQuery (<1.6). See "Attributes vs. Properties" part of [the documentation](http://api.jquery.com/prop/). – Oleg Aug 11 '16 at 07:31

0 Answers0