Cell Custom Editor Control

[kkochharParticipant]

Hello Guys,

I know you don’t support any 3rd party controls within jqxGrid however, I need help from your technical expertise on how to troubleshoot it as we have decided to use jqxWidgets and already half way through. Following is the scenario:

-Using jqxGrid in SharePoint 2013 Apps.
-Trying to place a client side PeoplePicker control within the a column cell like following:

text: 'User', columntype: 'custom', datafield: 'User', width: '15%', 
                              createeditor: function (row, column, editor) {

                                  console.log(editor);
                                  // assign a new data source to the combobox.
                                  //var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                                  //var divId = "peoplePickerDiv" + row;
                                  //"<div id='" + divId + "'></div>";
                                  //$("#" + divId).spPeoplePicker();
                                  editor.spPeoplePicker();

                              },
                              initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                                  editor.spPeoplePicker();
                              }

-sppeoplepicker is a jquery plugin control.
-https://saikiran78.wordpress.com/2014/01/18/jquery-plugin-sharepoint-2013-client-side-people-picker-control/
-Now the control is showing up but when you type something within this control it behaves like a typeahead box where it shows dropdown of possible options. This drop down of possible options is not showing up and is getting hidden in some Div or due to some CSS overlapping.
-My question is what is the best way of putting any custom control within a grid cell and how do you override the CSS of grid so that it doesn’t interfere with CSS spit by third party control.

Thanks in advance and appreciate your support on this

Kunal

[Peter StoevKeymaster]

Hi Kunal,

I suppose that you should update the DropDown’s z-index of your custom plugin and set it to a high value such as 99999.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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.

[Peter StoevKeymaster]

Hi Kunal,

The Cell’s CSS is not related to your editor. Editor is displayed when the cell is in edit mode. It is your custom code’s task to make the editor to get the full cell’s area and to be styled in specific way.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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]

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.

[Peter StoevKeymaster]

Hi Kunal,

I can give you only an idea and suggestion about how this should be done. I don’t know the specifics of your third-party editor, how to use it, how to customize it, etc. The Grid is not overriding CSS. Each Cell in jqxGrid has a specific CSS class and that’s all.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[Peter StoevKeymaster]

Hi Kunal,

The “geteditorvalue” callback function should be used for that purpose. You may look at our Online samples about custom editors implementation. “geteditorvalue” returns the custom editor’s result and the Grid displays it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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]

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,

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

[Author]

Posts