jqgrid paging issue - Not loaded data with page - asp.net-mvc-4

I am using Jqgrid with customized Edit, Delete buttons. Also , I am using external search to search in grid. I am fustrating with one problem since two days.
Please check my code below of binding jqgrid
jQuery(document).ready(function () {
var myGrid = $('#list');
myGrid.jqGrid({
url: '/Site/GetData/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
loadonce: true,
colNames: ['Site ID', 'Site Name', 'Email Address', 'Website', 'Contact Person', 'Phone number', 'Mobile number', "Edit", "Delete"],
colModel:
[
{ name: 'SiteID', hidden: true },
{ name: 'SiteName' },
{ name: 'EmailID' },
{ name: 'Website' },
{ name: 'ContactPerson' },
{ name: 'PhoneNo' },
{ name: 'MobileNo' },
{ name: 'Edit', width: 50, sortable: false, formatter: ColumnFormatter },
{ name: 'Delete', width: 60, sortable: false, formatter: ColumnFormatter },
],
autowidth: true,
rowNum: 5,
rowList: [5, 10, 20, 50],
pager: jQuery('#pager'),
sortorder: "desc",
viewrecords: true,
gridview: true,
ignoreCase: true,
}).navGrid('#pager',
{
rowNum: 5, edit: false, add: false, del: false, search: false, refresh: true
}
);
});
Using Above code I am binding Jqgrid.
Now, I need to delete a row from the grid, after deleting I need to refresh whole the grid. But it does not kept data according to page. Please check my delete function below :
function deleteRow(imageElement, UserId) {
var data = new Object();
data.id = UserId;
var _data = JSON.stringify(data);
$("#list").setGridParam({ datatype: 'json' });
$.ajax({
url: '#Url.Action("Delete", "Site")',
type: "POST",
contentType: "application/json; charset=utf-8",
data: _data,
success: function (result) {
var currentPage = $('#gridData').getGridParam('page');
$('#list').trigger('reloadGrid');
$("#list").setGridParam({ page: currentPage })
},
error: function (result) {
alert("This data can not be deleted");
}
});
}
Okay , using above code , I am deleting row, and if response is Success than need to reload whole the grid.
Now if I am at 2nd page and deleting any row, than it will reloads the grid , it shows me Page number is set as 2. But records shows me from 1st page of grid.
Please help me for that

I' m not sure that I correctly understand the behavior which you need to implement. If you want to reload the whole grid from the server then you should reset the value of datatype before reloading. The reason: you use loadonce: true which loads the data from the server once, save it in internal jqGrid parameters data and _index and then the datatype will be changed to "local". So if you want to reload the data from the server you should execute
$('#list').jqGrid('setGridParam', {datatype: 'json'});
before reloadGrid.
Additionally if you need to reload grid with specific page you can use page parameter of jqGrid (see the answer for details). In the most cases the usage of current:true option is what one need. So the code should be something like below
...
success: function (result) {
$("#list").setGridParam({ datatype: 'json' })
.trigger('reloadGrid', [{ current: true }]);
}

Related

Inline Jqgrid drop down binding issue

I am trying to bind a list of data from my MVC action controller in an inline JqGrid. The sample JSON data is follows
{Id:"1",FirstName:"Joy",Gender:"Male"},
{Id:"2",FirstName:"George",Gender:"Male"},
{Id:"3",FirstName:"Tessa",Gender:"Female"}
I am trying to bind a drop down for Gender within the inline JqGrid. The sample data for the dropdown is as follows.
{Id:"17b4bf97-4ab0-49b1-ab01-072f4dbed696",Gender:"Male"},
{Id:"f206d222-0608-4b92-b9dd-0cac5c66121",Gender:"Female"}
I have configured the JqGrid as follows
$("#tbl-users").CreateGrid({
url: // MVC controller action url,
colNames: ['User ID', 'First Name', 'Gender',....],
colModel: [
{ name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
{name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
{name: 'Gender', index: 'Gender', searchoptions: { sopt: ['cn'] }, editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
dataUrl: // Url to get the list of Gender User from the MVC controller,
buildSelect:
function (response) {
//Code to build a drop down
}
}
},
});
On configuring as above I am not able to show the value of the Gender in my list. What am I missing? It would be helpful if I get guidance from anyone.
I am using JqGrid 4.5.1
With reference to the example add value attribute in Gender editoptions, The editoptions will look something like this.
$("#tbl-users").CreateGrid({
url: // MVC controller action url,
colNames: ['User ID', 'First Name', 'Gender',....],
colModel: [
{ name: 'UserID', index: 'UserID', sorttype: 'integer', hidden: true, key: true },
{name: 'UserName', index: 'UserName', searchoptions: { sopt: ['cn'] }, editable: true},
{name: 'Gender', index: 'Gender', searchoptions: { sopt: ['cn'] }, editable: true,
edittype: "select",
formatter: 'select',
editoptions: {
value:"17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"
dataUrl: // Url to get the list of Gender User from the MVC controller,
buildSelect:
function (response) {
//Code to build a drop down
}
}
},
});
Change the return value for Gender as GUID.So the json will look something like this
{Id:"1",FirstName:"Joy",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"2",FirstName:"George",Gender:"17b4bf97-4ab0-49b1-ab01-072f4dbed696"},
{Id:"3",FirstName:"Tessa",Gender:"f206d222-0608-4b92-b9dd-0cac5c66121"}
FOR DYNAMIC LOADING
You can generate the value for value attribute in editoption dynamically by assigning the value in Viewbag on page load.
Assume the action for the page as Index in your controller
public ActionResult Index()
{
ViewBag.Genders = "17b4bf97-4ab0-49b1-ab01-072f4dbed696:Male;f206d222-0608-4b92-b9dd-0cac5c66121:Female"; // You can create your logic with C#
return this.View();
}
Assign ViewBag.Genders in value attribute of edit option as shown below
editoptions: { value:"#ViewBag.GenderTypes" }
I hope this idea will help you.

Sencha Touch proxy send post request with dynamic arguments

I want to send post request in sencha touch and the arguments I want to post are dynamic i.e. I want to take the textField values as a parameters to post. Please help me
proxy: {
type: "ajax",
url:'http://anotherserver.com/query.php',
method:'post',
extraParams: {
val: "TextField1.Text" // **here I want to provide the value of the textField help me plz**
},
reader: {
type: "json",
rootProperty: "notes",
totalProperty: "total"
}
},
Look first for Sencha Touch model concept because your can tag along your model into your Form (Ext.FormPanel) and treat it as one.
var model = Ext.create('Ext.data.Model',{
fields: ['name', 'email', 'password'],
proxy: [] //your proxy settings here,
customFunctionWithAjax: function(){
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
//after filling up your form you can get all textfields value
//with .getValues() and set it to your model
model.setData(form.getValues);
//then you can do anything you want like SAVE, or update
model.save();
//or call your custom function with your customised ajax request
model.customFunctionWithAjax();
// you can also check if your data are correct before sending it using .validate();
model.validate();
Usually you want to wrap the text field inside a form (formpanel).
Then you can use
var form = Ext.Viewport.down('.formpanel'),
values = form.getValues(),
textfieldValue = values.textfield_name;
...
extraParams: {
val: textfieldValue
},

How to control the Kendo Grid?

How do I control how many rows appear in a kendo grid? Real Estate is limited, so I need to have a lot of info in a pretty compact space. I'm trying to pack everything in my grid in a 300-pixel high area.
The issue I'm having is that all 200-plus rows of data that are being returned from my MVC JsonResult in my controller are displaying at once, on a single page. Not quite exactly what I'm looking for.
Code is below, if someone a little more knowledgeable about formatting a kendo grid could help out, I'd appreciate it.
Thanks!
-RC
{}
var RemoteJsonData_Call = new kendo.data.DataSource({
transport:
{
read: {
type: "GET",
dataType: "json",
url: resourceURL_Call
},
pageSizes: 8,
serverPaging: true
},
schema: {
model: {
ScheduleData: {
extensionDataField: {
fields: {
ScheduleDate: { type: "date" },
ScheduleAmount: { type: "number" },
SchedulePrice: { type: "number" },
ScheduleNotes: { type: "string" }
}
}
}
}
}
})
$('#callSched').kendoGrid({
height: '300',
sortable: true,
reorderable: true,
resizable: true,
pageable: {
numeric: true,
refresh: true,
pageSizes: true,
previousNext: true,
input: true,
info: true
},
columns: [
{
field: "ScheduleDate",
title: "Date",
template: "#= kendo.toString(kendo.parseDate(ScheduleDate, 'MM-dd-yyyy'), 'MM-dd-yyyy') #"
},
{
field: "ScheduleAmount",
title: "Amount",
},
{
field: "SchedulePrice",
title: "Price"
},
{
field: "ScheduleNotes",
title: "Notes"
}
], dataSource: RemoteJsonData_Call
});
{}
The problem is that you have defined that the paging is done in the server when it is not. You should say:
serverPaging: false
or just nothing since the default value is false.
With this you should have a grid with the number of pixels specified in the height option (in your example 300 pixels). Other options in you example are correct.
You have server paging and page size set up incorrectly here:
var RemoteJsonData_Call = new kendo.data.DataSource({
transport:
{
read: {
type: "GET",
dataType: "json",
url: resourceURL_Call
},
pageSizes: 8,
serverPaging: true
},
It should be:
var RemoteJsonData_Call = new kendo.data.DataSource({
transport:
{
read: {
type: "GET",
dataType: "json",
url: resourceURL_Call
}
},
pageSize: 8,
serverPaging: true
The config options were in the wrong place, and "pageSizes" was misspelled, it should be "pageSize" with no "s" on the end.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-pageSize

Extjs Combobox Autocomplete

I am using Extjs 4 ComboBox with remote mode. but when i typed any character data is not filtered. and even focus is changed only for first 12 value.
I am new to Extjs 4. Please help me how to do this.
my code is:
Ext.define('MyGroup.combo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.mycombo',
emptyText:'select keyword',
store: keywordStore,
valueField:'name',
displayField:'name',
mode: 'remote',
autoSelect: false,
selectOnFocus:true,
//shadow:true,
//forceSelection: false,
//triggerAction: 'all',
hideTrigger:true,
//multiSelect:true,
typeAhead:true,
minChars:1
});
Ext.define('keywordModel', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url : '/keywordServlet',
method:'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [
{name: 'name', mapping: 'name'}
]
});
var keywordStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'keywordModel'
});
As per my knowledge i think this will be helpful for you:
Ext.define('MyGroup.combo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.mycombo',
initComponent: function() {
this.callParent([arguments]);
}
});
var keywordStore = Ext.create('Ext.data.SimpleStore',{
fields: ['id', 'name'],
data: [[1, 'mr'],[2, 'mr(yes)'],[3, 'mr(no)'], [4, 'example'], [5, 'example(yes)'],[6,'example(no)'],[7,'sample'],[8,'sample(yes)'],[9,'sample(no)'],[10,'mrs'],[11,'mrs(yes)'],[12,'mrs(no)']]
});
Ext.widget('mycombo',{
xtype : 'combo',
emptyText:'select keyword',
store: keywordStore,
valueField:'name',
displayField:'name',
mode: 'remote',
autoSelect: false,
selectOnFocus:true,
//shadow:true,
//forceSelection: false,
//triggerAction: 'all',
hideTrigger:true,
//multiSelect:true,
typeAhead:true,
minChars:1,
renderTo :document.body
});
And one more thing is no one is trying to answer each and every question,but every one is trying to help some body like us:-)

how to use href for a column in Ext Grid Panel

I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},