jQWidgets Forums
Forum Replies Created
-
Hi Peter,
I am able to add container and add custom HTML elements. But, I am running into a new issue I am updating this grid every time I select value from a dropdown and by adding this html elements to one it displays the column headers for all the grids. Is there a way that I can hide this for rest of the grids. I have copied my code below. Please help I want the statusbar and toolbar including Search button visible only when I select option value 4
<form class=”form-horizontal”>
<div class=”form-group”>
<label class=”col-md-2 control-label”>Activity Codes</label>
<select onchange=”activity(this);”>
<option value=””> Select a Role </option>
<option value=”1″>Activity Codes</option>
<option value=”2″>Pay Items</option>
<option value=”3″>Crafts & Wages</option>
<option value=”4″>Equipment</option>
</select>
</div>
</form><div class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgridac”>
</div><div id=”jqxwindow”>
<div>
Find Record
</div>
<div style=”overflow: hidden;”>
<div>
Find what:
</div>
<div style=’margin-top:5px;’>
<input id=’inputField’ type=”text” class=”jqx-input” style=”width: 200px; height: 23px;” />
</div>
<div style=”margin-top: 7px; clear: both;”>
Look in:
</div>
<div style=’margin-top:5px;’>
<div id=’dropdownlist’>
</div>
</div>
<div>
<input type=”button” style=’margin-top: 15px; margin-left: 50px; float: left;’ value=”Find” id=”findButton” />
<input type=”button” style=’margin-left: 5px; margin-top: 15px; float: left;’ value=”Clear” id=”clearButton” />
</div>
</div>
</div></div>
</div><script id=”activitygrid” type=”text/javascript”>
$(“#jqxwindow”).hide(true);
function activity(rowsac) {var value = rowsac.value;
if (value == 1) {
// printbtnac.hidden = false;
activitynoteId.hidden = false;
var dataac = new Array();
var activitycodes = [“02”, “03”, “04”, “05”, “06”, “07”, “08”];
var descptn = [“Water Pollution Control”, “Clearing and Grubbing”, “Crack Seal”, “Minor Pavement Reconstruction”, “Pavement Conforms”, “Asphalt Concrete 1/2′ Type A”, “Existing Sign Remove”];
var startdt = [“”, “”, “”, “”, “”, “”, “”];
var duratn = [“0”, “0”, “0”, “0”, “0”, “0”, “0”];
var completn = [“”, “”, “”, “”, “”, “”, “”];
for (var i = 0; i < 7; i++) {
var row = {};row[“acodes”] = activitycodes[Math.floor(Math.random() * activitycodes.length)];
row[“desc”] = descptn[Math.floor(Math.random() * descptn.length)];
row[“startd”] = startdt[Math.floor(Math.random() * startdt.length)];
row[“duration”] = duratn[Math.floor(Math.random() * duratn.length)];
row[“complete”] = completn[Math.floor(Math.random() * completn.length)];
dataac[i] = row;
}
// return dataac;var source = { localdata: dataac, datatype: “array” };
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#jqxwindow”).hide(true);
$(“#jqxgridac”).jqxGrid(
{
width: 680,
pageable: true,
autorowheight: true,
autoheight: true,
source: dataAdapter,
editable: true,
selectionmode: ‘none’,
columns: [
{ text: ‘Activity Code’, datafield: ‘acodes’, width: 100 },
{ text: ‘Description’, datafield: ‘desc’, width: 240 },
{ text: ‘Start Date’, datafield: ‘startd’, width: 80 },
{ text: ‘Duration’, datafield: ‘duration’, width: 80 },
{ text: ‘Completion’, datafield: ‘complete’, width: 80 },
{ text: ‘Hide or Close’, datafield: ‘available’, columntype: ‘checkbox’, width: 100 }]
});
$(“#jqxgridac”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgridac”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else {
$(“#jqxgridac”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});
}else if (value == 4) {
//printbtn.hidden = false;
activitynoteId.hidden = true;
var data5 = ‘[ { “Equip. Number or Code”:”1-08″,”Description of Equipment”:”Ford F-250″,”Contractor”: “Martin General Engineering, Inc.”, “Date delivered to project or put into service”: “16-Sep-15″,”Date left project or taken out of service”:””}]’;// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Equip. Number or Code’, type: ‘string’ },
{ name: ‘Description of Equipment’, type: ‘string’ },
{ name: ‘Contractor’, type: ‘string’ },
{ name: ‘Date delivered to project or put into service’, type: ‘string’ },
{ name: ‘Date left project or taken out of service’, type: ‘string’ }
],
localdata: data5
};
var dataAdapter = new $.jqx.dataAdapter(source);var name;
$(“#jqxwindow”).hide(true);
$(“#jqxgridac”).jqxGrid(
{
width: 1000,
source: dataAdapter,
selectionmode: ‘singlecell’,
editable: true,
autoheight: true,
showstatusbar: true,
renderstatusbar: function (statusbar) {
var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;height:100%’></div>”);
//var equipnumber = $(“<span style=’float: left; margin-left: 5px; margin-right: 4px;background-color: #FFFF00′>Enter a letter before each code to represent a Contractor. Prime should be ‘A’ etc. Ex: A 1234</span>”);
var searchButton = $(“<div style=’float: right; margin-left: 5px;’>
<span style=’margin-left: 4px; position: relative; top: -3px;’>Find</span></div>”);
container.append(searchButton);
// container.append(equipnumber);
statusbar.append(container);
searchButton.jqxButton({ width: 50, height: 20 });
// search for a record.
searchButton.click(function (event) {
var offset = $(“#jqxgridac”).offset();
$(“#jqxwindow”).hide(false);
$(“#jqxwindow”).jqxWindow(‘open’);
$(“#jqxwindow”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
});
},
columns: [
{ text: ‘Equip. Number or Code’, datafield: ‘Equip. Number or Code’, width: 150 },
{ text: ‘Description of Equipment’, datafield: ‘Description of Equipment’, width: 200 },
{
text: ‘Contractor’, datafield: ‘Contractor’, width: 200, columntype: ‘template’,
createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
editor.append(‘<div style=”border-color: transparent;” id=”jqxgrid-editor”></div>’);
editor.jqxDropDownButton({ width: 150, height: 25 });var data5 = generatedata(100);
var source =
{
localdata: data5,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },],
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid-editor”).jqxGrid(
{
width: 200,
source: dataAdapter,
pageable: true,
autoheight: true,
columnsresize: true,
columnsheight: 15,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 90 },],
});
$(“#jqxgrid-editor”).on(‘rowselect’, function (event) {
var args = event.args;
var row = $(“#jqxgrid-editor”).jqxGrid(‘getrowdata’, args.rowindex);
var dropDownContent = ‘<div style=”position: relative; margin-left: 3px; margin-top: 5px;”>’ + row[‘firstname’] + ‘ ‘ + row[‘lastname’] + ‘</div>’;
name = row.firstname + ” ” + row.lastname;
editor.jqxDropDownButton(‘setContent’, dropDownContent);
editor.css(“display”, “none”);
});$(“#jqxgrid-editor”).jqxGrid(‘selectrow’, 0);
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
editor.jqxDropDownButton(“close”);
return name;
}
},
{ text: ‘Date delivered to project or put into service’, datafield: ‘Date delivered to project or put into service’, width: 200 },
{ text: ‘Date left project or taken out of service’, datafield: ‘Date left project or taken out of service’, width: 250 },
],
// showtoolbar: true,
// autoheight: true,
// rendertoolbar: function (toolbar) {
// var me = this;
// var container = $(“<div style=’margin: 5px;’></div>”);
// var span = $(“<span style=’float: left; margin-top: 5px; margin-right: 4px; background-color: #FFFF00′>Enter Unique Code for Each Equipment.(See Example Below.)</span>”);
// toolbar.append(container);
// container.append(span);
// },});
// create jqxWindow.
$(“#jqxwindow”).jqxWindow({ resizable: true, autoOpen: false, width: 210, height: 180 });
// create find and clear buttons.
$(“#findButton”).jqxButton({ width: 70 });
$(“#clearButton”).jqxButton({ width: 70 });
// create dropdownlist.
$(“#dropdownlist”).jqxDropDownList({
autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23,
source: [
‘Equip. Number or Code’, ‘Description of Equipment’, ‘Contractor’, ‘Date delivered to project or put into service’, ‘Date left project or taken out of service’
]
});
if (theme != “”) {
$(“#inputField”).addClass(‘jqx-input-‘ + theme);
}
// clear filters.
$(“#clearButton”).click(function () {
$(“#jqxgridac”).jqxGrid(‘clearfilters’);
});
// find records that match a criteria.
$(“#findButton”).click(function () {
$(“#jqxgridac”).jqxGrid(‘clearfilters’);
var searchColumnIndex = $(“#dropdownlist”).jqxDropDownList(‘selectedIndex’);
var datafield = “”;
switch (searchColumnIndex) {
case 0:
datafield = “Equip. Number or Code”;
break;
case 1:
datafield = “Description of Equipment”;
break;
case 2:
datafield = “Contractor”;
break;
case 3:
datafield = “Date delivered to project or put into service”;
break;
case 4:
datafield = “Date left project or taken out of service”;
break;
}
var searchText = $(“#inputField”).val();
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = searchText;
var filtercondition = ‘contains’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
$(“#jqxgridac”).jqxGrid(‘addfilter’, datafield, filtergroup);
// apply the filters.
$(“#jqxgridac”).jqxGrid(‘applyfilters’);
});}
}
</script>