Auto Complete search and Column header with description in color

[sindcParticipant]

I am working in MVC 5 application. I am using jqxGrid thanks to your team it’s a wonderful plugin.

I am trying to add notes/description in the column header with a separator and background color and also in the column footer,
I am also looking for some help with implementing Autocomplete search in jqxgrid.

Can someone help me with this.

Thanks,
SindC

[Peter StoevKeymaster]

Hi SindC,

You can add ToolBar or StatusBar with Custom HTML Elements inside them. For more information, please take a look at the Grid’s Demos page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[sindcParticipant]

Hi Peter,

Thanks for the reply.

I am a beginner in JavaScript. I tried to follow the demo page for StatusBar but I am unable to add text only for one particular column header. When I tried the example it adds a statusbar as grid’s header.

Please help so that I can add a description for each column header.

Thanks,
SindC

[Peter StoevKeymaster]

Hi SindC,

On this page: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?arctic is shown how to add Toolbar. Each column also has “renderer” method which allows you to implement custom HTML rendering i.e custom HTML displayed within the column’s header. For more information about this, look at the Grid’s API page in the “columns” section.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[sindcParticipant]

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>

[sindcParticipant]

Can we hide the render toolbar , render status bar for rest of them

Thanks,
SindC

[Author]

Posts