[NagoorParticipant]

hi peter,

Referring to above link, i could understand that, they are using the selection mode as single cell which obviously works fine. but in my case selection mode is “none ” and i am using custom checkbox colon for selecting rows. as per our requirement , the entire row must be highlighted on hover of cell or row. so on cell hover , the entire row gets focus, so once a tooltip gets a value, its nopt getting updated until i lose the focus of its respective row. hope you understand my problem.

Thanks and Regards

nagoor

[NagoorParticipant]

Hi peter,

thank you for reply. its working.

[NagoorParticipant]

Hi peter,
Thank you for replying to all my queries.
The actual problem i am facing is, in the custom pager example you have changed the entire pagination view and buttons. all the buttons and functionalities displayed in the pager were defined explicitly in pagerenderer. but for my project i would like to use the default itself, but i just want to implement two more buttons (last page , first page)beside left and right arrow (similar to buttons visible in pagermode “simple”).

so, i think, instead of creating an element and appending the buttons (like in your example), i should get the element and append the buttons for which i am facing difficulty. so please help me doing this.

Thanks in advance

Nagoor

[NagoorParticipant]

HI Dimitar,

Thank you very much for reply.the above example is pretty helpful for me. In my application it is not necessarily 2 levels. each parent may have more than 2 or 3 levels. for instance, the first parent may have 2 levels of child nodes and the second may have only one child and it goes on. is there any way to find the last level for each parent so that i can implement the above example for each parent level.
Pls help me

Thanks & Regards

Nagoor

[NagoorParticipant]

HI Dimitar,

ThankYou. Its working(looking) now properly.

Thanks & Regards

Nagoor

[NagoorParticipant]

Hi Dimitar,

I tried doing that also, but it isnt working . tree data is getting loaded but tree is not displaying properly. is there any problem in arranging the js files in the heading. pls help me.

Thank You

Nagoor

[NagoorParticipant]

Hi Dimitar

I downloaded letest version of JQWidgets3.4. but the problem still persists. . pls do check

<link href=”<c:url value=”/resources/css/jquery-ui.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/js/jquery-1.9.1.js” />” ></script>

<script src=”<c:url value=”/resources/js/jquery-ui.js” />” ></script>
<link href=”<c:url value=”/resources/css/AdminR.css” />” rel=”stylesheet”>

<link href=”<c:url value=”/resources/css/jqx.base.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/scripts/jquery-1.10.2.min.js” />” ></script>

<link href=”<c:url value=”/resources/css/SearchWellR.css” />” rel=”stylesheet”>
<link href=”<c:url value=”/resources/css/BeaconStyleR.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/js/jquery.1.10.2.min.js” />”></script>
<script src=”<c:url value=”/resources/js/main.js” />”></script>
<link href=”<c:url value=”/resources/css/jquery-ui.css” />” rel=”stylesheet”>
<script src=”<c:url value=”/resources/js/jquery-ui.js” />” ></script>

<script src=”<c:url value=”/resources/scripts/jquery-1.10.2.min.js” />” ></script>
<script src=”<c:url value=”/resources/scripts/demos.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcore.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcheckbox.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxscrollbar.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxmenu.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.selection.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxdata.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.edit.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.pager.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.columnsresize.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxgrid.columnsreorder.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxtooltip.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxbuttons.js” />”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxlistbox.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxdropdownlist.js” />” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxcombobox.js”/>” ></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxpanel.js”/>”></script>
<script src=”<c:url value=”/resources/jqwidgets/jqxtree.js”/>”></script>
<script src=”<c:url value=”/resources/js/jquery-ui.js” />” ></script>

<script type=”text/javascript”>

