[taramanMember]

Hi Peter,

I assigned the pagesize in the source object, like the following:

var source = {
        datatype: "json",
        type: "GET",
        url: url,
        async: false,
        cache: false,
        datafields: [
				{ name: "SurgeryId" },
				{ name: "EncryptedSurgeryId" },
				{ name: "SurgeryDateGroupBy" },
				{ name: "SurgeryTime", type: "date" },
				{ name: "PhysicianName" },
				{ name: "PatientId" },
				{ name: "PatientShortName" },
				{ name: "ManufacturerName" },
				{ name: "AnatomyGroupName" },
				{ name: "ProcedureTypeName" },
				{ name: "IsKioskComplete", type: "bool" },
				{ name: "GenderSideImagePath" },
				{ name: "SurgeryStatusImagePath" },
		        { name: "IsApproved", type: "bool" }
			],
        pagesize: 25,
        sort: function () {
            $("#gridSurgeries").jqxGrid('updatebounddata', 'sort');
        },
        sortcolumn: "SurgeryTime",
        sortdirection: "asc",
        beforeprocessing: function (data) {
            data = data.d;
            var returnData = {
                totalrecords: data.count,
                records: data.records
            };
            return returnData;
        },
        formatdata: function (data) {
            var physicianCombo = $("#ddlPhysicians").jqxDropDownList('getSelectedItem');
            var statusCombo = $("#ddlApproverStatuses").jqxDropDownList('getSelectedItem');
            return {
                pagenum: data.pagenum,
                pagesize: data.pagesize,
                sortdatafield: data.sortdatafield,
                sortorder: data.sortorder,
                fromDate: getFromDate(),
                physicianId: physicianCombo ? physicianCombo.value : 0,
                approverStatusId: statusCombo ? statusCombo.value : 0
            };
        }
    };
    dataAdapterSurgeries = new $.jqx.dataAdapter(source, {
        contentType: "application/json; charset=utf-8",
        loadError: function (xhr, status, error) { alert(error); }
    });

but even when setting the pagesize in the grid initialization, I’ve got the same issue

[taramanMember]

Hi Mariya,

I need to refresh the grid by the data come from the server (I mean how can I rebind the data)

thanks,
Taraman

[taramanMember]

Hi Peter,

I found the reason of this issue,

if the page size of the grid is 25, and the returned data is for example 5 rows it will draw 20 empty rows

How can we fix that?

thanks
Taraman

[taramanMember]

the image:

output image

[taramanMember]

Hi peter,

this the code for initialize the grid:

$("#gridSurgeries").jqxGrid({
        source: dataAdapterSurgeries,
        theme: theme,
        width: 1020,
        autoheight: true,
        //height:500,
        //altrows: true,
        pageable: true,
        pagesizeoptions: ["25", "50", "100"],
        sortable: true,
        sorttogglestates: 1,
        showsortcolumnbackground: false,
        virtualmode: true,
        rendergridrows: function (args) {
            return args.data;
        },
        groupable: true,
        groups: ["SurgeryDateGroupBy"],
        groupsexpandedbydefault: true,
        showgroupsheader: false,
        showgroupmenuitems: false,
        groupsrenderer: groupsrenderer,
        rendered: function () {
            $(".grouprowtext").parent().css("background-color", "#000000");
            $(".grouprowtext").parent().parent().find(":first-child").css("background-color", "#000000");
        },
        columns: [
			{ text: "", dataField: "EncryptedSurgeryId", width: 50, cellsrenderer: renderViewImage, sortable: false, groupable: false },
			{ text: "", dataField: "SurgeryStatusImagePath", width: 50, cellsrenderer: renderSurgeryStatusImage, sortable: false, groupable: false },
			{ text: "Date", dataField: "SurgeryDateGroupBy", width: 120, cellsalign: "center", sortable: false, hidden: true },
			{ text: "Time", dataField: "SurgeryTime", width: 75, cellsformat: "t", cellsalign: "center", align: 'center', groupable: false },
			{ text: "Physician", dataField: "PhysicianName", width: 150, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Patient Id", dataField: "PatientId", width: 80, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Patient", dataField: "PatientShortName", width: 85, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Manufacturer", dataField: "ManufacturerName", width: 120, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Anatomy Group", dataField: "AnatomyGroupName", width: 110, cellsalign: "center", align: 'center', groupable: false },
			{ text: "Procedure Type", dataField: "ProcedureTypeName", width: 150, cellsalign: "center", align: 'center', groupable: false },
			{ text: "", dataField: "GenderSideImagePath", width: 60, cellsrenderer: renderGenderSideImage, sortable: false, groupable: false },
			{ text: "", dataField: "IsKioskComplete", width: 60, cellsrenderer: renderScanmanCancelImage, sortable: false, groupable: false }
		]
       });

