We Keep Coding

Jquery grid loading only on 1st click and not reloading on subsequent clicks

I have a JQuery grid which is being populated on a button click based on certain drop-down selections.
The grid is loaded with data on the first button click. But on subsequent clicks the grid doesn't reload based on the changed drop-down selections.
The grid data loaded on the first button click persists until and unless i reload the page.
I have gone through some solutions online,such as
using $("#tblJQGrid").trigger("reloadGrid");for subsequent clicks except for the first click
cache:false property.
But none of them worked.
Here is my jqgrid code for reference
function BindGridData()
{
$("#tblJQGrid").jqGrid(
{url: "#Url.Action("GetGeographyBreakUpData", "GeoMap")"+ "?Parameters=" + Params + "",
datatype: "json",
//data: { "Parameters": Params },
async: false,
mtype: 'GET',
cache: false,
colNames: ['Id','GeoGraphy', 'Completed', 'InProgress'],
colModel: [
{ name: 'Id', index: 'Id', width: 20, stype: 'text',hidden:true },
{ name: 'Geography', index: 'Geography', width: 150 },
{ name: 'Completed', index: 'Completed', width: 150 },
{ name: 'InProgress', index: 'InProgress', width: 150 },
],
pager:'#pager',
jsonReader: {cell:""},
rowNum: 10,
sortorder: "desc",
sortname: 'Id',
viewrecords: true,
caption: "Survey Status:Summary",
scrollOffset: 0});
}
And here is how i am initialising the button click event
$(document).ready(function () {
var firstClick=true;
$("#btnSubmit").click(function(){
btnSubmitClick();
debugger
if(!firstClick)
{
$("#tblJQGrid").trigger("reloadGrid");
}
firstClick=false;
BindGridData();
});
});
Can someone tell me what i am doing wrong?

It seems that there are typical misunderstanding what the code $("#tblJQGrid").jqGrid({...}); do. It's create the grid. It means that in converts the empty table <table id="btnSubmit"></table> in relatively complex structure of divs and tables. See here. After understanding of that it should be clear that the second calling of BindGridData has no sence, becsue table#btnSubmit is not more empty. jqGrid tests it and just do nothing. Thus your current code just trigger reloadGrid with the old URL (see Params).
To fix the problem you have two main options:
usage url: "#Url.Action("GetGeographyBreakUpData", "GeoMap")" and postData with properties defined as functions (see the old answer)
recreate the grid on click instead of triggering reloadGrid. You can call GridUnload method (see the old answer) before call of BindGridData.

jqGrid setting multiselect checkbox id and name to a different value

I've just added free jqGrid to my ASP.NET MVC web application. Whist it is working great for the most part, I would like to set the values for "id" and "name" attributes on the multiselect checkboxes to an Id column value from a different column in the table?
Instead the checkboxes are set as follows:
<input type="checkbox" id="jqg_list2_jqg30" class="cbox" name="jqg_list2_jqg30" aria-checked="false">
How do I replace the jqg_list2_jqg30?
I've been following this demo where the id and name attributes on the checkboxes are set correctly, but I can't see what I am doing differently - http://www.trirand.com/blog/jqgrid/jqgrid.html
This is the logic for jqGrid
$("#list2").jqGrid({
url: 'https://localhost:44319/Package/GetPackages/2',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['Id', 'Name', 'Description'],
colModel: [
{ name: 'Id', index: 'Id', width: 55, sorttype: "int" },
{ name: 'Name', index: 'Name', width: 90, searchoptions: { "sopt": ["bw", "eq"] } },
{ name: 'Description', index: 'Description', width: 90 }
],
rowNum: 25,
rowList: [25, 50],
pager: '#pager2',
toppager: true,
sortname: 'Id',
viewrecords: true,
height: "auto",
sortorder: "asc",
multiPageSelection: true,
multiselect: true,
selarrrow: [],
caption: "JSON Example",
loadonce: true,
jsonReader: { repeatitems: false }
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false, search: true, view: false, refresh: true });
jQuery("#m1").click(function () {
var s;
s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
alert(s);
});
I know I could write some custom logic to do this but I don't think this is required as the example above shows and is something that should work out of the box?
Thanks in advance.

