grid using ajax calls
4 Replies
Hi There
also below is my full code.
but the screen is funny where my search bar is high up.
my screen:
this is the code .
<html>
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='nofollow' href=/sync/JavaScript/ej2/material.css rel="stylesheet">
<link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
<style>
.e-grid,.e-statustext,.e-mastertext {
font-size: 8px;
padding: 1em;
font-family: Roboto;
opacity: 0.87;
}
</style>
</head>
<body>
<div class="control-section">
<div class="content-wrapper">
<p class="e-mastertext">Master Grid</p>
<div id="MasterGrid">
</div>
<p><div class='e-statustext'> Showing orders of Customer: <b id=key></b></div></p>
<div id="DetailGrid">
</div>
</div>
</div>
<script src=/sync/JavaScript/ej2/dist/ej2.min.js type="text/javascript"></script>
<script>
var ajx_v01 = "ETL";
var ajx_v02 = "A20020";
var ajx_v03 = "";
var ajx_v04 = "ZZZZZZZZZZZZZ";
var ajx_v05 = "400";
// Grid.Inject(Page, Selection, Toolbar, Search , Sort);
ej.grids.Grid.Inject(ej.grids.Page,ej.grids.Selection,ej.grids.Sort,ej.grids.Search,ej.grids.Toolbar);
var grid = new ej.grids.Grid({
allowPaging: true,
allowSorting: true,
toolbar: ['Search'],
selectedRowIndex: 1,
columns: [
{ field: 'itemnumber', headerText: 'ITEM', width: 50},
{ field: 'itemname' , headerText: 'DESCRIPTION', width: 100 },
{ field: 'sohqty' , headerText: 'SOH QTY', width: 50, textAlign: 'Right' },
{ field: 'sohval' , headerText: 'SOH VALUE', width: 50, textAlign: 'Right' , visible: false },
{ field: 'poqty' , headerText: 'PO QTY', width: 50, textAlign: 'Center' },
{ field: 'poval' , headerText: 'PO VALUE', width: 50, textAlign: 'Center', visible: false }
],
rowSelected: rowSelected,
height: 200,
rowHeight: 20,
});
grid.appendTo('#MasterGrid');
loadProducts();
function rowSelected(args) {
var selRecord = args.data;
console.log(args.data.itemnumber);
loadCustomers(args.data.itemnumber);
};
var gridd = new ej.grids.Grid({
allowPaging: true,
allowSorting: true,
toolbar: ['Search'],
selectedRowIndex: 0,
columns: [
{ field: 'itemind' , headerText: 'IND', width: 5 },
{ field: 'custstatus' , headerText: 'STAT', width: 5 },
{ field: 'custnum' , headerText: 'CUST #', width: 50 },
{ field: 'custname' , headerText: 'NAME', width: 100 },
{ field: 'route' , headerText: 'ROUTE', width: 15 },
{ field: 'days' , headerText: 'DAYS', width: 15 }
],
rowSelected: rowSelected,
rowHeight: 20,
});
gridd.appendTo('#DetailGrid');
function loadProducts() {
var myArgs = {"ajx_v01": ajx_v01, "ajx_v02": ajx_v02, "ajx_v03": ajx_v03 , "ajx_v04": ajx_v04};
var myJSON = JSON.stringify(myArgs);
var ajax = new ej.base.Ajax({
url: "http://192.168.206.20/cgi-bin/wspd_cgi.sh/WService=etlin/Trading/crm_stocksoh.html?ajx_v01=" + ajx_v01 + "&ajx_v02=" + ajx_v02 + "&ajx_v03=" + ajx_v03 + "&ajx_v04=" + ajx_v04,
contentType: 'text/xml; charset=utf-8',
data: JSON.stringify(ajx_v01),
type: "POST"
});
ajax.send();
ajax.onSuccess = function (data) {
grid.dataSource = JSON.parse(data);
};
};
function loadCustomers(args) {
var myArgs = {"ajx_v01": ajx_v01, "ajx_v02": ajx_v02, "ajx_v03": ajx_v03 , "ajx_v04": ajx_v04};
var myJSON = JSON.stringify(myArgs);
var ajax = new ej.base.Ajax({
url: "http://192.168.206.20/cgi-bin/wspd_cgi.sh/WService=etlin/Trading/crm_getcust.html?ajx_v01=" + ajx_v01 + "&ajx_v02=" + ajx_v05 + "&ajx_v03=" + ajx_v03 + "&ajx_v04=" + ajx_v04,
contentType: 'text/xml; charset=utf-8',
data: JSON.stringify(ajx_v01),
type: "POST"
});
ajax.send();
ajax.onSuccess = function (data) {
gridd.dataSource = JSON.parse(data);
};
};
</script>
</body>
</html>
Hi Russel,
Thanks for your update.
Query #1: By default particular column freeze on the desktop, but when the mobile view these columns are unfrozen.I want Frozen columns not to freeze on the mobile view.
Based on your query, we suspect that you need to pass the data to your server through the ajax post. If so, you can achieve your requirement by using following code example.
|
[index.cshtml]
function loadCustomers(args) {
var myArgs = { "ajx_v01": ajx_v01, "ajx_v02": ajx_v02, "ajx_v03": ajx_v03, "ajx_v04": ajx_v04 };
var myJSON = JSON.stringify(myArgs);
var Status = "complete"
var Id = args;
var ajax = new ej.base.Ajax({
url: "/Home/DetailData",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ ajx_v01: ajx_v01, Id: Id}), // pass the stringify data with the field name
type: "POST"
});
ajax.send();
ajax.onSuccess = function (data) {
gridd.dataSource = JSON.parse(data);
};
};
|
|
[HomeController.cs]
public ActionResult DetailData(string ajx_v01, int Id) // retrieve the data using its field name
{
var result = OrdersData.GetAllRecords();
var filtered = new List<OrdersData>();
foreach (var word in result)
{
if (word.EmployeeID == Id)
{
filtered.Add(word);
}
}
return Json(filtered);
}
|
Screenshot #1: Request to the server
Screenshot #2: Retrieve the data at server
Passing data to server in ajax post:
Query #2: the screen is funny where my search bar is high up.
By analyzing your screenshot, we suspect that you may using custom CSS in your project. So, please share the CSS files you have used or try to reproduce the reported behavior in the given sample.
Please get back to us if you need further assistance with this.
Regards,
Rajapandiyan S
SIGN IN To post a reply.
