[kkochharParticipant]

Bump! Doh! Anyone out there to assist?

[kkochharParticipant]

Guys, I have hit the brick wall PLEASE HELP!!!

[kkochharParticipant]

Anyone there to help? Following is the code for binding dropdown of grid column:

text: 'Client', columntype: 'dropdownlist', datafield: 'Client', width: '15%',
                              createeditor: function (row, cellvalue, editor) {
                                  console.log(clientSourceDA);
                                  editor.jqxDropDownList({ displayMember: 'Title', valueMember: 'Title', source: clientSourceDA });
                              }

I am constructing data in clientSourceDA on page load and keeping it cached. However as soon as I add new row with following code the dropdown doesn;t have anything and it throws javascript error as mentioned above.
$(“#addProjectButton”).on(‘click’, function () {
var datarow = generaterow();
var commit = $(“#jqxprojectgrid”).jqxGrid(‘addrow’, null, datarow, top);
});

var generaterow = function (i) {
var row = {};
row[“Title”] = “”;
row[“ProjectCode”] = “”;
row[“Client”] = “”;
row[“Billable”] = “”;
row[“NonBillable”] = “”;
row[“Comments”] = “”;
row[“Members”] = “”;
return row;
}

[kkochharParticipant]

It throws following error when a new blank row is added and when you click on the dropdown list to bring it in edit mode:

Uncaught TypeError: Object [object Number] has no method ‘replace’

[kkochharParticipant]

Hello Peter,

Little more success with Position:fixed for that div the drop down is displayed but on top left corner of the window and not near below the cell I m editing. How can we set top position for this?

I m nearly there mate. Will appreciate if I can get this sorted.

Thanks in advance.
Kunal

[kkochharParticipant]

Hello Peter,

Little progress but need one last help and it will be resolved. The drop down pop div element can be seen being contructed in DOM but the DIV is hiding behind the grid. What is that CSS magic to bring to front? CSS applied to that div being constructed and to UL within it is as follows:
I am using metro-dark theme on the grid.

DIV:
.sp-peoplepicker-autoFillContainer {
z-index: 99999 !important;
padding: 0px;
display: none;
cursor: default;
max-width: 300px;
min-width: 300px;
height: 100px;
position: absolute;
border-color: #c6c6c6;

UL:
.sp-peoplepicker-autoFillContainer .sp-autoFill-scroll {
width: 100%;
border: none;
margin: 0px;
padding: 0px;
min-width: 100%;
padding-top: 3px;
overflow-y: auto;
overflow-x: hidden;
margin-right: 10px;
list-style-type: none;
box-shadow: 0px 0px 0px 0px transparent;
background-color: #fff;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

[kkochharParticipant]

Hello Peter,

Thanks a lot about the geteditorvalue. It is helping and retaining value with it. But with z-index stuff it is not doing anything.

For that div class which the custom control is showing up as a drop down, I am setting z-index to 9999 on top of the page and element in dev toolbar is also showing that style set. However the drop down is still not appearing in front. If I place the control outside grid it works fine but within the grid it is getting hidden behind the grid or not showing at all.

Any other clues you can provide that I could try?

It helps so much to have people like you in community where you can get some good guidance.

Thanks mate.
Kunal

[kkochharParticipant]

Hi Peter,

I totally understand and appreciate your excellent support. Could you please indicate on how to retain entered value within the cell? So that after you have edited and out of Edit Mode then the value is still displayed there. Currently value disappears and is not visible unless you click on that cell again.

Kunal

[kkochharParticipant]

Ok I think the right question would be how to retain the entered value within that Cell. So that after you have edited and out of Edit Mode then the value is still displayed there. Currently value disappears and is not visible unless you click on that cell again.

[kkochharParticipant]

Yep true but when I go out of that editor the grid CSS gets applied and I cannot see any text entered in that cell because the Grid CSS is overriding Control CSS or may be otherway round. Is there a way to have only one CSS applied to a particular cell either a the grid css or that particular custom control? Both when in edit mode and when not in edit mode.

[kkochharParticipant]

Thanks Peter. I will try that. And how would I change the CSS for just that cell? so that it doesn’t apply grid theme CSS for that cell only and uses CSS from the control.

[kkochharParticipant]

got it working the dataadapter object didn’t knew about json objects have to specify in dataadapter like this:
var dropDownGroupAdapter = new $.jqx.dataAdapter(dropDownGroupsource, { autoBind: true, contentType: 'application/json; charset=utf-8' });

[kkochharParticipant]

Small Update: It works fine if the source object is a collection of string only. If it is collection of Json objects then it fails with above error.

var dropDownGroupsource = [
                { label: "Admin", value: 17 },
                { label: "Operation", value: 18 },
                 { label: "User", value: 19 }
                ];

`var dropDownGroupsource1 = [
“Admin” ,
“Operation”,
“User”
];`

dropDownGroupsource throws above error when used as source in initeditor for columntype ‘drodownlist’
dropDownGroupsource1 works fine

[kkochharParticipant]

Don’t worry got it cell.row gives the index.

[kkochharParticipant]

Thanks Peter,

I copied your code and still the same error. My suspicion is MicrosoftAjax.js is intervening with knocout or jqwidget.

On a side note, I am running this code withing a SharePoint environment, not sure if SharePoint is playing up with requests.

As soon as I click on the drop down it throws that error. Below is the whole stack of that error:

Uncaught TypeError: Object [object Number] has no method 'replace' MicrosoftAjax.js:5
String.trim MicrosoftAjax.js:5
(anonymous function) jquery-1.10.2.min.js:4
c VM638:7
a.extend.databind VM638:7
a.extend.refresh VM638:7
a.extend.propertyChangedHandler VM638:7
a.jqx.setvalueraiseevent VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
a.jqx.set VM633:7
a.jqx.jqxWidgetProxy VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
x.fn.x.each jquery-1.10.2.min.js:4
a.fn.(anonymous function) VM633:7
a.extend.propertyChangedHandler VM639:7
a.jqx.setvalueraiseevent VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
a.jqx.set VM633:7
a.jqx.jqxWidgetProxy VM633:7
(anonymous function) VM633:7
x.extend.each jquery-1.10.2.min.js:4
x.fn.x.each jquery-1.10.2.min.js:4
a.fn.(anonymous function) VM633:7
$.jqxGrid.columns.createeditor VM651:130
a.extend._showcelleditor VM647:7
b.extend._rendercell VM640:7
b.extend._rendervisualcell VM640:7
b.extend._rendervisualrows VM640:7
q VM640:7
b.extend._renderrows VM640:7
a.extend.begincelledit VM647:7
b.extend._handlemousedown VM640:7
(anonymous function) VM640:7
x.event.dispatch jquery-1.10.2.min.js:5
v.handle

[Author]

Posts