I'm noob with Jquery DataTables.
I have a very basic question on how to use the sorting plugins:
Have googled a lot on this, but I fail to get proper answers, on how to incorporate them in my code, do we have to just add the script to a ".js" file and add it? or Do we also have to call the function of the plugins?
Can someone point me to a working example with sorting of numeric columns formatted with commas/percentage signs.
The columns with signs or commas are sorted as string. I have seen a lot of references which say to use plugins and then specify sType or sSortableDataType but that doesn't work.
Here's my code: (Please correct me where I'm wrong)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="scorecard_dynamic.aspx.cs" Inherits="Dashboard_scorecard_dynamic" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>new score card</title>
<%--<script src="../js/jquery-1.10.2.min.js"></script>--%>
<style type="text/css" title="currentStyle">
#import "../js/datatable/css/demo_page.css";
#import "../js/datatable/css/demo_table.css";
</style>
<script type="text/javascript" src="../js/datatable/js/jquery.js"></script>
<script type="text/javascript" src="../js/datatable/js/jquery.dataTables.js"></script>
<script src="../js/datatable/Plugins-master/sorting/custom-data-source/percent.js"></script>
<link href="../StyleSheet/LoadingPanel.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
gettopchannelsplot();
//transpose();
var otable = $('#example').dataTable({
"iDisplayLength": 5,
"aLengthMenu": [[1, 2, 3, 4, 5], [1, 2, 3, 4, "All"]],
"oLanguage": {
"oPaginate": {
"sPrevious": "Previous", //can change text for pagination
"sNext": "Next"
},
//"fnDrawCallback": function (oSettings) {
// alert('DataTables has redrawn the table');
//},
"aoColumns": [
null,
{ "sType": "pct" },
null,
null,
null,
null,
null,
null
],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0,5,6,7 ] }
]
}
//"sPaginationType": "full_numbers"
});
oTable.fnSort([[3, 'asc']]);
});
var StartDate = '16-oct-2013';
var EndDate = '22-oct-2013';
function transpose() {
var t = $('#example tbody').eq(0);
var r = t.find('tr');
var cols = r.length;
var rows = r.eq(0).find('td').length;
var cell, next, tem, i = 0;
var tb = $('<tbody></tbody>');
while (i < rows) {
cell = 0;
tem = $('<tr></tr>');
while (cell < cols) {
next = r.eq(cell++).find('td').eq(0);
tem.append(next);
}
tb.append(tem);
++i;
}
$('#example').append(tb);
$('#example').show();
}
function gettopchannelsplot() {
//$("#bubbling").show();
//alert('gettopchannelsplot');
var arrListMain = new Array();
var arrList = new Array();
var linkName = 'View Chatter';
var result = ExecuteSynchronously('../SocialMedia.asmx', 'GetTopchannels', { startDate: StartDate, endDate: EndDate });
//tbl_example.empty();
$('#example thead').append("<tr>"
+"<td class='normalBold' align='left'>info</td>"
+ "<td class='normalBold' align='left'>share of voice</td>"
+ "<td class='normalBold' align='left'>total chatter</td>"
+ "<td class='normalBold' align='left'>sentiments</td>"
+ "<td class='normalBold' align='left'>exposure</td>"
+ "<td class='normalBold' align='left'>most popular with</td>"
+ "<td class='normalBold' align='left'>most popular on</td>"
+ "<td class='normalBold' align='left'>link</td>"
+ "</tr>");
var value = new Array();
if (result.d != "" && result.d != null) {
arrListMain = result.d.split('#');
for (var i = 0; i < arrListMain.length; i++) {
var tmp = "<tr>"
+ "<td class='border' width='12%'><a href='../Scorecard.aspx?1'><image src='" + "../" + arrListMain[i].split('^')[7] + "'/></a></td>"
+ " <td class='border' width='12%' align='center'>" + arrListMain[i].split('^')[2] + "%</td>"
+ " <td class='border' width='12%' align='center'> " + arrListMain[i].split('^')[3] + "</td>"
//// + " <td class='border' width='12%' align='center'><label id=label" + i + " >" + Number(arrListMain[i].split('^')[3]).toLocaleString() + "</label></td>"
+ " <td class='border' width='12%' align='center'><image src='" + "../" + arrListMain[i].split('^')[10] + "'/></td>"
+ " <td class='border' width='13%' align='center'>" + arrListMain[i].split('^')[5] + "</td>"
+ " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[8] + "'/></td>"
+ " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[9] + "'/></td>"
+ " <td class='border' width='13%' align='center'><a href='../ChatterAdvanced2.aspx?filter=channel&value=" + arrListMain[i].split('^')[0] + "'>chatter</a></td>"
+ "</tr>";
//alert(tmp);
$('#example tbody').append(tmp);
}
}
$("#bubbling").hide();
}
</script>
<script type="text/javascript">
function ExecuteSynchronously(url, method, args) {
var executor = new Sys.Net.XMLHttpSyncExecutor(); // Instantiate a WebRequest.
var request = new Sys.Net.WebRequest(); // Set the request URL.
request.set_url(url + '/' + method); // Set the request verb.
request.set_httpVerb('POST'); // Set request header.
request.get_headers()['Content-Type'] = 'application/json; charset=utf-8'; // Set the executor.
request.set_executor(executor); // Serialize argumente into a JSON string.
request.set_body(Sys.Serialization.JavaScriptSerializer.serialize(args)); // Execute the request.
request.invoke();
if (executor.get_responseAvailable()) {
return (executor.get_object());
}
return (false);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<AjaxToolkit:ToolkitScriptManager runat="server" ID="ASD">
<Scripts>
<asp:ScriptReference Path="~/js/XMLHttpSyncExecutor.js" ScriptMode="Release" />
<asp:ScriptReference Path="~/App_Code/SocialMedia.cs" />
</Scripts>
</AjaxToolkit:ToolkitScriptManager>
<div>
<div class="bubblingG" id="bubbling">
<span id="bubblingG_1"></span>
<span id="bubblingG_2"></span>
<span id="bubblingG_3"></span>
</div>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
Please excuse my HTML markup formatting.
You need both the "plugin" and set the proper sType according to that plugin. The plugins are really just some very simple functions, that you easily can produce yourself for your own needs and place into your code. Consider this "plugin" that sort percents with commas :
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"normalize": function(n) {
return parseFloat(n.toString().replace(',','.'));
},
"percent-asc": function(a, b) {
a=this.normalize(a);
b=this.normalize(b);
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"percent-desc": function(a, b) {
a=this.normalize(a);
b=this.normalize(b);
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
The above is pretty failsafe. To initialize :
var dataTable = $('#example').dataTable({
aoColumns: [
null,
null,
null,
{ sType: "percent" },
null
],
//...
});
see this working fiddle demonstrating the code above -> http://jsfiddle.net/xK7Ud/
Related
This is my first time to make a GIS app with CodeIgniter, Leaflet, and Ajax. I want to show a polygon above my map with geojson file that I've made using geojson.io but the polygon doesn't show. When I inspect the page in my browser it shows an error message like
Failed to load modules/jenis_hutan/...geojson/map.geojson:1
resource: the server responded with a status of 404()
Here is my js code to show the geojson file.
let tnSelect = $("#tn-select");
let gisCard = $("#gis-card");
let divModal = $(".div-modal");
tnSelect.change(function () {
let $val = $(this).val();
loadPage();
setCookie("tn_value", $val, 0.0833333);
window.location.reload(true);
});
$(window).on("load", function () {
let $tn_val = getCookie("tn_value");
let gisMap;
$.ajax({
method: "GET",
url: base_url + "ajax/tn_data",
dataType: "JSON",
data: {},
success: (res) => {
console.log(res);
if ($tn_val !== null) {
for (let i = 0; i < res.length; i++) {
let data = res[i];
let name = data.tn_name;
name = name.replace(
/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g,
function (letter) {
return letter.toUpperCase();
}
);
if (data.tn_id == $tn_val) {
tnSelect.append(
'<option selected id="tn_name" value="' +
data.tn_id +
'">' +
name +
"</option>"
);
gisCard.html(
'<div class="card mb-4 gis-card">' +
'<div class="card-header py-3 text-center">' +
'<h6 class="m-0 font-weight-bold text-center">' +
name +
"</h6>" +
"</div>" +
'<div class="card-body" id="gis-map"></div>' +
"</div>"
);
gisMap = L.map("gis-map").setView([data.tn_lat, data.tn_long], 12);
mapAPI.addTo(gisMap);
} else {
tnSelect.append(
'<option value="' + data.tn_id + '">' + name + "</option>"
);
}
}
} else {
for (let i = 0; i < res.length; i++) {
let data = res[i];
let name = data.tn_name;
name = name.replace(
/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g,
function (letter) {
return letter.toUpperCase();
}
);
if (i < 1) {
tnSelect.append(
'<option selected id="tn_name" value="' +
data.tn_id +
'">' +
name +
"</option>"
);
gisCard.html(
'<div class="card mb-4 gis-card">' +
'<div class="card-header py-3 text-center">' +
'<h6 class="m-0 font-weight-bold text-center">' +
name +
"</h6>" +
"</div>" +
'<div class="card-body" id="gis-map"></div>' +
"</div>"
);
gisMap = L.map("gis-map").setView([data.tn_lat, data.tn_long], 12);
mapAPI.addTo(gisMap);
} else {
tnSelect.append(
'<option value="' + data.tn_id + '">' + name + "</option>"
);
}
}
}
//**//
$.getJSON(base_url + "modules/jenis_hutan/geojson/map.geojson", function (
data
) {
geoLayer = L.geoJson(data, {
style: function (feature) {
return {
fillOpacity: 0.5,
weight: 1,
opacity: 1,
color: "#fa7268",
};
},
onEachFeature: function (feature, layer) {
var kode = feature.properties.kode;
var info_zona = "<h5 style='text-align:left'>ZONA INTI</h5>";
info_zona += "<hr>";
info_zona +=
"<div style='width:100%;text-align:left;margin-top:10px;'><h6>Luas area: 10.475 ha</h6><br><h6>Fungsi zona: Jalur pendakian</h6></div>";
layer.bindPopup(info_zona, {
maxWidth: 260,
closeButton: true,
offset: L.point(0, -20),
});
layer.on("click", function () {
layer.openPopup();
});
},
}).addTo(map);
});
},
});
});
Is there something wrong with my code? This is my college task and the deadline is this Friday so please anyone enlight me:( or at least give me link to some tutorial related to this thing:( Thank you everyone.
I want to ask how is it possible to fire a click event from a div element containing into an Easy-ui datagrid?.
I have this jsp file:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Page</title>
<link rel="stylesheet" type="text/css" href="resources/css/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/css/maintheme.css">
<link rel="stylesheet" type="text/css" href="resources/css/userPage.css">
<script src="resources/javascript/jquery/jquery-1.11.1.min.js"></script>
<script src="resources/javascript/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="datagridLayer">
<table id="usersDataGrid" class="easyui-datagrid" style="display:none;">
<thead>
<tr>
<th data-options="field:'userName', width:80, sortable:true">User</th>
<th data-options="field:'enabled', width:100, sortable:true, formatter:enabledLink">Status</th>
<th data-options="field:'role', width:100, sortable:true">Role</th>
<th data-options="field:'deleteUser', width:80, align:'center', formatter:deleteUserFormatter">Delete user</th>
</tr>
</thead>
</table>
</div>
<script src="resources/javascript/adminPageUsersCtrl.js"></script>
Datagrids configuration is being in adminPageUsersCtrl.js :
dataGrid.datagrid({
url:url,
scrollbarSize:0,
width:"100%",
fitColumns : true,
singleSelect : true,
striped:true,
pagination : true,
total: 2000,
pageSize: 10,
loadFilter: function(data) {
var i = 0;
for (i = 0; i < data.rows.length; i++) {
if (data.rows[i].role === "ROLE_ADMIN") {
data.rows[i].role = "Administrator";
} else {
data.rows[i].role = "User";
}
if (data.rows[i].enabled === "true") {
data.rows[i].enabled = "Enabled";
} else {
data.rows[i].enabled = "Disabled";
}
}
return data;
},
onBeforeLoad : function(data){
},
onLoadSuccess : function(data) {
dataGrid.show();
},
onLoadError : function(result) {
// empty grid
dataGrid.datagrid("loadData", {
patents: {totalElements : 0, content : []}
});
//Remove Refresh button from datagrid pagination
$(".pagination-load").closest("td").remove();
},
// highlight previously selected row
rowStyler : function(rowIndex, row) {
// do stuff here
},
onSelectPage: function(pageNumber, pageSize){
dataGrid.panel("refresh", url + "page="+pageNumber+pageSize);
}
});
//this create the link elements under Status datagrid's column
function enabledLink(value,row, index) {
return "<div class='userStatus' id='userStatusField' name='"+ row.userName + "' onClick>" + value + "</div>";
};
//this display the delete icon under delete user column
function deleteUserFormatter(value,row, index) {
return "<img src='resources/img/delete_user.png' id='deleteUser' />";
};
And I would like to fire an event with the traditional jquery way. When a user clicks on an element under Status column, to get the event like this: $("#userStatusField").click(function() { ...
But it is not possible, what's wrong?
There is an issue with in your formatter function:
function enabledLink(value,row, index) {
return "<div class='userStatus' id='userStatusField' name='"+ row.userName + "'>" + value + "</div>";
};
The thing here is that there is a div created for every row with the same id. This is against the html rules for id uniqueness. You can use instead the class attribute
So my suggestion is that you create like this:
function enabledLink(value,row, index) {
return "<div class='userStatus' dataLinkIndex='" + index + "' class='userStatusField' name='"+ row.userName + "'>" + value + "</div>";
};
The dataLinkIndex attribute is a custom attribute that we can later use to retrieve the clicked row.
Then add a jquery event in this way because the row elements are added dynamically to dom:
$(document).on( 'click', '.userStatusField', function(){
//bellow are some tips for manipulating the clicked row
var dataIndex = $(this).attr('dataLinkIndex');
var rows = $('#usersDataGrid').datagrid('getRows');
var rowClicked = rows[dataIndex];
});
With jQuery delivered by Google CDN and DataTables delivered by Microsoft CDN I have the following page, where 3 checkboxes allow toggling good, bad, neutral comments about some user (here fullscreen):
My problem is:
With DataTables 1.9.2 this works well: here jsFiddle
With DataTables 1.9.4 this does not work: here jsFiddle and a copy of my simple test case is at the bottom of this question.
The problematic code is probably here:
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if ('comments_table' == oSettings.nTable.id) {
//console.dir(oSettings);
console.dir(aData);
var nice = aData[3];
if (nice == true)
return $('#good_box').is(':checked');
if (nice == false)
return $('#bad_box').is(':checked');
return $('#neutral_box').is(':checked');
}
return true;
}
);
The console.dir(aData); prints for dataTables 1.9.2 a 4-elements array and I can grab its last element (shown by the red arrow in the above screenshot).
But for DataTables 1.9.4 it only prints a 1-element array for some reason. Why?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<style type="text/css">
a img.good {
border: 3px solid #009900;
}
a img.bad {
border: 3px solid #FF3333;
}
a img.neutral {
border: 3px solid #9999FF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var ME = "http://gravatar.com/avatar/55b3816622d935e50098bb44c17663bc.png";
$(function() {
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if ('comments_table' == oSettings.nTable.id) {
//console.dir(oSettings);
console.dir(aData);
var nice = aData[3];
if (nice == true)
return $('#good_box').is(':checked');
if (nice == false)
return $('#bad_box').is(':checked');
return $('#neutral_box').is(':checked');
}
return true;
}
);
$('#good_box,#bad_box,#neutral_box').click(function() {
commentsTable.fnDraw();
});
var commentsTable = $('#comments_table').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
bProcessing: true,
bDeferRender: true,
aaData: [
{"day":"17.02.2014","about":"A neutral comment about this user","nice":null,"female":false,"author":"OK250354887500","rep_id":960962,"avatar":ME},{"day":"30.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE10859","avatar":ME},{"day":"23.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"OK100836631753","avatar":ME},{"day":"01.04.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE8547","avatar":ME},{"day":"29.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"OK462728443459","rep_id":734122,"avatar":ME},{"day":"26.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE10472","avatar":ME},{"day":"24.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE9454","avatar":ME},{"day":"22.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"DE6294","rep_id":727815,"avatar":ME},{"day":"04.02.2013","about":"A neutral comment about this user","nice":null,"female":false,"author":"VK119456690","rep_id":683816,"avatar":ME}
],
fnInitComplete: function () { this.fnAdjustColumnSizing(); },
aaSorting: [[0, 'desc']],
aoColumns: [
/* 0: day */ { mDataProp: 'day', bSearchable: false, bSortable: true, bVisible: true },
/* 1: about */ { mDataProp: 'about', bSearchable: true, bSortable: false, fnRender: renderAbout },
/* 2: avatar */ { mDataProp: 'avatar', bSearchable: false, bSortable: false, fnRender: renderAvatar },
/* 4: nice */ { mDataProp: 'nice', bSearchable: false, bSortable: false, bVisible: false }
]
});
});
function renderAbout(obj) {
var about = obj.aData['about'];
var rep_id = obj.aData['rep_id'];
if (rep_id) {
return '<i>«' + about + '»</i> delete';
}
return '<i>«' + about + '»</i>';
}
function renderAvatar(obj) {
var avatar = obj.aData['avatar'];
var author = obj.aData['author'];
var nice = obj.aData['nice'];
if (author) {
var cls = 'neutral';
if (nice == true)
cls = 'good';
else if (nice == false)
cls = 'bad';
return '<img class="' + cls + '" height="45" src="' + avatar + '">';
}
return '<img height="45" src="' + avatar + '">';
}
</script>
</head>
<body>
<p>Show:
<label><input type="checkbox" id="good_box" checked>good</label>
<label><input type="checkbox" id="bad_box" checked>bad</label>
<label><input type="checkbox" id="neutral_box" checked>neutral</label>
comments:</p>
<table id="comments_table">
<thead>
<tr>
<th>Date</th>
<th>Comment</th>
<th>Author</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have posted this question at the DataTables forum as well.
The workaround for now is to make the 4th (nice) column searchable too and use the code
var nice = aData[1];
Here is the jsFiddle, which works with 1.9.4
I have a partial view.in this partial view,i have a webgrid.I want to bind gridview from the session value.My code is
#{
var properties = typeof(SLCCentral.Portal.Models.Entities.ApplicationModule).GetProperties();
var webGridColumns = properties.Select(prop => new WebGridColumn()
{
ColumnName = prop.Name,
Header = prop.Name
}).ToList();
var grid = new WebGrid(source: Model, canSort: false, canPage: true, rowsPerPage: 10);
var pager = grid.Pager();
var index = grid.PageIndex;
index = index + 1;
var cnt = grid.PageCount;
//var selectedIndex = "<span class=" + "webgrid-footer-selected" + ">" + index.ToString() + "</span>";
var pgarrow = "class=" + "webgrid-footer-arrow" + "><img";
var tblcss = "<table width=" + "100%" + " cellspacing=" + "0" + " cellpadding=" + "0" + " border=" + "0" + ">";
var adthcss = "class=" + "HD-td-width-col_AppAddModule" + "> </th>";
var epthcss = "class=" + "HD-td-width-col_AppEdit" + "> </th>";
var dthcss = "class" + "HD-td-width-col_AppDelete" + "> </th>";
// var pager = grid.Pager().ToString();
if (index == 2)
{
}
var tblHTML = grid.Table().ToHtmlString();
//var Pager = System.Text.RegularExpressions.Regex.Replace(grid.Pager().ToString(), index.ToString(), selectedIndex);
//var newPager = System.Text.RegularExpressions.Regex.Replace(pager, "(( \\d)|(\\d )|(<a([^a]*|a[^>])*a>))", "<span>$1</span>");
var gridHtml = grid.GetHtml(footerStyle: "webgrid-footer-Group",
mode: WebGridPagerModes.All, nextText: "Active-NXT", previousText: "Active-PRV", numericLinksCount: 5,
columns: grid.Columns(
grid.Column(columnName: "moduleName", header: "Modules Name", style: "HD-td-width-col_ModuleName", format: #<text><span class=" moduleName">#item.moduleName</span></text>),
grid.Column(columnName: "moduleShortCode", header: "ModuleShortCode", style: "HD-td-width-col_ModuleName", format: #<text><span class=" moduleName">#item.moduleShortCode</span></text>),
grid.Column(header: "Edit", style: "HD-td-width-col_AppEdit", format: #<text><span id="edit" style="cursor:pointer;text-decoration:underline;" onclick='doEdit("")'><img src="../../Images/edit-icon.png" alt="" width="18" height="19" title="Edit" /></span></text>),
grid.Column(header: "Delete", style: "HD-td-width-col_AppDelete", format: #<text><span id="delete" style="cursor:pointer;text-decoration:underline;" onclick='PerformDelete("")'><img src="../../Images/delete-icon.png" alt="" width="16" height="21" title="Delete" /></span></text>))).ToString();
//gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, index.ToString(), selectedIndex);
gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, "<table>", tblcss);
gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, ">AddModules</th>", adthcss);
gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, ">Edit</th>", epthcss);
gridHtml = System.Text.RegularExpressions.Regex.Replace(gridHtml, ">Delete</th>", dthcss);
}#(new HtmlString(gridHtml))
public void AddModule(string ModuleName, string ModuleShortcode)
{
try
{
if (!string.IsNullOrEmpty(ModuleName))
{
_objIApplicationManagerBAL.SetModuleCol(ModuleName, ModuleShortcode);
_objIApplicationModuleCol = _objISessionContext.IModuleContextCol;
}
}
catch (Exception ex)
{
}
finally
{
}
}
You can bind value in grid by using call script and by Partialview
Script
<script type="text/javascript">
$(document).ready(function () {
firstDDLValue = "Your Session Value"
$.get('#Url.Action("YourMethod")', { secondValue: firstDDLValue }, function (result) {
$('#div-grid-id').html(result);
});
});
</script>
Control:
public ActionResult YourMethod(Viewname model, string secondValue)
{
if (secondValue != "")
ObservableCollection<Yourviewnam> Yourviewnam= new ObservableCollection<Yourviewnam>();
Yourviewnam Yourviewnam= new Models.Yourviewnam();
result= Receipt.GetReceiptListByCustID(secondValue);
return PartialView("PratialViewname", result);
}
Create an PartialView cshtml and write the code for gridview as like in your main view..I feel it will works fine.
Here is my totally code:-
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var xml;
$.get(
"xml_converted.xml",
null,
function (data) {
xml = data;
},
"xml"
);
function get_node(ls)
{
var elName = $('#select').val();
var value = $('#value').val();
var xPath = '//*[translate(translate(translate("' + elName + '","-","")," ",""),":","") '+ ls +' translate(translate(translate(#value,"-","")," ",""),":","")]/../../#value';
var iterator = xml.evaluate(xPath, xml.documentElement, null,
XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);
var thisNode = iterator.iterateNext();
var str = '';
while (thisNode) {
if (str) {
str += ', ';
}
str += thisNode.textContent;
thisNode = iterator.iterateNext();
}
$("#result").text(str);
if (str == null || str == "")
return false;
else
return true;
}
</script>
</head>
<body>
<input type="text" id="select">
<input type="text" id="value">
<input type="button" value="Less than" onclick="get_node('>')">
<input type="button" value="Grater than" onclick="get_node('<')">
<input type="button" value="Equal" onclick="get_node('=')">
<div id="result">
</div>
</body>
</html>
This is my xml fiel sample :-
<products>
<product_id value="1">
<tab_id value="351">
<tab_name value="test1"/>
<dist_region value="5,5068,5069"/>
<reg_str_dt value="2013-01-14 20:35:00"/>
<individual_strdt value="2013-01-14 20:35:00"/>
</tab_id>
</product_id>
<product_id value="2">
<tab_id value="352">
<tab_name value="test2"/>
<dist_region value="5,5069,5070"/>
<reg_str_dt value="2013-01-14 20:35:00"/>
<individual_strdt value="2013-01-14 20:35:00"/>
</tab_id>
</product_id>
</productS>
In my xml file I have one tab dist_region_value="5,5069,5070" this type of value for check this I have one xpath:-
var xPath = '//*[contains(concat(#value, ","),"' + elName+ ',")]/../../#value';
and another xpath query is :-
var xPath = '//*[translate(translate(translate("' + elName + '","-","")," ",""),":","") '+ ls +' translate(translate(translate(#value,"-","")," ",""),":","")]/../../#value';
How to set both in one query?
thanks...
How about this:
var xPath = '//*[contains(concat(#value, ","), "' + elNname+ ',") and ' +
' translate("' + elName + '"," -:","") '+ ls +
' translate(#value," -:","")]/../../#value';
as shown here, you don't need to nest multiple translates together, either.