I think there are some common misunderstandings which follow your question. I suppose that you get the ids of selected elements by using jQuery("#list2").jqGrid('getGridParam', 'selarrrow') and then you need to get detailed information about the selected items: "id" and "name".
The first problem is the rowid of your grid. You don't included any test data returned from url: 'https://localhost:44319/Package/GetPackages/2', but I can guess that it's array of items like {"Id": 123, "Name": "Some name", "Description": "Some description"}, where the value of Id come from the database and all the values are unique. The internal organization of jqGrid require that every row of the grid (every <tr> element of the HTML table with the main data) has id attribute with an unique value. One names the value of id attribute as "rowid". By default jqGrid examines the input data for id property and uses the values as rowid. If you use Id instead of id then you can add jsonReader: { id: "Id" } to fix the problem and to inform jqGrid to use it as the input of the rowids. Alternatively you can configure Newtonsoft.Json settings of your ASP.NET MVC application to assign ContractResolver = new CamelCasePropertyNamesContractResolver();. The exact place of the assignment in the code depends on the version of ASP.NET MVC, which you use. The answer shows where you can assign the configuration settings in ASP.NET Core. I personally use such settings because I try to follow the standard name conversions of C# and JavaScript.
One more option which you have is adding key: true to the column Id. It will do almost the same as jsonReader: { id: "Id" }.
If you have the rowid (or the array of rowids by jQuery("#list2").jqGrid('getGridParam', 'selarrrow')) then you can easy get the value from any column or the value of any properties of the corresponding data item. If you use loadonce: true then the items of the data returned from the server will be saved locally in data parameter, like in the case of usage datatype: "local". You can easy get the data item using getLocalRow method. You can change the code
jQuery("#m1").click(function () {
var s;
s = jQuery("#list2").jqGrid('getGridParam', 'selarrrow');
alert(s);
});
to
jQuery("#m1").click(function () {
var $grid = jQuery("#list2"), i, item,
ids = $grid.jqGrid("getGridParam", "selarrrow");
for (i = 0; i < ids.length; i++) {
item = $grid.jqGrid("getLocalRow", ids[i]);
alert("rowid=" + ids[i] +
"\nId=" + item.Id +
"\nName=" + item.Name +
"\nDescription=" + item.Description);
}
});
By the way, I recommend you to remove unneeded index properties from all columns (from colModel) and remove some options of jqGrid with default values (mtype: 'GET', height: "auto", sortorder: "asc", selarrrow: []). I recommend you to remove empty div <div id="pager2"></div> from your HTML page and to use pager: true instead of pager: '#pager2'. Free jqGrid will generate the div for the page in the same way like for the toppager (see toppager: true). It simplifies the code. You can get the id selector of generated pager (if you need) using jQuery("#list2").jqGrid('getGridParam', 'pager'), but one don't need it in the most cases. Instead of using
jQuery("#list2").jqGrid('navGrid', '#pager2', {...});
you can use just
jQuery("#list2").jqGrid('navGrid', {...});
which will add navigator buttons to all pages of the grid.

Getting dojo comboBox value

I have a dojo comboBox. I want to get the value of the comboBox when the content is being changed.
Problem: I only get the previous changed value
Example:
ComboBox: "1234" I get 123
ComboBox: "12345" I get 1234
new dijit.form.ComboBox({intermediateChanges: false, propercase: true, autoComplete: false, hasDownArrow: "false", id: "Search", onChange: getValue,
queryExpr: "*${0}*", /*onBlur:FamilyNameLostFocus,*/ name: "Search", style: "width:100%"}, dojo.byId('TD_PatientSearch'));
function getValue(){
console.debug(dijit.byId('PatientSearch').getValue(););
}

You will need to set the intermediateChanges: true if you want to use this functionality.
Check out here for further Information : http://davidwalsh.name/dijit-intermediatechanges
regards, Miriam

ExtJS4 combobox loading/store issue