$(document).ready(function () {
var jsonString = JSON.stringify(${serviceDetailsG});
var result2 = JSON.stringify(${servicesDetailsJson});

var number = $.parseJSON(result2);
var dataSourcenew = {

localdata: jsonString ,
datatype: “json”,
datafields:
[
{ name: ‘service’,type: ‘string’},
{ name: ‘serviceId’,type: ‘string’},
{ name: ‘serviceLevel’,type: ‘string’},
{ name: ‘serviceLevelId’,type: ‘string’},
{ name: ‘sapId’,type: ‘string’},
{ name: ‘serviceActionFlag’,type: ‘string’},

] ,

}

var adapter = new $.jqx.dataAdapter(dataSourcenew);

var editrow = -1;
adapter.dataBind();

var tooltiprenderer = function (element) {
var message = “If you do not have the SAP Sales Order Number, check Pending.  You will be contacted to provide it at a later date”;
$(element).jqxTooltip({position: ‘mouse’, content:message });

}

var loadImage = function (element) {

return ‘“/>’;
}

$(“#jqxgrid”).jqxGrid({ source: adapter });

$(“#jqxgrid”).jqxTooltip();

$(“#jqxgrid”).jqxGrid(
{
width:770,

// pageable: true,
editable: true,
selectionmode: ‘none’,
// height: ‘auto’,
autoheight: true,
columnsresize: true,
columnsreorder: true,
// pagesize:5,
columns: [
// { text: ‘Select’, columntype: ‘checkbox’, datafield: ‘available’, width: 50,pinned:true },
{ text: ‘Service Name’, datafield: ‘service’, editable:false,width: 180, cellsalign: ‘left’ },
{ text: ‘Service Level’, datafield: ‘serviceLevel’,width: 150,columntype: ‘dropdownlist’, validation: function (cell, value) {

if(value == null || value == “”){
return { result: false, message: “Please select service level” };
}

return true;
},

initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
var service = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “service”);
var serviceLevel = editor.val();
var sLevels = new Array();
var sLevelIds = new Array();

for (var i = 0; i < number.length; i++) {

if (service == number[i].service) {
sLevels = number[i].serviceLevel;
sLevelIds = number[i].serviceLevelId;
break;
}
}

editor.jqxDropDownList({ autoDropDownHeight: true, source: sLevels });
if (serviceLevel != “Select”) {
var index = sLevels.indexOf(serviceLevel);
editor.jqxDropDownList(‘selectIndex’, index);
}
else{
editor.jqxDropDownList(‘selectIndex’, 0);
}
},

},

{ text: ‘Sales Order Number’, datafield: ‘sapId’,editable:true, width: 150,validation: function (cell, value) {
if (isNaN(value)) {
return { result: false, message: “Please input number” };
}
else{
if(value.length > 10){
return { result: false, message: “Sales Order Number cannot exceed 10 digits” };
}
}
return true;
}
},

{ text: ‘Pending’, columntype: ‘checkbox’, datafield: ‘pending’, width: 50, align:’left’,rendered: tooltiprenderer,renderer:loadImage },
{ text: ‘Flag’, datafield: ‘serviceActionFlag’,width: 80},
{ text: ‘Delete’, datafield: ‘Edit’, columntype: ‘button’,width: 80 ,cellsrenderer: function () {
return “Delete”;
},buttonclick: function (row) {
// open the popup window when the user clicks a button.
var rowData = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
alert(rowData.serviceActionFlag);
var r=confirm(“Deleting Service may effect the approver detials updated.Please confirm before deleting”);
if (r==true)
{
if(rowData.serviceActionFlag == “A”)
{
$(‘#jqxgrid’).jqxGrid(‘deleteRow’,row);
}
else if(rowData.serviceActionFlag == “E”)
{
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “serviceActionFlag”, “D”);

}

else if(rowData.serviceActionFlag == “D”)
{
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, row, “serviceActionFlag”, “E”);

}
}
}
},
]

});

$(“#jqxgrid”).bind(‘columnreordered’, function (event) {
var column = event.args.columntext;
var newindex = event.args.newindex
var oldindex = event.args.oldindex;
$(“#eventlog”).text(“Column: ” + column + “, ” + “New Index: ” + newindex + “, Old Index: ” + oldindex);
});

var element2 = document.getElementById(“combobox”);

for(var i=0;i<number.length;i++){
var o = document.createElement(“option”);
o.value =number[i].serviceId;
o.text = number[i].service;
element2.appendChild(o);

}

});

