jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Dimitar
Here is sample code which you are provide on web here also have same issue with new release but this same code work with earlier release (3.8.0)
so i think this issue come with new release please help usNote:-issue is when check on header check box first row not click-able but when click on second row then first row also click-able
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>Custom Rows Selection</title>
<link rel=”stylesheet” href=”js/plugin/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/plugin/jquery-2.1.4.min.js”></script>
<script type=”text/javascript” src=”js/plugin/jqwidgets/jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {// prepare the data
var data = preparegriddata(200);var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ }
],};
var dataAdapter = new $.jqx.dataAdapter(source);
var columnCheckBox = null;
var updatingCheckState = false;// initialize jqxGrid. Disable the built-in selection.
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
editable: true,enablehover: false,
selectionmode: ‘none’,
pageable: true,
sortable: true,
autoheight: true,
columns: [
{
text: ”, menu: false, sortable: false, editable: true,
datafield: ‘available’, columntype: ‘checkbox’, width: 40,
renderer: function () {
return ‘<div style=”margin-left: 10px; margin-top: 5px;”></div>’;
},
rendered: function (element) {
$(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {
var checked = event.args.checked;
var pageinfo = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
var pagenum = pageinfo.pagenum;
var pagesize = pageinfo.pagesize;
if (checked == null || updatingCheckState) return;
$(“#jqxgrid”).jqxGrid(‘beginupdate’);// select all rows when the column’s checkbox is checked.
// update cells values.
var startrow = pagenum * pagesize;
for (var i = startrow; i < startrow + pagesize; i++) {
// The bound index represents the row’s unique index.
// Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C’s bound index will be 2, but its visible index will be 0.
// The code below gets the bound index of the displayed row and updates the value of the row’s available column.
var boundindex = $(“#jqxgrid”).jqxGrid(‘getrowboundindex’, i);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, boundindex, ‘available’, event.args.checked);
}$(“#jqxgrid”).jqxGrid(‘endupdate’);
});
return true;
}
},
{ text: ‘First Name’, editable: false, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, editable: false, datafield: ‘lastname’, width: 90 },
{ text: ‘Product’, editable: false, datafield: ‘productname’, width: 200 },
{ text: ‘Quantity’, editable: false, datafield: ‘quantity’ }
]
});// select or unselect rows when a checkbox is checked or unchecked.
$(“#jqxgrid”).on(‘cellvaluechanged’, function (event) {// update the state of the column’s checkbox. When all checkboxes on the displayed page are checked, we need to check column’s checkbox. We uncheck it,
// when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.
if (columnCheckBox) {
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var pagesize = datainfo.paginginformation.pagesize;
var pagenum = datainfo.paginginformation.pagenum;
var selectedRows = $(“#jqxgrid”).jqxGrid(‘getselectedrowindexes’);
var state = false;
var count = 0;
$.each(selectedRows, function () {
if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
count++;
}
});if (count != 0) state = null;
if (count == pagesize) state = true;
if (count == 0) state = false;updatingCheckState = true;
$(columnCheckBox).jqxCheckBox({ checked: state });updatingCheckState = false;
}
});
});function preparegriddata(rowscount) {
// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var quantity = 1 + Math.round(Math.random() * 10);row[“available”] = false;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“quantity”] = quantity;
data[i] = row;
}return data;
}
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
</div>
</body>
</html>HI
Thanks for reply but its not working we are using server side filter that way is give data still loading error whenever i click on filter button
so its not work for me.hi Ivailo Ivanov
Thanks fro reply
but this is not work for me.
actually on first visit on page all thinks working fine then go to other page there also firs time filter works fine then whenever we back to page and open filter panel then filter panel visible but not fire any event like filter, reset, or change any value in input fields etc…even if i change value for any input fields(i.e check box or textbox) of filter panel not change..
hi Dimitar
Thanks
is works for me but have one new issue with new release
When i check checkbox for all check in header all row display as check then when i m going to uncheck first row not able to uncheck means nothing happened any thing but when i uncheck second row its working and then first row also working fine so what exact happen or how can i solve this we r used cellbeginedit function for data row edit check boxes. i think cellbeginedit not trigger when i trying to uncheck first row after check header checkboxthanks for any valuable help please reply its urgent
ok i will use latest version of jQWidgets (3.8.1) So my query is that can also need use latest css because i was done some changes in css as per our requirement, so i don’t want to replace its with new css version
HI Dimitar,
Thanks for reply ,
actually its some how difficult to provide sample on JSFiddle/JS Editor and also we must need selection mode as single row because we have requirement as need check box and single row selection both
is there any way to find out which event fire when scroll grid so we can refresh grid when scroll grid
because after scroll if i refresh grid its working fineHi Ivailo Ivanov,
thanks for help but could you please provide sample code or link fro example actually i didn’t get where and how i can set Boolean variable
Hi Ivailo Ivanov,
Thanks for reply,
i think problem is solved but i am facing another critical problem i am using single page application i am using custom filter for multichoice filter when we visit first time to page filter is working fine but whenever i am come again on page form another page filter not working when i inspect html i saw grid create no of filter panel instants(i.e if i visit page 3 time open filter panel grid create 3 same filter panel) so is there any way whenever i click on icon for open filter panel will remove existing filter panel and then load new filter panel or reload filter panel every time.
here is may code
we r using generic code of custom filter for all grid
this is column in grid
{ text: ‘job status’, datafield: ‘JobStatus’, editable: false, minwidth: 100, width: ‘auto’, cellsrenderer: toolTipRenderer,
filtertype: “custom”,
createfilterpanel: function (datafield, filterPanel) {
buildFilterPanelMultiChoice(filterPanel, datafield, ‘Diagnostic Job Status’);
}
},fro call generic filter function
var buildFilterPanelMultiChoice = function (filterPanel, datafield, name) {
genericBuildFilterPanelMultiChoice(filterPanel, datafield, dataAdapter, gID, name);
}generic function in utility
function genericBuildFilterPanelMultiChoice(filterPanel, datafield, dataAdapter, gId, name) {
var filterInfo = $(“#” + gId).jqxGrid(‘getfilterinformation’);
var storedFilterArr = new Array();
for (i = 0; i < filterInfo.length; i++) {
if (filterInfo[i].filtercolumn == datafield) {
storedFilterArr = filterInfo[i].filter.getfilters()[0].value.split(‘^’);
}
}var checkArr = getMultiCoiceFilterArr(name);
var inputdiv = $(‘<div class=”col-md-4″ style=”height:400px;”></div>’);
var strinput=”;
strinput+='<div class=”grid-pop” style=”width:216px;”>’;
strinput += ‘<div class=”con-area” style=”display: block;height: 110px;overflow-y: auto;width: 214px;” id=”‘ + gId + datafield + ‘div”>’;
for (var i = 0; i < checkArr.length; i++) {
if ($.inArray(checkArr[i].Value,storedFilterArr) < 0) {
//alert(‘if’);
strinput += ‘<div class=”checkbox”>’;
strinput += ‘<label>’;
strinput += ‘<input type=”checkbox” class=”checkItem” value=”‘ + checkArr[i].ControlValue + ‘”>’ + checkArr[i].Value;;
strinput += ‘</label>’;
strinput += ‘ </div>’;} else {
//alert(‘else’);
strinput += ‘<div class=”checkbox”>’;
strinput += ‘<label>’;
strinput += ‘<input type=”checkbox” checked=true class=”checkItem” value=”‘ + checkArr[i].ControlValue + ‘”>’ + checkArr[i].Value;
strinput += ‘</label>’;
strinput += ‘ </div>’;}
}
strinput+='</div>’;
strinput+='<div class=”btn-footer”>’;
strinput += ‘ <span id=”‘ + gId + datafield + ‘multichClear” class=”btn btn-default”>’ + i18n.t(‘reset’, { lng: lang }) + ‘</span>’;
strinput += ‘ <span id=”‘ + gId + datafield + ‘multichFilter” class=”btn btn-primary”>’ + i18n.t(‘go’, { lng: lang }) + ‘</span>’;
strinput+=’ </div>’;
strinput+='</div>’;inputdiv.append(strinput);
filterPanel.append(inputdiv);if (filterInfo.length > 0) {
$(“#” + gId + datafield + “multichClear”).attr(‘disabled’, false);
}
var dataSource =
{
localdata: dataAdapter.records,
async: false
}
var dataadapter = new $.jqx.dataAdapter(dataSource,
{
autoBind: false,
autoSort: true,
async: false,
uniqueDataFields: [datafield]
});
var column = $(“#” + gId).jqxGrid(‘getcolumn’, datafield);$(“#” + gId + datafield + “multichFilter”).on(“click”, function () {
var filtergroup = new $.jqx.filter();
var selectedFilterValue = ”;
$(“#” + gId + datafield + “div”).find(“input:checkbox”).each(function (i, ob) {
if ($(ob).is(‘:checked’)) {
selectedFilterValue += $(ob).val() + ‘^’;
}
});
selectedFilterValue = selectedFilterValue.substring(0, selectedFilterValue.length – 1)
var filter_or_operator = 1;
var filtervalue = selectedFilterValue;
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);// add the filters.
$(“#” + gId).jqxGrid(‘addfilter’, datafield, filtergroup);// apply the filters.
$(“#” + gId).jqxGrid(‘applyfilters’);
$(“#” + gId).jqxGrid(‘closemenu’);});
$(“#” + gId + datafield + “multichClear”).on(“click”, function () {
$(“#” + gId).jqxGrid(‘removefilter’, datafield);
// apply the filters.
$(“#” + gId).jqxGrid(‘closemenu’);});
}
-
AuthorPosts