I'm seeing an issue with a combobox where I have a listener for the 'change' event. When the event fires it runs a function that filters a store that powers another combobox to filter the values that are available in the 2nd combobox.
The idea is that when you pick from a short list in the first combobox, it pares down the choices in the second combobox.
When the form loads, you can click the second combobox and see all the choices, that works great. When you then select something in the first combobox and then click the second combobox again, you see the appropriate shortened list but it's grayed out and the 'loading...' thing just spins and will never go away.
If you load the form and pick something in the first combobox and then click the second combobox it will filter and show fine but you run into the issue of the loading problem I described above if you try to change your selection in the first box and click the second combobox again.
Please see the code below, I have this setup working on another screen and it doesn't seem to have this issue.
I've got an ext store created like the following:
var comboBreaker = Ext.create('Ext.data.Store', {
autoLoad: false,
remoteSort: true,
remoteFilter: true,
fields: [{
name: 'id',
mapping: 'item_id',
type: 'int',
useNull: false},
'item_display_number','item_name', 'line_item_type_id', 'item_description'
],
proxy:{
type:'ajax',
url: '/invoicer/data/getlineitems',
reader: {
type: 'json',
successProperty: 'success',
root: 'results',
totalProperty: 'totalCount'
},
sorters:[{
property:'item_display_number',
direction:'ASC'
}]
}
});
This store powers a combobox, like so:
Ext.define('Writer.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function(){
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
frame: true,
title: 'Line Item',
id: 'writerform',
fieldDefaults: {
anchor: '100%',
labelAlign: 'right'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Item #',
name: 'item_number',
store: comboBreaker,
displayField: 'item_display_number',
valueField: 'id',
allowBlank: false,
forceSelection: true
},{
xtype: 'combobox',
fieldLabel: 'Item Type',
name: 'item_type',
id: 'item_type',
displayField: 'line_item_type',
valueField: 'id',
store: invoicer_lineItemTypeStore,
forceSelection: true,
labelWidth: 75,
width: 200,
listeners: {
change: {
fn: function() {
itemNumberFilter(comboBreaker);
}
}
}
}]
});
The itemNumberFilter() function takes a store and does filtering on it, here is that code:
function itemNumberFilter( store ) {
var id = Ext.getCmp('item_type').getValue();
store.remoteFilter = false;
store.clearFilter();
if ( id ) {
store.filter('line_item_type_id', id);
}
store.remoteFilter = true;
store.removeAll();
store.load({
scope: this,
callback: function( records ) {
console.log('Loaded records!');
console.log(records);
}
});
}
I see the logged out records every time I change my selection in the first combobox and I can 'see' the results in the second combobox but they're always grayed out with the 'loading..' GIF showing.
Edit: Video example: http://screencast.com/t/cUSHyFE6FIV
Edit: I believe this is the solution:
lastQuery: '',
listeners: {
beforequery: {
fn: function(query) {
delete this.lastQuery;
}
}
}
Adding this to the combobox config fixes the issue.
Edit2: I ran into a second bug introduced by this, it was fixed by adding:
this.clearValue();
to the beforequery function (above delete this.lastQuery). This clears the value of the combobox each time the drop down arrow is clicked.

Let's say you select item x in combo_1 and then item a in the pared down list in combo_2. You then change the selection in combo_1 to y, which then changes the list of items again in combo_2. Is a available in the new list in combo_2 that results from selecting item y in combo_1? Maybe it is an issue of trying to keep an item selected when it no longer exists in the list available to the combo.
Have you tried clearing the selection in combo_2 before applying the filter?

You can dynamically load the store of the second combox box but be sure to set the second combox box to "local".

ExtJS combobox acting like regular select

I try to use ComboBox on FormPanel, it is defined like this:
{
xtype: 'combo',
name: 'Reasons',
store: new Ext.data.ArrayStore({
id: 0,
fields: ['myId', 'displayText'],
data: [
[1, 'Reason 1'],
[2, 'Second Reason'],
[3, 'Something else']
]
}),
typeAhead: false,
mode: 'local',
valueField: 'myId',
displayField: 'displayText',
allowBlank: false,
editable: false,
forceSelection: true
}
I would like to act like a ordinary select element, when I have editable as false I not able to re-select anymore, when as true ( default ) I need to remove selection ( by backspace or delete ) in order to re-select.
What else I should turn off in order to downgrade combobox to select or shpuld I consider to use other component instead ?
My concern is if I really need ordinary select (not quite ordinary - ability to have store and manipulate options is very cool) - combo seems to me next level element what got too many features which I need to turn off and combo is rendered as input with arrow down image what trigger all action.
My question is:
Is it ExtJS element what is using HTML select tag, acting as select, rendering as select ?

The trick is to use triggerAction: 'all' - it forces the combo dropdown to show all items when you click the down-arrow icon (trigger).
That's probably the most counter-intuitive config option of ExtJS. And it's impossible to figure out what it really does by reading the docs. And like you say, to get a simple combo, you have to specify a myriad of config options, just to turn the fancy stuff off.
The ExtJS guys have promised to fix this in ExtJS 4, but until then I suggest you create your own ComboBox class that's configured the way most often needed in your app. For example I have something like this in my current project:
/**
* Simple combo, that just allows to choose from a list of values.
*/
var StaticComboBox = Ext.extend(Ext.form.ComboBox, {
mode: 'local',
triggerAction: 'all',
editable: false,
valueField: 'value',
displayField: 'label',
/**
* #cfg {[[String]]} data
* Items in combobox as array of value-label pairs.
*/
data: [],
initComponent: function() {
this.store = new Ext.data.ArrayStore({
fields: ['value', 'label'],
data: this.data
});
StaticComboBox.superclass.initComponent.call(this);
}
});
Having that, I can create a simple combo with just a few lines:
new StaticComboBox({
name: 'Reasons',
data: [
[1, 'Reason 1'],
[2, 'Second Reason'],
[3, 'Something else']
]
});