[hfParticipant]

I put it in jseditor, but can’t share the link(?)

This is the complete (simplified) code

$(document).ready(function ()
{
	   BuildHourregGrid($("#GridHourreg"));
});

function BuildHourregGrid(grid){
    AdapterHourreg = GetHourreg(grid);

    grid.jqxGrid({
        theme: theme,
        localization: localizationobj,
        editable: false,
        editmode: 'click',
        columnsresize: true,
        width: '100%',
        height: '100%',
        source: AdapterHourreg,
        groupable: false,
        pageable: true,
        pagesize: 10,
        pagesizeoptions: ['5', '10', '20', '30', '50', '75', '100', '250', '500', '1000'],
        autoheight: true,
        virtualmode: true,
        filterable: true,
        showfilterrow: true,
        sortable: true,
        altrows: true,
        enabletooltips: true,
        selectionmode: 'singlerow',
        rendergridrows: function (args) {
            return args.data;
        },
        showtoolbar: false,
        rowdetails: false,
        showrowdetailscolumn: true,
        ready: function () {
            addfilter_dagstaten(grid);
        },
        columns: [
            { text: 'Id', datafield: 'Id', minwidth: 80, filterable: false, editable: false, hidden: true },
            { text: '', datafield: 'Alert', width: 30, filterable: false, cellsalign: 'center', cellsrenderer: CellsRenderer, hidden: true },
            //{ text: 'User', filterable: true, editable: false, width: 75, datafield: 'User', hidden: true },
            { text: 'Naam', filterable: true, filtertype: 'checkedlist', editable: false, width: 75, datafield: 'User', displayfield: 'Naam', filteritems: GetGebuikerFilterlist(),
                createfilterwidget: function (column, htmlElement, editor) {
                    editor.jqxDropDownList({
                        id: "DropdownMedewerkers", displayMember: "Naam", valueMember: "UserId", filterable: true, filterPlaceHolder: 'Zoeken' });
                }
            },
            { text: 'Datum', datafield: 'Date', filterable: true, filtertype: 'range', cellsformat: 'ddd dd-MM-yyyy', columntype: 'inputdate', width: 175, editable: false, hidden: false, cellsrenderer: CellsRenderer },
            { text: 'Status', datafield: 'Status', width: 150, filterable: true, filtertype: 'checkedlist', filteritems: ['concept', 'ingeleverd', 'afgekeurd', 'goedgekeurd'], editable: false },
            { text: 'Opmerkingen', datafield: 'CountComments', minwidth: 80, filterable: false, sortable: false, editable: false, cellsrenderer: CellsRenderer, hidden: false },
            { text: 'Verwerken', datafield: 'CountRows2Archive', minwidth: 80, filterable: false, sortable: false, editable: false, cellsrenderer: CellsRenderer, hidden: true },
        ]                
    });
    
    SetGridHeight(grid);

    grid.on('rowselect', function (event) {
        // event arguments.
        var args = event.args;
        // row's bound index.
        HourregBoundIndex = args.rowindex;
        // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
        HourregRowSelectedData = args.row;

        PanelHourregRows = $('<div class="col-md-12">' +
                RenderInPanel('<h3 class="panel-title">Dagstaatregels</h3>', '<div id="GridHourregRows" style="border: none"></div>', 0) +
            '</div>');

        PanelHourregRows.appendTo(ActivitylogContent);
        BuildHourregRows($("#GridHourregRows"));
    });

}

function BuildHourregRows(grid) {
    AdapterHourregRows = GetHourregRows(grid, 'Start', 'asc');

    grid.jqxGrid({
        theme: theme,
        localization: localizationobj,
        editable: true,
        editmode: 'click',
        columnsresize: true,
        width: '100%',
        source: AdapterHourregRows,
        groupable: false,
        //pageable: false,
        //pagesizeoptions: ['10', '20', '30', '50', '75', '100', '250', '500', '1000'],
        pagesize: 250,
        autoheight: true,
        virtualmode: true,
        filterable: true,
        showfilterrow: false,
        sortable: true,
        altrows: true,
        enabletooltips: false,
        selectionmode: 'singlerow',
        rendergridrows: function (args) {
            return args.data;
        },
        showtoolbar: false,
        ready: function () {
            AddFilterHourregRows(grid);
        },
        columns: [
            { text: 'Id', datafield: 'Id', minwidth: 80, filterable: false, editable: false, hidden: true },
            { text: 'Date', datafield: 'Date', filterable: true, filtertype: 'range', cellsformat: 'ddd dd-MM-yyyy', columntype: 'inputdate', width: 175, editable: false, hidden: true },
            { text: 'Project', datafield: 'Project', filterable: true, width: 75, editable: false, hidden: false },
            { text: 'Order', datafield: 'Ordernr', sortable: true, filterable: true, editable: false, cellsalign: 'right', width: 75, hidden: false, cellsrenderer: CellsRenderer }
        ],
        columngroups:
        [
            { text: 'Kosten', align: 'center', name: 'Kosten' },
            { text: 'Activiteit', align: 'center', name: 'Activiteit' }
        ]
    });

    grid.on('cellbeginedit', function (event) {
        // oude data (gegevens vóór berwerking) vasthouden in array om later (updaterow) nieuwe met oude waarde te vergelijken
        // event arguments.
        var args = event.args;
        // column data field.
        var dataField = event.args.datafield;
        // row's bound index.
        var rowBoundIndex = event.args.rowindex;
        // cell value
        var value = args.value;
        // cell old value.
        var oldvalue = args.oldvalue;
        // row's data.
        var rowData = args.row;

        oldrowdata = grid.jqxGrid('getrowdata', rowBoundIndex);
    });

    //HourregComment
    grid.on('rowselect', function (event) {
        // event arguments.
        var args = event.args;
        // row's bound index.
        HourregRowBoundIndex = args.rowindex;
        // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
        HourregRowSelectedData = args.row;

        var rowindexes = grid.jqxGrid('getselectedrowindexes');

        $("#HourregComment").removeClass("disabled");
        $("#HourregComment").click(function () { HourregCommentClick_event(); });
    });
}