</script>

<script type=”text/javascript”>

$(document).ready(function () {
var data = [
{ “Id”: “2”,
“parentId”: “1”,
“text”: “Hot Chocolate”,
“value”: “$2.3”
}, {
“Id”: “3”,
“parentId”: “1”,
“text”: “Peppermint Hot Chocolate”,
“value”: “$2.3”
}, {
“Id”: “4”,
“parentId”: “1”,
“text”: “Salted Caramel Hot Chocolate”,
“value”: “$2.3”
}, {
“Id”: “5”,
“parentId”: “1”,
“text”: “White Hot Chocolate”,
“value”: “$2.3”
}, {
“text”: “Chocolate Beverage”,
“Id”: “1”,
“parentId”: “-1”,
“value”: “$2.3”
}, {
“Id”: “6”,
“text”: “Espresso Beverage”,
“parentId”: “-1”,
“value”: “$2.3”
}, {
“Id”: “7”,
“parentId”: “6”,
“text”: “Caffe Americano”,
“value”: “$2.3”
}, {
“Id”: “8”,
“text”: “Caffe Latte”,
“parentId”: “6”,
“value”: “$2.3”
}, {
“Id”: “9”,
“text”: “Caffe Mocha”,
“parentId”: “6”,
“value”: “$2.3”
}, {
“Id”: “10”,
“text”: “Cappuccino”,
“parentId”: “6”,
“value”: “$2.3”
}, {
“Id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentId”: “6”,
“value”: “$2.3”
}, {
“Id”: “12”,
“text”: “Frappuccino”,
“parentId”: “-1”
}, {
“Id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentId”: “12”,
“value”: “$2.3”
}, {
“Id”: “15”,
“text”: “450 calories”,
“parentId”: “13”,
“value”: “$2.3”
}, {
“Id”: “16”,
“text”: “16g fat”,
“parentId”: “13”,
“value”: “$2.3”
}, {
“Id”: “17”,
“text”: “13g protein”,
“parentId”: “13”,
“value”: “$2.3”
}, {
“Id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentId”: “12”,
“value”: “$2.3”
}];

var Treesource =
{
datatype: “json”,
datafields: [
{ name: ‘Id’ },
{ name: ‘parentId’ },
{ name: ‘text’ },
{ name: ‘value’ }
],
id: ‘Id’,
localdata: data,
};
// create data adapter.
var TreedataAdapter = new $.jqx.dataAdapter(Treesource);
// perform Data Binding.
TreedataAdapter.dataBind();
// get the tree items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
// the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
// specifies the mapping between the ‘text’ and ‘label’ fields.
var records = TreedataAdapter.getRecordsHierarchy(“Id”, “parentId”, “items”, [{ name: “text”, map: “label”}]);
$(“#jqxWidgetTree”).jqxTree({source: records,width:”500px”,checkboxes: true});

});
</script>

///// Style sheet for auto-populate text box
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( “custom.combobox”, {
_create: function() {
this.wrapper = $( “<span>” )
.addClass( “custom-combobox” )
.insertAfter( this.element );

this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},

_createAutocomplete: function() {
var selected = this.element.children( “:selected” ),
value = selected.val() ? selected.text() : “”;

this.input = $( “<input>” )
.appendTo( this.wrapper )
.val( value )
.attr( “title”, “” )
.addClass( “custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left” )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, “_source” )
})
.tooltip({
tooltipClass: “ui-state-highlight”
});

this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( “select”, event, {
item: ui.item.option
});
},

autocompletechange: “_removeIfInvalid”
});
},

_createShowAllButton: function() {
var input = this.input,
wasOpen = false;

$( “” )
.attr( “tabIndex”, -1 )
.attr( “title”, “Show All Items” )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: “ui-icon-triangle-1-s”
},
text: false
})
.removeClass( “ui-corner-all” )
.addClass( “custom-combobox-toggle ui-corner-right” )
.mousedown(function() {
wasOpen = input.autocomplete( “widget” ).is( “:visible” );
})
.click(function() {
input.focus();

// Close if already visible
if ( wasOpen ) {
return;
}

// Pass empty string as value to search for, displaying all results
input.autocomplete( “search”, “” );
});
},

