Related
Filling the Total Column with the jqxgrid Multiplier.
Hi there;
I want to multiply ItemQty and SinglePrice columns and write to TotalPrice column.
How can I do that.
I tried to use the code in this link but it didn't work.
The other columns show the data in the database.
var initFBListGrid=function(){
source =
{
dataType: 'json',
datafields: [
{ name: 'Id' },
{ name: 'OrderNumber' },
{ name: 'LineNumber' },
{ name: 'ItemNumber' },
{ name: 'ItemDescription' },
{ name: 'ItemQty' },
{ name: 'SinglePrice' },
{ name: 'Ixitem' },
{ name: 'IsUrgentHTML' },
{ name: 'StatusHTML' },
{ name: 'IsApproved' },
{ name: 'IsRejected' },
{ name: 'LatestPurchasePrice' },
{ name: 'PriceLevel' },
{ name: 'DeliveryDate' },
{ name: 'SupplierID' },
{ name: 'SupplierName' },
{ name: 'ProjectNumber' },
{ name: 'ProjectName' },
{ name: 'BuyerName' },
{ name: 'PendingApproverName' },
{ name: 'Company' },
{ name: 'Currency' },
{ name: 'HasAttachmentHTML' },
{ name: 'Glco' },
{ name: 'RequesterName' },
{ name: 'ApproverName' },
{
name: 'TotalPrice',
formatter: function (cellvalue, options, rowObject) {
var ItemQty = parseInt(rowObject.ItemQty, 10),
SinglePrice = parseInt(rowObject.SinglePrice,10);
return $.fmatter.util.NumberFormat(ItemQty * SinglePrice, $.jgrid.formatter.currency);
}
}
],
id: 'Id'
};
I work with jqGrid 4.6.0, ASP.Net MVC5, anything well don. But i have one problem bellow.
When i remove paging from page. I want load all data for jqGrid without paging. But data has just only displayed 20 record in jqGrid page. Although return data from server 36 record.
My JQGrid:
var Pattern_Grid = $("#Pattern_Grid");
Pattern_Grid.jqGrid({
datatype: "json",
height: 250,
shrinkToFit: false,
width: null,
rownumbers: true,
multiselect: true,
pgbuttons: false,
viewrecords: false,
pgtext: "",
pginput: false,
//==========================================
url: "/CusURL/GetBom",
caption: "Patterns Linking",
postData: {
styleCode: styleCode, size: styleSize, serial: styleColorSerial, revNo: revNo
},
//mtype: 'POST',
colModel: [
{
name: "MainItemCode", index: "MainItemCode",
label: arrPatternCollName.MainItemCode,
search: false, sort: false
},
{
name: "ItemCode", index: "ItemCode",
label: arrPatternCollName.ItemCode,
search: false, sort: false
},
{
name: "ItemName", index: "ItemName",
label: arrPatternCollName.ItemName,
search: false, sort: false
},
{
name: "ItemColorWays", index: "ItemColorWays",
label: arrPatternCollName.MainItemColorSerial
},
{ name: "StyleColorSerial", index: "StyleColorSerial", hidden: false },
{ name: "UnitConSumTion", index: "UnitConSumTion", hidden: false },
{ name: "Consumpunit", index: "Consumpunit", hidden: false },
{ name: "Qty", index: "Qty", hidden: false },
{ name: "CurrCode", index: "CurrCode", hidden: false },
{ name: "RegistryDate", index: "RegistryDate", hidden: false },
{ name: "StyleCode", index: "StyleCode", hidden: true },
{ name: "StyleSize", index: "StyleSize", hidden: true },
{ name: "ItemColorSerial", index: "ItemColorSerial", hidden: true },
{ name: "RevNo", index: "RevNo", hidden: true },
{ name: "MainItemColorSerial", index: "MainItemColorSerial", hidden: true },
{ name: "PatternCode", index: "PatternCode", hidden: true }
});
My data return more than 36 record data has just only displays 20 record in jqGrid page:
url: "/CusURL/GetBom",
public JsonResult GetBom(string styleCode, string styleSize, string styleColorSerial, string revNo)
{
try
{
var bom = _bom.GetBom(styleCode, styleSize, styleColorSerial, revNo);
return Json(bom.ToArray(), JsonRequestBehavior.AllowGet);
}
catch
{
return Json(new List<Bomt>().ToArray(), JsonRequestBehavior.AllowGet);
}
}
Is it possible to to display all data in jqGrid without paging?
rowNum default value is set to 20
you can set rowNum = 10000 or use 'jsonp' result for load all of datas with lazy load.
I'm using jsTree plugin in my ASP.NET MVC application and have a strange issue. I've attached contextMenu plugin, but its items have a strange empty space on the left, like in the image below:
My code is followed:
$(function () {
$("#competence-areas-tree").jstree({
core: {
data: {
cache: false,
url: '#Url.Action("GetTreeData", "CompetenceArea")'
},
multiple: false
},
types: {
competenceArea: {
icon: "#Url.Stylesheet("/jstree-3.0.0b/competenceArea.png")"
}
},
contextmenu: {
items: function ($node) {
return {
createItem: {
separator_before: false,
separator_after: false,
label: "Создать",
submenu: {
create: {
separator_before: false,
separator_after: false,
label: "Создать на текущем уровне",
action: function() {
Create($node.parent);
}
},
createChild: {
separator_before: false,
separator_after: false,
label: "Создать потомка",
action: function() {
Create($node.id);
}
}
}
},
editItem: {
separator_before: false,
separator_after: false,
label: "Редактировать",
action: function() {
Edit($node.id);
}
},
deleteItem: {
separator_before: false,
separator_after: false,
label: "Удалить",
action: function() {
Delete($node.id);
}
},
detailGraphItem: {
separator_before: false,
separator_after: false,
label: "Перейти к графу",
action: function() {
DetailGraph($node.id);
}
}
}
}
},
plugins: ["types", "contextmenu", "themes"]
}).on("changed.jstree", function(e, data) {
if (data.action === "select_node") {
OnSelectingNode(data.node.original.id);
}
});
});
Thank you!
Hmm I made a jsfiddle for the context menu you have provided but there isn't anything wrong with it. There is always a default space to the left with the context menu in the jstree but not to the extent that you're having. Here is the jsfiddle to see if that can help:
http://jsfiddle.net/3q9Ma/529/
$(function () {
var data = [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
];
$("#jstree").jstree({
"core" : {
"check_callback" : true,
"data": data
},
"plugins" : [ "contextmenu", "dnd"],
contextmenu: {
items: function ($node) {
return {
createItem: {
separator_before: false,
separator_after: false,
label: "Создать",
submenu: {
create: {
separator_before: false,
separator_after: false,
label: "Создать на текущем уровне",
action: function() {
Create($node.parent);
}
},
createChild: {
separator_before: false,
separator_after: false,
label: "Создать потомка",
action: function() {
Create($node.id);
}
}
}
},
editItem: {
separator_before: false,
separator_after: false,
label: "Редактировать",
action: function() {
Edit($node.id);
}
},
deleteItem: {
separator_before: false,
separator_after: false,
label: "Удалить",
action: function() {
Delete($node.id);
}
},
detailGraphItem: {
separator_before: false,
separator_after: false,
label: "Перейти к графу",
action: function() {
DetailGraph($node.id);
}
}
}
}
}
}).on('create_node.jstree', function(e, data) {
console.log('saved');
});
$("#sam").on("click",function() {
$('#jstree').jstree().create_node('#' , { "id" : "ajson5", "text" : "newly added" }, "last", function(){
alert("done");
});
});
});
I want to set filetype according to click on export menu on the right in the given url. For example if click on pdf then filetype should be set as application/pdf.
var defaultTitle = "Kalar";
var drilldownTitle = "";
var ydrillupTitle = "# of Kalar";
var ydrilldownTitle = "";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'upendra',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.title });
chart.yAxis[0].axisTitle.attr({
text: ydrilldownTitle
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
chart.yAxis[0].axisTitle.attr({
text: ydrillupTitle
});
},
click: function(e) {
chart.exportChart({
filename: chart.options.title.text
});
}
}
},
title: {
text: defaultTitle
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
categories: ['one', 'two']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ydrillupTitle
}
},
plotOptions: {
column: {
stacking: 'normal',
showInLegend: true
}
},
series:[
{
name:'A',
color:'#E9ECEE',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "A",
title: "A by Company",
x:0, y:2
}, {
name: "",
x:1, y:0
}
]
},
{
name:'Arrived',
color:'#B3E5C4',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Bookings (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "Arrived",
title: "Planned Bookings by Goods Type",
x:0, y:10
}, {
name: "",
x:1, y:0
}
]
},
{
name:'Unscheduled',
color:'#A9ABAD',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Unscheduled",
title: "Unscheduled Deliveries by Company",
x:1, y:8
}
]
},
{
name:'Rejected',
color:'#FF838F',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Rejected",
title: "Rejected Deliveries Reasons",
x:1, y:7
}
]
},
{
name:'Complete',
color:'#B3E5C4',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}:<br/><b>{point.y}</b> Deliveries (<b>{point.percentage:, .1f} %</b>)<br/>'
},
data:[
{
name: "",
x:0, y:0
},
{
name: "Complete",
title: "Actual Deliveries by Goods Type",
x:1, y:6
}
]
}
]
});
});
You can edit menuItems in exporting options and then set filename, extracting that information from title.
exporting: {
buttons: {
contextButton: {
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
textKey: 'downloadPNG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/png',
filename: title
});
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/jpeg',
filename: title
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'application/pdf',
filename: title
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
var title = this.title.textStr;
this.exportChart({
type: 'image/svg+xml',
filename: title
});
}
}]
}
}
},
Example: http://jsfiddle.net/bmp6Leh5/4/
I have a kendo grid and I want to add a new line in there. There is a dropdown list in the grid to restrict users not to use anything other than what is in the DB. Whole thing works fine but when I try to add a new row or edit a row and doesn't select value from dropdown, kendo sends a null value.. it only sends value only if I change the dropdown but at least it should send the default value or the current value...
$("#HoleGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "SignOff/GetHoleData",
type: "POST",
datatype: "json",
contentType: "application/json"
},
update: {
url: "SignOff/UpdateHoleData",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
},
create: {
url: "SignOff/CreateHoleData",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json"
},
parameterMap: function (HoleData, operation) {
if (operation != "read") {
return kendo.stringify(HoleData.models);
}
}
},
serverPaging: false,
pageSize: 5,
batch: true,
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false },
Hole: { editable: true, nullable: false },
From: { type: "number", validation: { required: true, min: 0 } },
To: { type: "number", validation: { required: true, min: 0 } },
Total: { editable: false },
Hours: { type: "number", validation: { min: 0, required: true } },
Bit: { defaultValue: { CategoryID: "BQ", CategoryName: "BQ" } },
Size: { editable: true, nullable: true },
TypeOfDrilling: { defaultValue: { CategoryID: "DIA", CategoryName: "DIA" } }
}
},
errors: "Errors"
},
error: function (e) {
alert(e.errors + "HoleGrid");
}
},
editable: "inline",
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create"],
sortable: true,
autoBind: false,
columns:
[
{ field: "Hole", width: 90, title: "Hole" },
{ field: "From", width: 90, title: "From" },
{ field: "To", width: 90 },
{ field: "Total", width: 70, title: "Total" },
{ field: "Hours", width: 90, title: "Hours" },
{ field: "Bit", width: 80, title: "Bit#", values: BitSize },
{ field: "Size", width: 80, title: "Bit Size" },
{ field: "TypeOfDrilling", width: 80, title: "Type", values: Types },
{ width: 175, command: [{ name: "edit", text: { edit: "Edit", update: "Update", cancel: "Cancel" } }], title: "Action" },
]
});
});
var BitSize = [
{ value: 'BQ', text: 'BQ' },
{ value: 'NQ', text: 'NQ' },
{ value: 'HQ', text: 'HQ' },
{ value: 'PQ', text: 'PQ' },
{ value: 'RC', text: 'RC' },
{ value: 'GC', text: 'GC' }
];
var Types = [
{ value: 'DIA', text: 'DIA' },
{ value: 'RC', text: 'RC' },
{ value: 'GC', text: 'GC' }
];
Here is my Html
<div class="box-content">
<p>Holes</p>
<div id="HoleGrid"></div>
<div class="clearfix"></div>
</div>
Here are my demo MVC controller codes
[HttpPost]
public ContentResult UpdateHoleData(List<HoleViewModel> Holes)
{
return null;
}
[HttpPost]
public ContentResult CreateHoleData(List<HoleViewModel> Holes)
{
return null;
}
[HttpPost]
public ContentResult GetHoleData([DataSourceRequest]DataSourceRequest request)
{
string HolesJsonData = "{"ID":"0","Angle":"10","Area":"","Azimuth":"0","Bit":"","Condition":"","From":"0","GPS":"","Hammer":"63412-63412","Hole":"WP10B","HoleCondition":"","Hours":"11","ProgressiveTotal":"0","Purpose":"","RunSheetBitList":"","SiteID":"Geita-NY-CUT 7","Size":"RC","Status":"No","To":"102","Total":"102","TypeOfDrilling":"RC"},{"ID":"1","Angle":"0","Area":"","Azimuth":"0","Bit":"HQ","Condition":"","From":"0","GPS":"","Hammer":"","Hole":"WP12C","HoleCondition":"","Hours":"10","ProgressiveTotal":"0","Purpose":"","RunSheetBitList":"","SiteID":"Geita-NY-CUT 7","Size":"RC","Status":"No","To":"42","Total":"42","TypeOfDrilling":"RC"}";
return new ContentResult { Content = "[" + HolesJsonData + "]", ContentType = "application/json", ContentEncoding = Encoding.UTF8 };
}
And lastly
public class HoleViewModel
{
public string ID { get; set; }
public string Angle { get; set; }
public string Area { get; set; }
public string Azimuth { get; set; }
public string Bit { get; set; }
public string Condition { get; set; }
public string From { get; set; }
public string GPS { get; set; }
public string Hammer { get; set; }
public string Hole { get; set; }
public string HoleCondition { get; set; }
public string Hours { get; set; }
public string ProgressiveTotal { get; set; }
public string Purpose { get; set; }
public string RunSheetBitList { get; set; }
public int SiteID { get; set; }
public string Size { get; set; }
public string Status { get; set; }
public string To { get; set; }
public string Total { get; set; }
public string TypeOfDrilling { get; set; }
}
Where am I doing wrong?? Please help.
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false },
Hole: { editable: true, nullable: false },
From: { type: "number", validation: { required: true, min: 0 } },
To: { type: "number", validation: { required: true, min: 0 } },
Total: { editable: false },
Hours: { type: "number", validation: { min: 0, required: true } },
Bit: { },
Size: { editable: true, nullable: true },
TypeOfDrilling: { } }
}
},
remove the default value of the dropdowns
I couldn't find any solution for that. So what I did, I check if it is null in the code behind and just put the default value in there manually..
public ContentResult UpdateHoleData(List<HoleViewModel> Holes)
{
if (Holes != null && Holes.Count > 0)
{
if (Holes[0].Size == null)
{
Holes[0].Size = "RC";
}
if (Holes[0].TypeOfDrilling == null)
{
Holes[0].TypeOfDrilling = "DIA";
}
}
return null;
}