function CellsRenderer(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
    HourregRowSelectedData = rowdata;
    if (columnfield == "Ordernr") {
        var NewCellContent = '<a id="' + value + '" href="#" onClick="orderclick_event(event)">' + value + '</a>';
        return NewCellContent;
    }
}

var orderclick_event = function (event) {
    Ordernr = event.target.id;

    //----- ORDERBEVESTIGINGEN
    var Title = 'Orderbevestiging ' + Ordernr;
    ClientData = GetClientData(HourregRowSelectedData.Opdrachtgever)
    
    BuildDocWindow(Title);
}

function BuildDocWindow(Title) {
     var modalbody = '<div class="row">' +
            '<div class="col-md-4">' +
                    '<div class="row">' +
                        '<div class="col-md-12">' +
                            RenderInPanel('Offertes', '<div id="GridOffertesSmall' + ClientData.Debnr + '" style="border: none"></div>', 0) +
                        '</div>' +
                    '</div>' +
                    '<div class="row">' +
                        '<div class="col-md-12">' +
                            RenderInPanel('Orderbevestigingen', '<div id="GridOrderbevestigingenSmall' + ClientData.Debnr + '" style="border: none"></div>', 0) +
                        '</div>' +
                    '</div>' +
                    '<div class="row">' +
                        '<div class="col-md-12">' +
                            RenderInPanel('Facturen', '<div id="GridFacturenSmall' + ClientData.Debnr + '" style="border: none"></div>', 0) +
                        '</div>' +
                    '</div>' +
            '</div>' +
            '<div class="col-md-8">' +
                '<div class="panel panel-default">' +
                  '<div class="panel-body">' +
                    '<div id="DocDiv"></div>' + 
                  '</div>' +
                '</div>' +
            '</div>' +
        '</div>';
    
    var btndefault = 'Sluiten';
    var btnprimary = '';

    $('#modalwindowLarge').modal();
    $('#modallabelLarge').html(Title);
    $('#modalbodyLarge').html(modalbody);
    $('#btndefaultLarge').html(btndefault);
    $('#btnprimaryLarge').hide();
    $('#modalwindowLarge').modal("show");

    // side bar
    BuildOrderGridSmall($('#GridOrdersSmall' + ClientData.Debnr));
}

