[selvaParticipant]

Hi Dimitar,

In this demo, grid cell background color is working fine. But when i click into the cell then the cell color changes to white. How to prevent or else if i click outside the grid then its reset to default bg color.

[selvaParticipant]

Hi Peter Stoev,

I have two dateTimeInput elements like appointmentStartTime and appointmentEndTime.
My scenario is restrict appointmentEndTime is not less than start time and also not greater than 8 hrs in a same day. And by default user after entering the appointment start time, then appointment End time is auto calculate to 1 hr from the start time. How can i achieve this.

[selvaParticipant]

Hi Peter,
The URL is correct. The alert Message in the Javascript shows the data correctly. Also the Initialization is done by the way you given in your example.
The alert message shown as below:

url value==[[“Alfreds Futterkiste”,”Maria Anders”,”Sales Representative”,”Obere Str. 57″,”Berlin”,”Germany”]]

Please see my code and suggest me if there is any error.

[selvaParticipant]

I have a DropdownList box with checkboxes for multi select. If I call the clearSelection method to clear the selected items but it doesn’t clear the selected item in check box. Here is the fiddle working demo link.

http://jsfiddle.net/smpskumar/5FRxK/14/

[selvaParticipant]

Hi peter,

Is it possible to use nested grid concept for loading database values for a row?

Regards selva.

[selvaParticipant]

Hi peter,

Thanks for the reply.

Is there any other way or concept to do it?

[selvaParticipant]

Hi Peter Stoev,

Thanks for your help. It works fine.

[selvaParticipant]

Hi Peter Stoev,

This is the sample demo for your reference. If I click the add button, it adds new row but the drop down values can’t be selected only text values are shown.

http://jsfiddle.net/smpskumar/fZhEc/388/

[selvaParticipant]

Here is the working example of jsfiddle:

http://jsfiddle.net/smpskumar/3RJEU/46/

[selvaParticipant]

Hi Dimitar,

If you dont mine, please provide sample code for this scenario.

[selvaParticipant]

Hi Dimitar,

Thanks. It’s working fine. But I have another one doubt. I want to add rows dynamically with data, at that time how can i call cellendedit function.

for example:

var result=1,2^2,4
var temp=result.split("^");
var localdata=new Array();
for(int i=0;i<temp.length;i++){
var data=temp[i].split(",");
localdata.push({commercialType: data[0],unit: data[1]});
}
var source={
datatype: 'array',
datafields: [
{name: 'commercialName', value: 'comTyId', values: {source: dataAdapter_commercial_edit.records, value: 'comTyId', name: 'commTypename'}},
{name: 'commercialType', type: 'string'},
{name: 'unitName', value: 'uomId', values: {source: list, value: 'value', name: 'label'}},
{name: 'unit', type: 'string'},
],
localdata:localdata
}

this code generates no of rows equivalent to temp.length but not loaded that corresponding value from combobox. How can i call cellendedit function for this scenario.

[selvaParticipant]

Hi Dimitar,

could you please give code for this functionality. I tried but it not works.

[selvaParticipant]

Hi Dimitar,

I upgraded my jqwidgets version from 3.2.1 to 3.2.2 but still i can’t get new value.

[selvaParticipant]

Hi Dimitar,

When I click the add button to add a new row with data.These data should be dynamically assigned to the drop down list.

This is my code

var source_break_relativity =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'breakRltvtyId', type: 'string'},
                                {name: 'breakRltvtyNam', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakRelativity"
                        };
var source_break_format =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'breakFormtId', type: 'string'},
                                {name: 'breakFrmtName', type: 'string'}
                            ],
                            id: 'id',
                            url: "getBreakFormat"
                        };
var dataAdapter_break_relativity = new $.jqx.dataAdapter(source_break_relativity);
var dataAdapter_break_format = new $.jqx.dataAdapter(source_break_format);
var gridSource = {
                    datatype: "array",
                    datafields: [
                        {name: 'breakRltvtyId', type: 'string', value: 'breakRltvtyId', values: {source: dataAdapter_break_relativity.records, value: 'breakRltvtyId', name: 'breakRltvtyNam'}},
                        {name: 'breakFormtId', type: 'string', value: 'breakFormtId', values: {source: dataAdapter_break_format.records, value: 'breakFormtId', name: 'breakFrmtName'}}
                    ]
                };
var gridAdapter = new $.jqx.dataAdapter(gridSource);
('#break_pattern_footer_edit').jqxGrid(
                        {
                            width: '600',
                            height: '250',
                            theme: theme_name,
			    source: gridAdapter,
                            editable: true,
                            altrows: true,
                            showtoolbar: true,
                            toolbarheight: 25,
                            rendertoolbar: function(toolbar) {
                                var me = this;
                                var container = $("<div style='margin: 5px;'></div>");
                                var addButton = $("<div style='float: left; margin-left: 5px;margin-top:-4px;' title='Add Row'><img style='position: relative; margin-top: 0px;' src='jqx/images/add.png'/></div>");
                                var deleteButton = $("<div style='float: left; margin-left: 5px;margin-top:-4px;' title='Delete Row'><img style='position: relative; margin-top: 0px;' src='jqx/images/minus.png'/></div>");
                                toolbar.append(container);
                                container.append(addButton);
                                container.append(deleteButton);
                                addButton.jqxButton({width: 20, height: 15, theme: theme_name});
                                deleteButton.jqxButton({width: 20, height: 15, theme: theme_name});
                                addButton.click(function() {
				<strong>var datarow={};
				datarow["breakRltvtyId"]="2";
				datarow["breakFormtId"]="3";
				var commit = $("#break_pattern_footer_edit").jqxGrid('addrow', null, datarow);</strong>
				});
				deleteButton.click(function() {
                                    var selectedrowindex = $("#break_pattern_footer_edit").jqxGrid('getselectedrowindex');
                                    var rowscount = $("#break_pattern_footer_edit").jqxGrid('getrows');
                                    if (selectedrowindex >= 0 && selectedrowindex < rowscount.length) {
                                        var id = $("#break_pattern_footer_edit").jqxGrid('getrowid', selectedrowindex);
                                        var commit = $("#break_pattern_footer_edit").jqxGrid('deleterow', id);
                                    }
                                });
                            },
                            columns: [
                                {text: 'Break Relativity', columntype: 'dropdownlist', width: 200, datafield: 'breakRltvtyId', displayfield: "breakRltvtyNam",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter_break_relativity, displayMember: "breakRltvtyNam", valueMember: 'breakRltvtyId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                },
                                {text: 'Break Format', columntype: 'dropdownlist', width: 200, datafield: 'breakFormtId', displayfield: "breakFrmtName",
                                    createeditor: function(row, column, editor) {
                                        editor.jqxDropDownList({source: dataAdapter_break_format, displayMember: "breakFrmtName", valueMember: 'breakFormtId', selectedIndex: 0, dropDownHeight: '100px'});
                                    }
                                }
				]
				});

for ex:
breakRltvtyId–>breakRltvtyNam
1–>One
2–>Two
3–>Three

breakFormtId–>breakFrmtName
1–>1 min break
2–>2 min Break
3–>3 min break

suppose if I pass “2″ to breakRltvtyId and “3″ to breakFormtId, the grid add new row with corresponding label to be shown.

[selvaParticipant]

Hi Dimitar,

Could you please help me.

[Author]

Posts