custom filter menu

[KBhimaParticipant]

Hi JqWidgets Team,

Am following this demo to create filters.
Am doing this using angularjs and jqwidgets.
In the firstname or last name column filter, when I start typing a letter it would give me all the names that start with that letter . This is not working in my case. Below is my code, please let me know where am going wrong.

Also I don’t want the filter option in all the columns, I want it only in the second column(ClientName). How to remove the filters in the other columns.

var demoApp = angular.module(“demoApp”, [“jqwidgets”]);

//scopes are the objects that refer to the model and acts as a glue between controller and view.
// controller maintains the application data and behavior using $scope object
demoApp.controller(“demoController”, function ($scope) {
var data = “”;
var theme =” “;
var source =
{
localdata: data,
datafields:
[
{ name: ‘ClientId’, type: ‘int’ },
{ name: ‘ClientName’, type: ‘string’ }
],
datatype: “array”
};
var adapter = new $.jqx.dataAdapter(source);
var buildFilterPanel = function (filterPanel, datafield) {
var textInput = $(“<input style=’margin:5px;’/>”);
var applyinput = $(“<div class=’filter’ style=’height: 25px; margin-left: 20px; margin-top: 7px;’></div>”);
var filterbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 2px;”>Filter</span>’);
applyinput.append(filterbutton);
var filterclearbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 5px;”>Clear</span>’);
applyinput.append(filterclearbutton);
filterPanel.append(textInput);
filterPanel.append(applyinput);
filterbutton.jqxButton({ theme: theme, height: 20 });
filterclearbutton.jqxButton({ theme: theme, height: 20 });
var dataSource =
{
localdata: adapter.records,
datatype: “array”,
async: false
}
var dataadapter = new $.jqx.dataAdapter(dataSource,
{
autoBind: false,
autoSort: true,
autoSortField: datafield,
async: false,
uniqueDataFields: [datafield]
});
var column = $scope.gridSettings.jqxGrid(‘getcolumn’, datafield);
textInput.jqxInput({ theme: theme, placeHolder: “Enter ” + column.text, popupZIndex: 9999999, displayMember: datafield, source: dataadapter, height: 23, width: 175 });
textInput.keyup(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterbutton.click(function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = textInput.val();
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$scope.gridSettings.jqxGrid(‘addfilter’, ‘ClientName’, filtergroup);
// apply the filters.
$scope.gridSettings.jqxGrid(‘applyfilters’);
$scope.gridSettings.jqxGrid(‘closemenu’);
});
filterbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterclearbutton.click(function () {
$scope.gridSettings.jqxGrid(‘removefilter’, datafield);
// apply the filters.
$scope.gridSettings.jqxGrid(‘applyfilters’);
$scope.gridSettings.jqxGrid(‘closemenu’);
});
filterclearbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterclearbutton.trigger(‘click’);
}
textInput.val(“”);
});
}
var rowId, buttonclick;
$scope.isDisabled = true;
var imagerenderer = function (row, datafield, value) {
// return “<jqx-name data-value=” + value + “><jqx-name>”;
//return ‘‘

return ‘<jqx-button jqx-on-click =”buttonclick()”/>‘;
};

// Grid data.
$scope.client = [{
ClientId: 1,
ClientName: “HRB Block”
}, {
ClientId: 2,
ClientName: “HRB Block India”
}, {
ClientId: 3,
ClientName: “HRB”
},
{
ClientId: 4,
ClientName: “HRB and Block”
},{
ClientId: 5,
ClientName: “H&R Block”
}];

$scope.grid = {};
// grid settings is used in jqx-settings attribute to call a method
$scope.gridSettings =
{
altrows: false,
sortable: true,
width: 500,
height: 180,
source: adapter,
filterable: true,
theme: ‘energyblue’,
columnsresize:true,
ready: function()
{
// $scope.grid.selectrow(0);
},
autoshowfiltericon: true,
source: $scope.client,
columnmenuopening: function (menu, datafield, height) {
var column = $scope.gridSettings.jqxGrid(‘getcolumn’, datafield);
if (column.filtertype === “custom”) {
menu.height(155);
setTimeout(function () {
menu.find(‘input’).focus();
}, 25);
}
else menu.height(height);
},
columns: [
{ text: ‘ClientId’, columntype: ‘textbox’, dataField: ‘ClientId’},
{ text: ‘ClientName’, columntype: ‘textbox’, dataField: ‘ClientName’, filtertype: “custom”,
createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ”, datafield: ‘Edit’,
createwidget: function (row, column, value, htmlElement) {
var datarecord = value;
var imgurl = ‘images/edit.png’;
var img = ‘‘;
var button = $(“<div style=’border:none;’>” + img + “<div class=’buttonValue’>” + value + “</div></div>”);
$(htmlElement).append(button);
button.jqxButton({ template: “success”, height: ‘100%’, width: ‘100%’ });
button.click(function (event) {
editrow = row;
$scope.isDisabled = !$scope.isDisabled;
var data = $scope.gridSettings.jqxGrid(‘getrowdata’, editrow);
$scope.ClientIDInput.element.setAttribute(‘readonly’, ‘readonly’);
$scope.clientIdSettings.jqxInput(‘val’,data.ClientId);
$scope.clientNameSettings.jqxInput(‘val’,data.ClientName);
});
},
initwidget: function (row, column, value, htmlElement) {
var imgurl = ‘images/edit.png’;
$(htmlElement).find(‘.buttonValue’)[0].innerHTML = value;
$(htmlElement).find(‘img’)[0].src = imgurl;
}
},
{
text: ”, datafield: ‘delete’, width: 100,
createwidget: function (row, column, value, htmlElement) {
var datarecord = value;
var imgurl = ‘images/remove.png’;
var img = ‘‘;
var button = $(“<div style=’border:none;’>” + img + “<div class=’buttonValue’>” + value + “</div></div>”);
$(htmlElement).append(button);
button.jqxButton({ template: “success”, height: ‘100%’, width: ‘100%’ });
button.click(function (event) {
$scope.jqxWindowSettings.jqxWindow(‘open’);
$scope.Ok= function(row){
deleterow =row;
var selectedrowindex = $scope.gridSettings.jqxGrid(‘getselectedrowindex’);
var rowscount = $scope.gridSettings.jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $scope.gridSettings.jqxGrid(‘getrowid’, selectedrowindex);
var commit = $scope.gridSettings.jqxGrid(‘deleterow’, id);
}
$scope.jqxWindowSettings.apply(‘close’);
}
$scope.Cancel= function(){
$scope.jqxWindowSettings.apply(‘close’);
}

});
},
initwidget: function (row, column, value, htmlElement) {
var imgurl = ‘images/remove.png’;
$(htmlElement).find(‘.buttonValue’)[0].innerHTML = value;
$(htmlElement).find(‘img’)[0].src = imgurl;
}
}
]

};
$scope.$on(“filter”, function (event) {
// $(“#events”).jqxPanel(‘clearcontent’);
var filterinfo = $scope.gridSettings.jqxGrid(‘getfilterinformation’);
var eventData = “Triggered ‘filter’ event”;
for (i = 0; i < filterinfo.length; i++) {
var eventData = “Filter Column: ” + filterinfo[i].filtercolumntext;
// $(‘#events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);
}
});
$scope.clientIdSettings = { width: 150, height: 30 };
$scope.clientNameSettings = { width: 150, height: 30, };