this code when changing the selected item in the comboBox which used for search:

$("#ddlApproverStatuses").bind("change", function (event) {
        if (event.args) {
            var item = event.args.item;
            if (item) {
                gridSurgeries_Load();
            }
        }
    });
function gridSurgeries_Load() {
    $("#gridSurgeries").jqxGrid({ source: dataAdapterSurgeries });
 }

please check this image:
it draw empty rows

[taramanMember]

I mean the same behavior like jqueryUI

[taramanMember]

Hi Mariya,

it reset the year to 1900, all I need to clear it when press backspace

thanks,
Taraman

[taramanMember]

I found a way to assign a yellow color to the group text,
now I need to assign a color to the back-ground row group

thanks,
Taraman

[taramanMember]

Hi Peter,

please check this link,
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/grouping.htm

u will find that the row group has the same color as row data.

How can I assign a different background color for row group?

thanks,
Taraman

[taramanMember]

I applied a workaround by adding a dummy hidden column to be the last column

{ groupable: false, editable: false,hidden: true }

thanks,
Taraman

[taramanMember]

Hi,
the issue related to the last column not the check box column:

if u have a grid with this setting:
autorowheight: true
groupable: true

then:
the DOM of last column will not exist

[taramanMember]

this is the cell with jqx-checkbox

<div class="jqx-grid-cell jqx-grid-cell-black jqx-grid-cell-wrap" style="overflow: hidden; position: absolute; height: 100%; left: 975px; z-index: 790; width:75px;"><div style="opacity: 0.99; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; cursor: auto;" tabindex="0" id="jqxWidget72f15a1d8c78" class="jqx-widget jqx-widget-black jqx-checkbox jqx-checkbox-black"><div><div class="jqx-checkbox-default jqx-checkbox-default-black jqx-fill-state-normal jqx-fill-state-normal-black jqx-rc-all jqx-rc-all-black" style="width: 13px; height: 13px;"><span style="width: 13px; height: 13px; opacity: 1;" class="jqx-checkbox-check-checked jqx-checkbox-check-checked-black"></span></div></div><div style="clear: both;"></div></div></div>

[taramanMember]

Dimitar,
I tried your fix but the problem is that with these settings enabled, the jqx-checkbox is never even rendered into the DOM so there are no elements to apply that style to. I’ve verified with firebug’s DOM inspector that it isn’t there it’s just as the following:

<div class=" jqx-grid-group-cell jqx-grid-group-cell-black" style="overflow: hidden; position: absolute; height: 100%; left: 955px; z-index: 778; width:75px;"></div>

but when remove grouping or make rowautoheight = false the jqx-checkbox div appears in Dom:

<div class="jqx-widget jqx-widget-black jqx-checkbox jqx-checkbox-black" id="jqxWidget72f15a1d8c78" tabindex="0" style="opacity: 0.99; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; cursor: auto;"><div><div style="width: 13px; height: 13px;" class="jqx-checkbox-default jqx-checkbox-default-black jqx-fill-state-normal jqx-fill-state-normal-black jqx-rc-all jqx-rc-all-black"><span class="jqx-checkbox-check-checked jqx-checkbox-check-checked-black" style="width: 13px; height: 13px; opacity: 1;"></span></div></div><div style="clear: both;"></div></div>

thanks
Taraman

[taramanMember]

Hi Peter,
I found a good solution:

add a function to the parent window which has the logic to close the opening window

function windowScannedItems_Close() {
    $('#windowScannedItems').jqxWindow("close");
}

and in page which is inside the iframe you can access this function and close the window:

parent.windowScannedItems_Close();

thanks,
Taraman

[taramanMember]

thanks Peter,

How can I loop over grid’s rows to get columns value,

I need to do something like this:

for (var i= 0; i<gridRowsCount; i++)
{
   if (checkBox is checked)
   {
      var record = {
           StudentId = studentIdColumn.value
           SchoolId = SchoolIdColumn.value
           IsAbbroved = checkBox.value
       }
      
      studentArr.push(record )
   }
}

thanks,
Taraman

[Author]

Posts