function BuildOrderGridSmall(grid) {
    AdapterOrderdataSmall = GetOrderbevestigingdata(grid);

    grid.jqxGrid({
        theme: theme,
        localization: localizationobj,
        columnsresize: true,
        width: '100%',
        source: AdapterOrderdataSmall,
        pageable: true,
        pagesizeoptions: ['5', '10', '20', '30', '50', '75'],
        pagesize: 5,
        autoheight: true,
        altrows: true,
        virtualmode: true,
        showheader: true,
        filterable: false,
        sortable: true,
        showfiltermenuitems: false,
        showfiltercolumnbackground: false,
        rendergridrows: function (args) {
            return args.data;
        },
        ready: function () {
            AddFilterOrderdata(grid);
            grid.on("bindingcomplete", function (event) {
                SelectRowByValue(grid, 'Ordernr', Ordernr);
            });
        },
        columns: [
            { text: 'Order #', datafield: 'Ordernr', columngroup: 'Order', width: 80, cellsalign: 'right' },
            { text: 'Datum', datafield: 'Orddat', columngroup: 'Order', cellsformat: 'dd-MM-yyyy', cellsalign: 'right', width: 100, },
            { text: 'Refer', datafield: 'Refer', minwidth: 175 },
            //{ text: 'Referentie 1', datafield: 'Refer1', width: 175 },
            //{ text: 'Referentie 2', datafield: 'Refer2', width: 175 },
            //{ text: 'Referentie 3', datafield: 'Refer3', width: 175 },
            //{ text: 'OrderBdr', datafield: 'OrderBdr', cellsformat: 'c2', cellsalign: 'right', width: 175 }
        ],
        columngroups:
        [
            { text: 'Order', align: 'center', name: 'Order' },
            { text: 'Pakbon', align: 'center', name: 'Pakbon' }
        ]
    });
    
    grid.on('rowselect', function (event) {
        // event arguments.
        var args = event.args;
        // row's bound index.
        OrderbevestigingBoundIndex = args.rowindex;
        // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
        OrderSelectedData = args.row;

        $("#DocDiv").html(BuildOrderbevestigingContent());
        $('#modallabelLarge').html('Orderbevestiging ' + OrderSelectedData.Ordernr);
        BuildOrderrowsGrid($('#OrderRows' + OrderSelectedData.Ordernr));
    })

    function SelectRowByValue(grid, col, val) {
        var rows = grid.jqxGrid('getrows');
        var rowsCount = rows.length;
        for (var i = 0; i < rowsCount; i++) {
            var value = rows[i][col]; // grid.jqxGrid('getcellvalue', i, col);
            if (value == val) {
                grid.jqxGrid('selectrow', i);
                break;
            }
        }

        grid.jqxGrid('gotonextpage');
    }
}

function GetHourreg(grid) {
    var formatedData = '';
    var totalrecords = 0;

    var SourceHourreg = {
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        datafields: [
            { name: 'Id', type: 'int' },
            { name: 'User', type: 'int' },
            { name: 'Naam', type: 'string' },
            { name: 'Date', type: 'date' },
            { name: 'Status', type: 'string' }
        ],
        updaterow: function (rowid, newdata, commit) {
        },
        sort: function () {
            grid.jqxGrid('updatebounddata', 'sort');
        },
        filter: function () {
            grid.jqxGrid('updatebounddata', 'filter');
        },
        beforeprocessing: function (data) {
            var returnData = {};
            data = data.d;
            totalrecords = data.count;
            returnData.totalrecords = data.count;
            returnData.records = data.data;
            return returnData;
        },
        url: 'getData.asmx/GetHourreg',
        pagesize: 10,
        //async: false,
        cache: true,
        root: '',
        formatdata: function (data) {
            for (var i = 0; i < data.filterscount ; i++) {
                if (data['filterdatafield' + i] == 'Date') {
                    var filtervalue = data['filtervalue' + i];
                    data['filtervalue' + i] = FormatData2server('ddd dd-MM-yyyy', filtervalue)
                }
                else if (data['filterdatafield' + i] == 'Naam') {
                    data['filteroperator' + i] = true;
                    //data['Naamoperator'] = "or";
                }
            }
            data.pagenum = data.pagenum + 1 || 0;
            data.pagesize = data.pagesize || 20;
            data.sortdatafield = data.sortdatafield || 'Date';
            data.sortorder = data.sortorder || 'desc';
            data.filterscount = data.filterscount || 0;
            formatedData = buildQueryString(data);
            return formatedData;
        },
    }

    var AdapterHourreg = new $.jqx.dataAdapter(SourceHourreg, {
        contentType: 'application/json; charset=utf-8',
        loadError: function (xhr, status, error) {
            alert(error);
        },
        downloadComplete: function (data, textStatus, jqXHR) {
            return data.d;
        }
    });

    return AdapterHourreg;
}

[hfParticipant]

Thanks!

[hfParticipant]

Nadezhda,

Thanks, that’s the solution!

[hfParticipant]

Hi Peter,

But when the selectionmode is set to default, only the the viewChange is raised. Why is the selected day then not changed?

[hfParticipant]

Hi Peter,

Okay, but in de grid’s ready function it will work. So I would like to save the correct groupnr in the groups rendering function and apply in the grid’s ready function.

But I don’t know how to get that groupnr..

function groupsrenderer(defaultText, group, state, params) {
                var user = params.subItems[0].user
                if (params.subItems[0].chef == 3) {
                    groupnr = ???;
                };
                return "<div style='margin: 5px;'>" + x + "</div>";
            };
ready: function () {
                    $("#jqxgrid").jqxGrid('hidecolumn', 'whatever');
                    
                    addfilter();
                    $("#jqxgrid").jqxGrid('expandgroup', groupnr);
                },

[hfParticipant]

Hi Peter,

The data I provided via the webservice caused the problem.

Thanks.

[hfParticipant]

Hi Peter,

This is how set it into the grid:

{ text: 'Datum', datafield: 'datum', cellsformat: 'dd-MM-yyyy', filtertype: 'date', editable: false, minwidth: 180 },

But then it shows 08-02-2013 while the mysql date field value is 2013-08-02

[hfParticipant]

Hi Peter,

The mysql database value is 2013-08-02, so it needs to be Fri 2 Aug 00:00:00 UTC+0100 2013.

Regards

[hfParticipant]

Hi Peter,

I already call the updatebounddate with the filter parameter…

This is how my source looks like:

var source = {
datatype: “json”,
datafields: [
{ name: ‘user’, type: ‘int’ },
{ name: ‘user_naam’, type: ‘string’ },
{ name: ‘datum’, type: ‘date’ }
],
sort: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
filter: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
beforeprocessing: function (data) {
if (iserror(data.d) == false){
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = JSON.parse(data.data);
return returnData;
}
else {
errorHandler(data.d.replace(“||_ERROR_||”, “”));
};
},
type: ‘get’,
sortcolumn: ‘datum’,
sortdirection: ‘desc’,
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 10;
data.sortdatafield = data.sortdatafield || ‘datum’;
data.sortorder = data.sortorder || ‘desc’;
data.filterscount = data.filterscount || 0;

for (var i = 0; i < data.filterscount; i++) {
filterdatafield = 'filterdatafield' + i;
filtervalue = 'filtervalue' + i;
operator = data[filterdatafield] + 'operator';

if (data[filterdatafield] == 'user') {
data[filtervalue] = getfromarray(arrayUsers, data[filtervalue], 'naam', 'id');
}
else if (data[filterdatafield] == 'datum') {
data[filtervalue] = convertdate(data[filtervalue]);
//data[operator] = 'and';
}
}

formatedData = buildQueryString(data);
return formatedData;
},
url: 'Webservice1.asmx/getData',
pagesize: 20,
};

Thanks in advance

[hfParticipant]

One more thing related to the server side filtering..

When I filter on a date field the formatdata function formats the date value (filtervalue0) as follow: Sun Apr 21 00:00:00 UTC+0200 2013

How can I achieve that this format is for example equal to the cellsformat (cellsformat: ‘dd-MM-yyyy’)?

Regards!

{ text: ‘datum’, dataField: ‘datum’, cellsformat: ‘dd-MM-yyyy’, filtertype: ‘date’, pinned: true, minwidth: 180 },

formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 10;
data.sortdatafield = data.sortdatafield || ‘datum’;
data.sortorder = data.sortorder || ‘desc’;
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},

[hfParticipant]

Yes I removed the second, but then it still didn’t worked out.

I changed
returnData.records = data.data;
to
returnData.records = JSON.parse(data.data);

Now it works!

[hfParticipant]

beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
return returnData;
},
beforeprocessing: function (data) {
source.totalrecords = data.d.count; // 100; //data.TotalRows;
return data.d;
},

[hfParticipant]

Thank you pointing me in the right direction!

All I had to do was adding this to the source:
formatdata: function (data) {
return { test: “‘Hello World!'” }
}

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm

[hfParticipant]

Ok, forget it. Got it.

initeditor: function (row, cellvalue, editor) {
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, ‘col’, ‘9999’);
}

[hfParticipant]

I figured it out on how to do a ajax request through the grid, by the example given on http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-web-service-grid.htm.

The only problem is I get a error message ‘Invalid operand’. When I leave root empty, the error disapears but I get a empty table..

var source = {
type: “GET”,
datatype: “json”,
datafields: [
{ name: ‘g_naam’ },
{ name: ‘datum’ },
{ name: ‘servicenr’ },
{ name: ‘werkbon’ },
{ name: ‘uren’ },
{ name: ‘icg’ }
],
url: ‘WebService1.asmx/getData’,
cache: false,
root: ‘data’
};

//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source, { contentType: ‘application/json; charset=utf-8’,
downloadComplete: function (data, textStatus, jqXHR) {
return data.d;
}
});

$(“#jqxgrid”).jqxGrid({
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
columns: [
{ text: ‘Naam’, datafield: ‘g_naam’, filtertype: ‘checkedlist’, width: 150 },
{ text: ‘Datum’, datafield: ‘datum’, cellsformat: ‘dd-MM-yyyy’, filtertype: ‘date’, width: 100 },
{ text: ‘Servicenr’, datafield: ‘servicenr’, width: 150 },
{ text: ‘Werkbon’, datafield: ‘werkbon’, width: 150 },
{ text: ‘Uren’, datafield: ‘uren’, cellsformat: ‘F2’, cellsalign: ‘right’, filterable: false, filtertype: ‘default’, width: 120 },
{ text: ‘ICG’, datafield: ‘icg’, filtertype: ‘checkedlist’ }
]
});

Any help will be appreciated.

[Author]

Posts