_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), “i” );
response( this.element.children( “option” ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},

_removeIfInvalid: function( event, ui ) {

// Selected an item, nothing to do
if ( ui.item ) {
return;
}

// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( “option” ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});

// Found a match, nothing to do
if ( valid ) {
return;
}

// Remove invalid value
this.input
.val( “” )
.attr( “title”, value + ” didn’t match any item” )
.tooltip( “open” );
this.element.val( “” );
this._delay(function() {
this.input.tooltip( “close” ).attr( “title”, “” );
}, 2500 );
this.input.data( “ui-autocomplete” ).term = “”;
},

_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );

$(function() {
$( “#combobox” ).combobox();
$( “#toggle” ).click(function() {
$( “#combobox” ).toggle();
});
});
</script>

</head>

<body class=’default’>
<form >

<div>
<p id=”tab1″ style=”margin-bottom: 5px; margin-top: 5px;”>Services Details for the well: </p>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
</div>

</div>

<br><br>

<div id=”jqxWidgetTree”>
</div>

<br><br>
<div>
<font style=”font-family: ‘Segoe UI Light’ ,’Segoe UI’;font-weight: 200;font-size: 15pt; color:#00A3F4″>Please Select service To Add</font><br>
</div>
<div class=”ui-widget”>
<select id=”combobox”>

</select>

</div>
<table>
<tr>
<td>
<div style=”margin-bottom: 5px; margin-top: 5px;”>
<button class=”b1″ type=”button” id=”Add” style=”width: 100px; height:30px; position:relative;” onClick=”return AddServices()”>Add Service</button>
</div>
</td>

</tr>

<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”>
</tr>

</table>

</form>
</body>
</html>

Thanks & Regards

Nagoor Saheb

[NagoorParticipant]

HI Dimitar

Thanks for reply. i am using 3.1.0. I will try with new version. Thank You

Nagoor

[NagoorParticipant]

Hi Dimitar,

Thank you for this example, it works perfectly in my case. i just need to know one more thing. how to make the combobox ineditable ie., one can just select from dropdown but could not edit the value in cell. pls help me with this

Thanks & Regards

Nagoor

[NagoorParticipant]

hi,

I found the solution to return from ajax call. pls help me adding the rows to grid as i specified..

Thanks in Advance

Nagoor

[NagoorParticipant]

hi peter, the problem is, when i submit the form, i am the data is exported appending with the url. so when there is large data, it doesnt work. i tried passing with hidden variable also. another problem with form is it updates the current page with action controller but, i need to close the popup.

thanks

[NagoorParticipant]

hi peter,

Hide coloumn is working only when it is called in an event like.. button click, but its not working on load of page. if i try to hide a coloumn based on condition in ready function , its not working.. if i do the same on click of button its working fine. pls help..

Thanks & Regards

[NagoorParticipant]

hi peter,

thanks again. i’ll check with that. and how about inage as coloumn header. can we do it using renderer call back. if so how to return value. pls help

Thanks in Advance

[NagoorParticipant]

hi peter,

$(“#jqxgrid”).jqxGrid(‘hidecolumn’,’wellName’);

here wellName is datafield of my required coloumn.

{ text: ‘Well Name’, datafield: ‘wellName’, editable: false,hideable: true, filtertype : ‘textbox’, width: 120 ,rendered: tooltiprenderer }

Thanks in Advance

[NagoorParticipant]

hi peter,

thank you very much, it solved half of my problem. what about image in place of text i.e, image as coloumn header.

i have another small doubt. hide column property is not working in my project.

$(“#jqxgrid”).jqxGrid(‘hidecolumn’,’wellName’);

i am calling this right after grid definition in ready function. i tried it calling in another function which is out of ready function. where did i go wrong. pls help me..

Thanks in Advance..

[Author]

Posts