$scope.addSettings =
{
height: 30, width: 80

};

$scope.btnSettings = { height: 30, width: 80};

$scope.jqxWindowSettings = {
maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
};

$scope.add = function () {
$scope.isDisabled = !$scope.isDisabled;
$scope.ClientIDInput.element.removeAttribute(‘readonly’);
$scope.clientNameSettings.jqxInput(‘focus’);
$scope.clientIdSettings.jqxInput(‘val’,”);
$scope.clientIdSettings.jqxInput(‘focus’);
$scope.clientNameSettings.jqxInput(‘val’,”);
rowId =”;
}; $scope.cancel = function (row,event) {
$scope.isDisabled = !$scope.isDisabled;
$scope.clientIdSettings.jqxInput(‘val’,”);

$scope.clientNameSettings.jqxInput(‘val’,”);
};

$scope.save = function()
{
$scope.isDisabled = !$scope.isDisabled;
var mode=””;
var data = {
ClientId: $scope.clientIdSettings.jqxInput(‘val’),
ClientName: $scope.clientNameSettings.jqxInput(‘val’)
};
if(rowId == ”){
$scope.gridSettings.jqxGrid(‘addrow’, null, data);
var rows = $scope.gridSettings.jqxGrid(‘getrows’);
$scope.gridSettings.jqxGrid(‘selectrow’,rows.length-1 );
$scope.clientIdSettings.jqxInput(‘val’, ”);
$scope.clientNameSettings.jqxInput(‘val’, ”);
}else
var rowID = $scope.gridSettings.jqxGrid(‘getrowid’, editrow);
$scope.gridSettings.jqxGrid(‘updaterow’, rowID, data);
$scope.clientIdSettings.jqxInput(‘val’, ”);
$scope.clientNameSettings.jqxInput(‘val’, ”);
};

});

</script>

</head>
<body ng-controller=”demoController”>
<div>
<jqx-button jqx-settings=”addSettings” jqx-create=”addSettings” jqx-on-click=”add()”>New Client</jqx-button>

</div>
<br>

<div >
<jqx-grid jqx-instance=”grid” jqx-settings=”gridSettings”></jqx-grid>
<p>ClientID:
<jqx-input jqx-instance=”ClientIDInput” jqx-settings=”clientIdSettings” jqx-create=”clientIdSettings” ng-disabled =”isDisabled”></jqx-input></p>
<p>Client Name:<jqx-input jqx-settings=”clientNameSettings” jqx-create=”clientNameSettings” ng-disabled =”isDisabled”></jqx-input></p>
</div><br>

<div>

<jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” ng-disabled =”isDisabled” jqx-on-click=”save() “>Save</jqx-button>
<jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”cancel()” ng-disabled =”isDisabled” style=”margin-left: 5px;”>Cancel</jqx-button>
</div>
<jqx-window jqx-settings=”jqxWindowSettings”>
<div>
Confirm
</div>
<div>
<div>Are you sure you want to delete this client?
</div>
<div>
<div style=”float: right; margin-top: 15px;”>
<jqx-button jqx-on-click=”Ok()” style=”margin-right: 10px”>Ok</jqx-button>
<jqx-button jqx-on-click=”Cancel()”>Cancel</jqx-button>
</div>
</div>
</div>
</jqx-window>

</body>
</html>

[HristoParticipant]

Hello KBhima,

This is one big project and we cannot to spend as much time for each. Alse this code is not formatted and it is difficult to read.
Please provide us simple example that demonstrate a concrete issue. (better way is on https://www.jseditor.io/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts