Related
I'm using highchart map, that displays the USA state and its counties, but I want to show all cities of the selected state and when someone clicks on the city map it will display pop up model
I want to display all cities of the selected state and when someone clicks on the city map it will display a pop-up model.
The code I'm using right now
<div id="container"></div>
<script>
const drilldown = async function (e) {
// console.log('hover key', e.point.drilldown)
if (!e.seriesOptions) {
const chart = this,
mapKey = `countries/us/${e.point.drilldown}-all`;
// Handle error, the timeout is cleared on success
let fail = setTimeout(() => {
if (!Highcharts.maps[mapKey]) {
chart.showLoading(`<i class="icon-frown"></i> Failed loading ${e.point.name}`);
fail = setTimeout(() => {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the Font Awesome spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
var topology = await
fetch(https://code.highcharts.com/mapdata/${mapKey}.topo.json)
.then(response => response.json());
// Load the drilldown map
// const topology = await fetch(`https://code.highcharts.com/mapdata/${mapKey}.topo.json`)
// .then(response => response.json());
const data = Highcharts.geojson(topology);
// Set a non-random bogus value
data.forEach((d, i) => {
d.value = i;
console.log('data',d)
});
// Apply the recommended map view if any
chart.mapView.update(
Highcharts.merge(
{ insets: undefined },
topology.objects.default['hc-recommended-mapview']
),
false
);
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
}
};
// On drill up, reset to the top-level map view
const drillup = function (e) {
if (e.seriesOptions.custom && e.seriesOptions.custom.mapView) {
e.target.mapView.update(
Highcharts.merge(
{ insets: undefined },
e.seriesOptions.custom.mapView
),
false
);
}
};
(async () => {
const topology = await fetch(
'https://code.highcharts.com/mapdata/countries/us/us-all.topo.json'
).then(response => response.json());
const data = Highcharts.geojson(topology);
const mapView = topology.objects.default['hc-recommended-mapview'];
// Set drilldown pointers
data.forEach((d, i) => {
d.drilldown = d.properties['hc-key'];
d.value = i; // Non-random bogus data
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
events: {
drilldown,
drillup,
thrilup
}
},
title: {
text: 'Highcharts Map Drilldown'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapView,
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [{
data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
},
custom: {
mapView
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
},
thrilup: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
})();
I use highchart chart to present in popup.
It can be presented when the marker is clicked for the first time.
But opening another popup cannot display the chart.
If I close the original one and open a new one, it can be displayed.
What is the problem?
Turn on for the first time
When opening another
Code:
function onEachFeature(feature, layer) {
var popupContent = '<p style="font-size:130%;">' + feature.properties.id + "<br>PM2.5: " + air + '</p><div class="d-flex"> <button class="day-button">24 hr</button> <button class="week-button">7 Days</button> <button class="mon-button ">30 Days</button></div>' + '</p><div id="container" style="min-width: 350px; height: 190px; margin: 0 auto"></div> <p> ';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent, { minWidth: 370 }).on("popupopen", function(e) {
var id1 = feature.properties.id;
Highcharts.setOptions({ global: { useUTC: false } });
var chart = null;
test(id1);
}
}
Highchart:
function test (station){
var ob = [];
var json_hour ="data.csv";
var count_nul = 0;
d3.csv(json_hour, function (error, result) {
function date_to_epoch(key) {
var epoch_seconds = new Date(key).getTime();
return Math.floor(epoch_seconds);
}
for (var i = 0; i < result.length; i++) {
var apoche = date_to_epoch(result[i]['date']).toString();
apoche = parseFloat(apoche);
if (parseFloat(result[i]['pm25']).toString() == 'NaN') {
count_nul++;
} else {
var miles = parseFloat(result[i]['pm25']);
}
ob.push([apoche, miles]);
}
if (count_nul >= 24) {
$("#con").text("no data");
}
else {
$("#con").empty();
console.log((ob));
new Highcharts.Chart({
chart: {
renderTo: 'con',
type: 'line'
},
title: { text: '' },
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
day: '%Y<br/>%m%d',
week: '%Y<br/>%m-%d',
month: '%Y<br/>%m',
year: '%Y'
}
, crosshair: true,
},
tooltip: {
split: false,
shared: true,
animation: true,
xDateFormat: '%Y-%m-%d %H:%M',
valueSuffix: ' µm'
},
series: [{
name: "PM2.5",
data: ob,
showInLegend: true
}
],
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
line: {
connectNulls: true,
}
},
responsive: {
rules: [{
condition: {
maxWidth: 330
},
}]
}
});
}
});
}
Change your code to:
function onEachFeature(feature, layer) {
var popupContent = '<p style="font-size:130%;">' + feature.properties.id + "<br>PM2.5: " + air + '</p><div class="d-flex"> <button class="day-button">24 hr</button> <button class="week-button">7 Days</button> <button class="mon-button ">30 Days</button></div>' + '</p><div id="container" style="min-width: 350px; height: 190px; margin: 0 auto"></div> <p> ';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent, { minWidth: 370 }).on("popupopen", function(e) {
var id1 = e.popup._source.feature.properties.id;
Highcharts.setOptions({ global: { useUTC: false } });
var chart = null;
test(id1);
}
}
With e.popup._source.feature.properties.id you are sure that the id is from the current open layer
I have following code which displays list of users and when i select user and click on send, it sends mail. But I want to display another list which takes users from selected values and then send mail.
View Code:
<div class="modal fade small" id="invitiesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h5 class="modal-title" id="myModalLabel">Share</h5>
</div>
<div class="modal-body">
<table id="tblMeeting"> </table>
<div id="pager"></div>
</div>
<input type="hidden" value="0" id='meetingId' name='meetingId'>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnShareMOM" data-dismiss="modal">Send Mail</button>
</div>
</div>
</div>
</div>
JQGrid:
var idsOfSelectedRows = new Array();
$("#DraftFile").change(function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById("mom_btn1").style.display = "inline-block";
document.getElementById("mom_btn2").style.display = "inline-block";
}
});
checkName = function (value) {
//debugger;
if (value.length == 0) {
return [false, "Please enter the Name!"]
}
return [true];
};
function ShareMOM(meetingId) {
var InvityIds = new Array();
//alert(meetingId);
$.ajax({
url: '#Url.Action("ShareView", "PostMeetingDocument", new { area = "Postmeeting" })',
type: "Get",
async: false,
data: { "meetingId": meetingId },
cache: false,
success: function (data) {
InvityIds = data;
//console.log(data);
},
error: function () {
//alert('oops something wrong!!');
}
})
idsOfSelectedRows = new Array();
//$.each(InvityIds, function (index, val) {
// idsOfSelectedRows.push(val);
//});
var updateIdsOfSelectedRows = function (id, isSelected) {
var contains = idsOfSelectedRows.indexOf(id);
if (!isSelected && contains>=0) {
for (var i = 0; i < idsOfSelectedRows.length; i++) {
if (idsOfSelectedRows[i] == id) {
idsOfSelectedRows.splice(i, 1);
break;
}
}
}
else if (contains<0) {
idsOfSelectedRows.push(id);
}
};
$("#tblMeeting").jqGrid("GridUnload")
$("#meetingId").val(meetingId);
$("#Invities").show();
var URL = '#Url.Action("GetInvitees", "PostMeetingDocument", new { area = "Postmeeting", meetingId = "_MeetingId" })';
URL = URL.replace("_MeetingId", meetingId);
$('#tblMeeting').jqGrid({
url: URL,
datatype: "json",
mytype: "GET",
colNames: ["UserID", "FirstName","LastName"],
colModel: [
{ name: 'UserID', index: 'UserID', width: 55, hidden: true, key: true, editable: false, checked: true },
{ name: 'FirstName', index: 'FirstName', sortable: false, align: "left", width: 150, editable: true, search: false, editrules: { custom: true, custom_func: checkName }, searchoptions: { sopt: ['cn'] } },
{ name: 'LastName', index: 'LastName', sortable: false, align: "left", width: 150, editable: true, search: false, editrules: { custom: true, custom_func: checkName } },
//{ name: 'Department', index: 'Department', sortable: false, align: "left", width: 150, editable: true, search: false, editrules: { custom: true, custom_func: checkName } }
],
rowNum: 30,
rowList: [30, 60, 90],
multiSort: true,
sortname: 'FirstName asc,LastName',
sortorder: 'asc',
height: 350,
pager: jQuery('#pager'),
width: 510,// 450,
multiselect: true,
multiPageSelection: true,
viewrecords: true,
//caption: "Add Invities",
onSelectRow: function (rowid, status) {
//selected[rowid] = status;
//setSelectedDeviceCount();
updateIdsOfSelectedRows(rowid, status);
},
onSelectAll: function (aRowids, status) {
var i, count, id;
for (i = 0, count = aRowids.length; i < count; i++) {
//selected[rowids[i]] = status;
id = aRowids[i];
updateIdsOfSelectedRows(id, status);
}
},
loadComplete: function () {
$.each(idsOfSelectedRows, function (index, val) {
//var ids = grid.jqGrid('getDataIDs');
//for (var i = 0; i < ids.length; i++) {
// if (selected[ids[i]] === true) {
// grid.setSelection(ids[i], false);
// }
//}
$('#tblMeeting').jqGrid("setSelection", val, true);
});
},
shrinkToFit: true
}).navGrid(pager, { edit: false, add: false, del: false, search: false, refresh: true, addtext: "Share MOM", searchtext: "Search", refreshtext: "Refresh" },
{
//Edit.
},
{
// add options.
},
{
//Delete.
}
);
}
$("#btnShareMOM").on('click', function () {
//var UserId = new Array();
$.ajax({
url: '#Url.Action("SendMomAll", "PostMeetingDocument", new { area = "Postmeeting" })',
type: "Get",
async: false,
data: { "meetingId": $("#MeetingID").val(), "userId": idsOfSelectedRows.join() },
cache: false,
success: function (data) {
// InvityIds = data;
//console.log(data);
},
error: function () {
//alert('oops something wrong!!');
}
})
});
Controller:
public ActionResult SendMomAll(int meetingId, string userId)
{
var EmailTemplate = db.EmailTempletes.Where(l => l.Name == "FinalMOM").FirstOrDefault();
List<int> userIds = Array.ConvertAll<string, int>(userId.Split(','), new Converter<string, int>(Convert.ToInt32)).ToList();
List<string> UserMailList = (from u in db.VMUsers where userIds.Contains(u.UserID) select u.Email.Trim()).ToList();
string UserMail = string.Join(",", UserMailList.ToArray());
//var Note = db.Notes.OrderByDescending(l => l.NoteId).FirstOrDefault(l => (l.PreviousNoteId == (-1) || l.PreviousNoteId == (-2)) && (l.ParentNoteId == (-1) || l.ParentNoteId == (-2)) && l.MeetingId == meetingId);
//var Note = db.Notes.OrderByDescending(l => l.NoteId).FirstOrDefault(l => l.MeetingId == meetingId);
//var Document = db.Files.OrderByDescending(l => l.FileId).FirstOrDefault(l => l.NoteId == Note.NoteId);
var strMappath = Server.MapPath("~/Repository/Meetings/" + meetingId.ToString() + "/");
//strMappath += Document.FileName;
var dir = new DirectoryInfo(strMappath).GetFiles("*.*").OrderByDescending(l=>l.LastWriteTime).FirstOrDefault();
MailBox mailbox = new MailBox();
mailbox.MailTo = UserMail;
mailbox.Subject = EmailTemplate.Subject;
mailbox.Body = EmailTemplate.TempleteBody;
mailbox.IsAttachment = true;
mailbox.AttachmentsPath = strMappath + dir.Name;
mailbox.Status = false;
db.MailBox.Add(mailbox);
db.SaveChanges();
//return View("Index");
return Json(mailbox,JsonRequestBehavior.AllowGet);
}
Now i want to display list for selected users from this list
I have a pie chart here that I'm working on that has two "rings" in it. The inner ring is just a summation of the outer ring for that given category.
Here is the fiddle: http://jsfiddle.net/jeffvan576/a50859s7/1/
(Apologies for the code - it's a bit of a mess right now)
I've been messing around with the showInLegend functionality but that will (as it's intended) only pull out the given piece of the pie chart. So, for instance, if you click google, it pulls out that piece of the pie chart but leaves the outer ring. To completely eliminate google you need to click "google", "match", "funds added" and "organic" for google.
My question is, is there a way to remove the entire slice (google and all it's children) from the chart at once?
The issue is that in order to get the functionality / layout on the chart that I need, this pie chart is actually built out of two series.
ShowInLegend code:
pie: {
shadow: false,
center: ['50%', '50%'],
showInLegend: true
}
I started building a custom visibility function at the bottom of the fiddle but dialed it back until I understood showInLegend a little better.
Thanks in advance!
you can achieve this by getting name of series on which clicked by using http://api.highcharts.com/highcharts#plotOptions.pie.events.click of plotoptions -> pie.
after that calling visibility function to hide Channel series along with its children to hide/show.
Event:
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%'],
showInLegend: true,
point: {
events: {
}
}
}
}
also static line put into visibility function to hide/show need to remove.
// chart.series[0].data[0].visible = false;
http://jsfiddle.net/a50859s7/27/
Full code:
$(function () {
var dataObject = {
facebook: {
'organic': 10.85,
'match': 7.35,
'fundsadded': 33.06,
'total': 0,
'status': 'disabled'
},
google: {
'organic': 10.85,
'match': 7.35,
'fundsadded': 33.06,
'total': 0,
'status': 'disabled'
},
email: {
'organic': 10.85,
'match': 7.35,
'fundsadded': 33.06,
'total': 0,
'status': 'enabled'
},
colorSelections: {
'facebook': '#3b5998',
'google': '#dd4b39',
'disabled': '#c6c6c6'
}
}
var sumObjects = function () {
for (var channel in dataObject) {
if (channel === 'colorSelections') continue;
var sum = 0;
for (var key in dataObject[channel]) {
if (key === 'status') continue;
sum += dataObject[channel][key];
}
dataObject[channel].total = sum;
}
}
sumObjects();
var colors = Highcharts.getOptions().colors,
categories = ['Facebook', 'Google', 'Email'],
data = [{
y: dataObject.facebook.total + 1,
//color: dataObject.facebook.status === 'disabled' ? dataObject.colorSelections.disabled : dataObject.colorSelections.facebook,
color: 'rgba(59, 89, 152, 0.3)',
drilldown: {
name: 'Facebook',
categories: ['organic', 'match', 'funds added'],
data: [
dataObject.facebook.organic,
dataObject.facebook.match,
dataObject.facebook.fundsadded],
color: 'rgba(59, 89, 152, 0.3)'
},
}, {
y: dataObject.google.total + 1,
color: '#dd4b39',
drilldown: {
name: 'Google',
categories: ['organic', 'match', 'funds added'],
data: [
dataObject.google.organic,
dataObject.google.match,
dataObject.google.fundsadded],
color: '#e46f61'
}
}, {
y: dataObject.email.total + 1,
color: colors[2],
drilldown: {
name: 'Email',
categories: ['organic', 'match', 'funds added'],
data: [
dataObject.email.organic,
dataObject.email.match,
dataObject.email.fundsadded],
color: colors[2]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: ((data[i].drilldown.data[j] / browserData[0].y) * 100),
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%'],
showInLegend: true,
point: {
events: {
click: function (event) {
var seriesIndex;
var secondarySeriesIndex;
if (this.name == 'Facebook') {
seriesIndex = 0;
secondarySeriesIndex = 0;
} else if (this.name == 'Google') {
seriesIndex = 1;
secondarySeriesIndex = 3;
} else if (this.name == 'Email') {
seriesIndex = 2;
secondarySeriesIndex = 6;
}
var chart = $('#container').highcharts();
visibility(chart.series[0].data[seriesIndex]);
visibility(chart.series[1].data[secondarySeriesIndex]);
visibility(chart.series[1].data[secondarySeriesIndex + 1]);
visibility(chart.series[1].data[secondarySeriesIndex + 2]);
}
}
}
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Channel',
type: 'pie',
data: browserData,
size: '120%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Added',
type: 'pie',
data: versionsData,
size: '120%',
innerSize: '80%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
var visibility = function (series) {
series.visible ? series.graphic.hide() : series.graphic.show();
// chart.series[0].data[0].visible = false;
}
var chart = $('#container').highcharts();
$('.update').click(function () {
visibility(chart.series[0].data[0]);
visibility(chart.series[1].data[0]);
visibility(chart.series[1].data[1]);
visibility(chart.series[1].data[2]);
chart.redraw();
});
function synchronizePieSeries(event, slice) {
debugger;
$(chart.series[1].data).each(function (i, e) {
if (slice.name === e.name) {
slice.visible ? e.graphic.hide() : e.graphic.show();
}
});
}
//$('.update').click(function (event) {
// synchronizePieSeries(event, this);
//});
});
I have Created JqGrid for loading some records like below.
<script type="text/javascript">
$(document).ready(function () {
$('#jqgRequests').jqGrid({
defaults: {
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No Request Found",
loadtext: "Loading...",
pgtext: "Page {0} of {1}"
},
//url from wich data should be requested
url: '#Url.Action("LoadRequest")',
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['Is Approved','Requestor', 'Request Type', 'Request Date', 'Approved Date', 'Package','Comments','RequestID', '','',''],
//columns model
colModel: [
{ name: 'IsApproved',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if (status == 1) {
return '<input type="checkbox" name="approval" checked disabled="disabled">';
}
else if(status==2) {
return '<img src="#Url.Content("~/Content/images/reject.jpg")"></img>';
}
else{
return '<input type="checkbox" name="approval" disabled="disabled" >';
}
},sortable:false, align: 'center', width: 80, index: 'subColumn'
},
{ name: 'Requestor', index: 'Requestor', width: 170, align: 'left' },
{ name: 'Request Type', index: 'RequestType', width: 90, align: 'left' },
{ name: 'RequestDate', index: 'RequestDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
{ name: 'ApprovedDate', index: 'ApprovedDate', formatter: 'date', formatoptions: { srcformat: 'FullDateTime', newformat: 'd/m/Y g:i:s A' }, width: 120, align: 'left' },
{ name: 'Package', index: 'Package', width: 150, align: 'left' },
{ name: 'Comments', index: 'Comments', width: 300, align: 'left' },
{ name: 'RequestID', index: 'RequestID', width: 1, align: 'left',hidden:true },
{ name: 'Approve',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if(status==1)
{
return '#Html.ActionLink("Approve", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already approved');", href = "#" })';
}
else{
var x = '#Html.ActionLink("Approve", null, null, new { #style = "color:Blue;font-weight:bold;", onclick = "return ConfirmPopup('myId');", href = "#" })';
// var x = '#Html.ActionLink("Approve", "Approve", "Dashboard", new { requestId = "myId" }, new { #style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to approve this request?');" })';
return x.replace("myId",rowObject[7]);
}
},sortable:false, align: 'left', width: 45
},
{ name: 'Reject',
formatter: function (cellvalue, options, rowObject) {
var status = rowObject[0];
if(status==2)
{
return '#Html.ActionLink("Reject", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return WarningPopup('Already rejected');", href = "#" })';
}
else{
var x = '#Html.ActionLink("Reject", null, null, new { #style = "color:Blue;font-weight:bold;", onclick = "return Rejectpopup('myId');", href = "#" })';
// var x = '#Html.ActionLink("Reject", "Reject", "Dashboard", new { requestId = "myId" }, new { #style = "color:Blue;font-weight:bold;", onclick = "return confirm('Are you sure to reject this request?');" })';
return x.replace("myId",rowObject[7]);
}
},sortable:false, align: 'left', width: 60
},
{ name: 'More',
formatter: function (cellvalue, options, rowObject) {
// var x = "<a class='btnMore' onclick='GetDetail('myId');' style = 'color:blue;font-weight:bold;' href='#'>More Detail</a>"
var x='#Html.ActionLink("Detail", null, null, new { #style = "color:blue;font-weight:bold;", onclick = "return GetDetail('myId');", href = "#" })';
return x.replace("myId",rowObject[7]);
},sortable:false, align: 'left', width: 80
}
],
//pager for grid
pager: $('#jqgpRequests'),
//number of rows per page
rowNum: 25,
//initial sorting column
sortname: 'RequestID',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
});
</script>
Action Result
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request)
{
int totalRecords = _dashboardRepository.RequestCount;
var response = new JqGridResponse()
{
TotalPagesCount = (int)Math.Ceiling((float)totalRecords / (float)request.RecordsCount),
PageIndex = request.PageIndex,
TotalRecordsCount = totalRecords
};
const string subColumn = "";
foreach (var dashboard in _dashboardRepository.LoadAllRequests(request.SortingName, request.SortingOrder.ToString(), request.PageIndex, request.RecordsCount))
{
response.Records.Add(new JqGridRecord(dashboard.RequestID.ToString(), new List<object>()
{
dashboard.IsApproved,
dashboard.Requestor,
dashboard.RequestType,
dashboard.RequestDate,
dashboard.ApprovedDate,
dashboard.Package,
dashboard.Comments,
dashboard.RequestID
}));
}
return new JqGridJsonResult { Data = response };
}
This jqGrid load when the page load. Also i have added a dropdown list for filtering. For this i need to post some parameters for the JqGridRequest class . How can i possible this?
Assuming that your dropdown id is ddlFilter you can write the JavaScript change event handler like this:
$('#ddlFilter').on('change', function(e) {
$('#jqgRequests').setGridParam({ postData: { FilterValue: $(this).val(); } }).trigger('reloadGrid', [{ page: 1 }]);
});
On server side you can create following view model for handling the post data:
public class PostDataViewModel
{
public string FilterValue { get; set; }
}
And add it as one more parameter to your action:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult LoadRequest(JqGridRequest request, PostDataViewModel postData)
{
...
}
Unless there is some specifc requirement or edge case you haven't describe in your question this should do the trick.
If I understand you correct you can follow the suggestion from the old answer.
If you have for example <select id="mySelect">...</select> on the page you can use jqGrid option
postData: {
myFilter: function () {
return $("#mySelect option:selected").val();
}
}
to send the value of the select box together with other standard jqGrid parameters (see JqGridRequest). If you want additionally to reload the grid after every changes of the select you can use .trigger("reloadGrid"). You need just set change and keyup event handler and calls .trigger("reloadGrid") it it require. See the answer for more code example.