Dependent Dropdown inside JQXGRID

[hpawarParticipant]

Hi,

In my current project I am using jqxGrid and inside jqxGrid I am using two dropdowns to show Hours and minutes . One dropdown is for Hours and another one is for minutes .
In current requirement I have to make these two dropdowns as dependent for an example is user select “23” inside hour dropdwon minutes dropdown should show [’00’, ’15’,’30’,’45’, ’59’] options. if user selects hours from 00-22 it should show [’00’,’15’,’30’, ’45’] options.

I written some code and I am facing latency issue and behavior is not consistent, sometimes my computer’s entire screen get locked for 3-4 seconds.

To make dependent dropdowns I am using initgrideditor function and also on createeditor function I have written code.

Please let me know is there any solution available for this.

Thanks in advance..!!

Harsha

[Peter StoevKeymaster]

Hi Harsha,

Cascading DropDowns are demonstrated here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cascadingediting.htm?arctic

Best Regards,
Peter Stoev

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

[hpawarParticipant]

Thanks Peter for the example.

I used same and still I am facing latency issue and dropdown columns is getting clear and locked. It is locked for around 2 mins.
For first time cascading dropdowns are working fine. But when I change my first dropdown list, dependent dropdown which is minutes in this case is getting clear and locked.

Please help for this issue. I am stuck on this issue since yesterday.

Thanks,
Harsha

[Peter StoevKeymaster]

Hi Harsha,

I don’t know why it’s getting weird in your case. I suggest you to look again the sample and apply the sample approach which obviously works fine on our side.

Best Regards,
Peter Stoev

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

[hpawarParticipant]

I am using below code Peter

var initGridEditorEndMins = function (row, cellValue, editor, cellText, width, height) {

var CurrentRow = j(‘#jqxgrid’).jqxGrid(‘getrowdata’, row);
var EndHours = CurrentRow.EndHours;
var EndMinsTime = editor.val();
var Minutes = new Array();

switch (EndHours) {
case “23”:
Minutes = [’00’, ’15’, ’30’, ’45’, ’59’];

break;
default:
Minutes = [’00’, ’15’, ’30’, ’45’];

break;
};

editor.jqxDropDownList({ autoDropDownHeight: true, source: Minutes });
if (EndMinsTime != “”) {
var index = Minutes.indexOf(EndMinsTime);
editor.jqxDropDownList(‘selectIndex’, index);

}
}

and I am calling this function like this
text: ‘Min’, columngroup: ‘Time Out’, datafield: ‘EndMins’, width: 65, columntype: ‘dropdownlist’, sortable: false, cellbeginedit: cellbeginedit1,initeditor:initGridEditorEndMins, createeditor: function (row, column, editor) { if (IsNew) //new timesheet
{
editor.jqxDropDownList({ autoDropDownHeight: true });
}
else //editing exsiting
{
editor.jqxDropDownList({ autoDropDownHeight: false, dropDownHeight: 120 });
}

//Every time the value changes, recalculate the total hours
editor.bind(‘select’, function (event) {

var startHours = j(‘#jqxgrid’).jqxGrid(‘getcellvalue’, rowIndex, “StartHours”);
var startMins = j(‘#jqxgrid’).jqxGrid(‘getcellvalue’, rowIndex, “StartMins”);
var endHours = j(‘#jqxgrid’).jqxGrid(‘getcellvalue’, rowIndex, “EndHours”);
var item = args.item;

var value = item.value;
var endMins = value; //j(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “EndMins”);
if (startHours == “” || startHours == undefined) {
startHours = “00”;
j(‘#jqxgrid’).jqxGrid(‘setcellvalue’, rowIndex, “StartHours”, “00”);

}
if (startMins == “” || startMins == undefined) {
startMins = “00”;
j(‘#jqxgrid’).jqxGrid(‘setcellvalue’, rowIndex, “StartMins”, “00”);
}
if (endHours == “” || endHours == undefined) {
endHours = “00”;
//j(‘#jqxgrid’).jqxGrid(‘setcellvalue’, rowIndex, “EndHours”, “00”);

}

if (startHours != null && startHours != undefined && startMins != null && startMins != undefined && endHours != null && endHours != undefined && endMins != null && endMins != undefined) {
var startTime = parseInt(startHours) + (parseInt(startMins) / 60);
var endTime = parseInt(endHours) + (parseInt(endMins) / 60);
if (endTime == ‘23.983333333333334’) {
endTime = ‘24.00’;
}

if (startTime < endTime || endTime == 0) {
if (startMins && endHours && startHours && endMins) {
var totalTime = CalculateTotalHours(startTime, endTime);
//Set the Total Hours value
j(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex, “ps_TotalHours”, totalTime);
}
}
else {
//j(‘#jqxgrid’).jqxGrid(‘setcellvalue’, rowIndex, “EndMins”, “00”);
editor.jqxDropDownList(‘clearSelection’, true);
j(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex, “ps_TotalHours”, “0.00”);
//editor.jqxDropDownList(‘selectIndex’, 0);
}
}
});

}

},

I have written cell value changing function inside Hours and while debugging I found that it is going inside that function.

First time it is working fine but second time when I changed first dropdown whole grid is locked down.

[Author]

Posts