1
Help for ParamQuery Grid (free version) / Re: How can I display an error message when JSON call fails?
« on: February 09, 2016, 07:35:04 pm »
Thanks for the help
ParamQuery Grid
Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
Pages: [1]
2
Help for ParamQuery Grid (free version) / Re: How can I display an error message when JSON call fails?
« on: February 09, 2016, 02:12:22 am »
But that would do a pop-up error correct? I don't want a popup for an error displayed like the "no rows" message.
3
Help for ParamQuery Grid (free version) / How can I display an error message when JSON call fails?
« on: February 06, 2016, 03:11:59 am »
I am able to successfully display data in my grid when I don't run into any problems getting the data but now I want to display an error message to the user if I run into any problems getting the data. I found http://paramquery.com/api#option-dataModel-error but am not sure how to combine it with a successful call. Also, my understanding of the 3 parameters in that function are that they will only return the core Error data and not a custom message that I return. I can display the Error status code if I have to but it would be nice to display a more user friendly message if possible. Thank you
Code: [Select]
var dataModel =
{
location: "remote",
dataType: "json",
method: "POST",
contentType: "application/json; charset=UTF-8",
url: '@Url.RouteUrl("GetChangeOrders")',
getData: function (dataJson)
{
return { data: dataJson };
}
};
var obj =
{
collapsible: false,
colModel: colModel,
dataModel: dataModel,
editable: false,
filterModel: { on: true, mode: "AND", header: true },
flexHeight: true,
numberCell: { show: false },
roundCorners: true,
scrollModel: [lastColumn = "None"],
sortDir: ["up"],
sortIndx: ["ID"],
sorting: "local",
stripeRows: true,
title: "IT Change Orders",
width: $(window).width() - 10,
wrap: false
};
4
Help for ParamQuery Grid (free version) / First value in Select List for filter not selected by defailt
« on: January 29, 2016, 11:36:51 pm »
I am using a select list in my header filter but after filling the data when the page is loaded the select list is blank by default. If I click on the list I see all the values. How can I have the first value show in the dropdown when the page is load? (Note: ChangeTypes is a JS array filled earlier in the code)
Code: [Select]
var ChangeTypes = [],
Priorities = [],
ImpactTypes = [],
Users = [];
@foreach (var Type in Model.ChangeTypes)
{
@:ChangeTypes.push("@Type");
}
@foreach (var Type in Model.ImpactTypes)
{
@:ImpactTypes.push("@Type");
}
@foreach (var Priority in Model.Priorities)
{
@:Priorities.push("@Priority");
}
@foreach (var User in Model.Users)
{
@:Users.push("@User");
}
var colModel = [
{ title: "Project ID", dataType: "integer", dataIndx: "ID", hidden: true },
{ title: "Project Name", dataType: "string", dataIndx: "Name", resizable: true, width: 250, halign: "center", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title: "Notes", dataType: "string", resizable: false, width: 75, halign: "center" },
{ title: "Change Type", dataType: "string", dataIndx: "Type", resizable: true, width: 169, halign: "center", filter: { type: 'select', options: [ChangeTypes], condition: 'equal', value: 'IN', prepend: { '': '--Select Type--' }, listeners: ['change']}},
{ title: "Priority", dataType: "string", dataIndx: "Priority", resizable: true, width: 55, halign: "center" },
{ title: "Impact", dataType: "string", dataIndx: "Impact", resizable: true, width: 55, halign: "center" },
{ title: "Assigned To", dataType: "string", dataIndx: "AssignedTo", resizable: true, width: 150, halign: "center" },
{ title: "Estimated Start Date", dataType: "date", dataIndx: "EstimatedStartDate", resizable: true, width: 145, halign: "center" },
{ title: "Estimated Completion Date", dataType: "date", dataIndx: "EstimatedEndDate", resizable: true, width: 165, halign: "center" },
{ title: "Date Actually Started", dateType: "date", dataIndx: "DateStarted", resizable: true, width: 145, halign: "center" },
{ title: "Date Actually Compleated", dataType: "date", dataIndx: "DateCompleated", resizable: true, width: 165, halign: "center" },
{ title: "Reason For Change", dataType: "string", dataIndx: "Reason", resizable: true, halign: "center", width: 283, filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title: "Approval Status", dataType: "string", dataIndx: "ApprovalStatus", resizable: true, width: 105, halign: "center" },
{ title: "Approved By", dataType: "string", dataIndx: "ApprovedBy", resizable: true, width: 135, halign: "center" }
];
5
Help for ParamQuery Grid (free version) / Re: Stop last column from auto expanding to fit table?
« on: January 29, 2016, 09:13:52 pm »
Trying to do this based off of http://paramquery.com/api#option-column-width I came up with this code but it does not resize the column but the grid does get resized correctly
Code: [Select]
$(window).resize(function (evt)
{
var GridWidth = $Grid(window).width() - 10;
var ColumnModel = $Grid.pqGrid("option", "colModel");
//colModel[11].Width = GridWidth - 1459;
colModel[11].Width = 200;
$Grid.pqGrid("option", { width: GridWidth });
$Grid.pqGrid("option", "colModel", ColumnModel);
});
6
Help for ParamQuery Grid (free version) / Re: Stop last column from auto expanding to fit table?
« on: January 29, 2016, 08:41:33 pm »
Is there anyway of dynamically sizing the rows at all or does everything have to be a fixed width?
7
Help for ParamQuery Grid (free version) / Stop last column from auto expanding to fit table?
« on: January 29, 2016, 07:55:12 pm »
I have a specified width set for all my columns but one. The hope was that the one column with no set width would auto expand/shrink depending on the size of the table, unfortunately it is not. No matter what I seem to do the final column, which has a set width, will always expand/shrink to fill the table instead of column 10 (the column with no set width). How do I make it so column 10 expands/shrinks and not the last column?
Code: [Select]
var colModel = [
{ title: "Project ID", dataType: "integer", dataIndx: "ID", hidden: true },
{ title: "Project Name", dataType: "string", dataIndx: "Name", resizable: true, width: 200, halign: "center" },
{ title: "Notes", dataType: "string", resizable: false, width: 75, halign: "center" },
{ title: "Change Type", dataType: "string", dataIndx: "Type", resizable: true, width: 169, halign: "center" },
{ title: "Priority", dataType: "string", dataIndx: "Priority", resizable: true, width: 55, halign: "center" },
{ title: "Impact", dataType: "string", dataIndx: "Impact", resizable: true, width: 55, halign: "center" },
{ title: "Assigned To", dataType: "string", dataIndx: "AssignedTo", resizable: true, width: 150, halign: "center" },
{ title: "Estimated Start Date", dataType: "date", dataIndx: "EstimatedStartDate", resizable: true, width: 150, halign: "center" },
{ title: "Estimated Completion Date", dataType: "date", dataIndx: "EstimatedEndDate", resizable: true, width: 175, halign: "center" },
{ title: "Date Actually Started", dateType: "date", dataIndx: "DateStarted", resizable: true, width: 150, halign: "center" },
{ title: "Date Actually Compleated", dataType: "date", dataIndx: "DateCompleated", resizable: true, width: 175, halign: "center" },
{ title: "Reason For Change", dataType: "string", dataIndx: "Reason", resizable: true, halign: "center" },
{ title: "Approval Status", dataType: "string", dataIndx: "ApprovalStatus", resizable: true, width: 105, halign: "center" },
{ title: "Approved By", dataType: "string", dataIndx: "ApprovedBy", resizable: true, width: 150, halign: "center" }
];
8
Help for ParamQuery Grid (free version) / Re: Formating date inside grid to Jan. 01, 2016 11:32 AM format?
« on: January 26, 2016, 07:42:57 pm »
Is formatting the time just not possible?
9
Help for ParamQuery Grid (free version) / Re: Formating date inside grid to Jan. 01, 2016 11:32 AM format?
« on: January 25, 2016, 08:17:07 pm »
Hi, I do need to format the data but no examples from the linked site seem to work as they all work on an input box and I am not sure how to pass in the cell data for formatting. I have tried a few things but all of them break the grid. I can get the date format to work fine off the datepicker format example you gave just not the datetimepicker you linked.
Code: [Select]
obj.colModel[9].render = function (ui)
{
var cellData = new Date(ui.cellData);
return $.datetimepicker({ dateFormat: "yy-mm-dd", timeFormat: "hh:mm:ss" }, cellData);
}
10
Help for ParamQuery Grid (free version) / Getting data from another column?
« on: January 23, 2016, 01:45:29 am »
Working off this demo http://paramquery.com/pro/demos/render_cells I am trying to get the value inside a hidden column to append it to a string but I am only getting "undefined". What is the appropriate way to read another column's value?
Code: [Select]
<script>
$(function ()
{
var colModel = [
{ title: "Project ID", dataType: "integer", dataIndx: "ID", hidden: true },
{ title: "Project Name", dataType: "string", dataIndx: "Name", resizable: true, width: 200 },
{ title: "Notes", dataType: "string", resizable: false, width: 75 },
{ title: "Change Type", dataType: "string", dataIndx: "Type", resizable: true, width: 175 },
{ title: "Priority", dataType: "string", dataIndx: "Priority", resizable: true, width: 75 },
{ title: "Impact", dataType: "string", dataIndx: "Impact", resizable: true, width: 75 },
{ title: "Assigned To", dataType: "string", dataIndx: "Impact", resizable: true, width: 100 },
{ title: "Approval Status", dataType: "string", dataIndx: "ApprovalStatus", resizable: true, width: 100 },
{ title: "Approved By", dataType: "string", dataIndx: "ApprovedBy", resizable: true, width: 150 },
{ title: "Estimated Start Date", dataType: "date", dataIndx: "EstimatedStartDate", resizable: true, width: 150 },
{ title: "Estimated Completion Date", dataType: "date", dataIndx: "EstimatedEndDate", resizable: true, width: 150 },
{ title: "Date Actually Started", dateType: "date", dataIndx: "DateStarted", resizable: true, width: 150 },
{ title: "Date Actually Compleated", dataType: "date", dataIndx: "DateCompleated", resizable: true, width: 150 },
{ title: "Reason For Change", dataType: "string", dataIndx: "Reason", resizable: true }
];
var dataModel =
{
location: "remote",
dataType: "json",
method: "POST",
contentType: "application/json; charset=UTF-8",
url: '@Url.RouteUrl("GetChangeOrders")',
getData: function (dataJson)
{
return { data: dataJson };
}
};
var obj =
{
collapsible: false,
colModel: colModel,
dataModel: dataModel,
editable: false,
flexHeight: true,
numberCell: { show: false },
roundCorners: true,
sortDir: ["up"],
sortIndx: ["ID"],
sorting: "local",
stripeRows: true,
title: "IT Change Orders",
width: $(window).width() - 10,
wrap: false
};
obj.colModel[2].render = function (ui)
{
var rowData = ui.rowData,
dataIndx = ui.dataIndx;
return '<a href="' + '@Url.RouteUrl("ChangeOrderNotes", new { ChangeOrderID = -1 })'.replace("-1", rowData[0]) + '"> Test</a>';
};
var $Grid = $("#Grid").pqGrid(obj);
$(window).resize(function (evt)
{
$Grid.pqGrid("option", { width: $(window).width() - 10 });
});
});
</script>
11
Help for ParamQuery Grid (free version) / Re: Formating date inside grid to Jan. 01, 2016 11:32 AM format?
« on: January 22, 2016, 09:46:03 pm »
How would I apply that to the column?
12
Help for ParamQuery Grid (free version) / Formating date inside grid to Jan. 01, 2016 11:32 AM format?
« on: January 22, 2016, 08:57:13 pm »
I have a few dates to display in the grid that are coming from some JSON passed to the grid by my MVC6 backend. When the grid displays the date it is displayed in "2016-01-01T00:00:00". I would like to display it in for format of Jan. 01, 2016 00:00 A.M. Is this possible to do?
13
Help for ParamQuery Grid (free version) / Re: Unable to load data into Grid from MVC JsonResult
« on: January 22, 2016, 07:02:40 pm »
Thank you very much, that worked.
14
Help for ParamQuery Grid (free version) / Unable to load data into Grid from MVC JsonResult
« on: January 22, 2016, 01:16:45 am »
After digging around on the board I was able to modify a demo to call into an MVC 6 JsonResult Action but I can not get the data to load into the grid. I can enter debug mode in Visual Studio and do see the AJAX call into the Action and that the action is returning a result containing 1 record (which is the right amount of records). The grid then load into the web page but no data inside is displayed just the words "No rows to Display." What am I doing wrong?
JavaScript Code:
c# Code:
JavaScript Code:
Code: [Select]
<script>
$(function ()
{
var colModel = [
{ title: "ID", width: 100, dataType: "integer", dataIndx: "ID" },
{ title: "Name", width: 500, dataType: "string", dataIndx: "Name" }
];
var dataModel =
{
location: "remote",
dataType: "json",
method: "POST",
contentType: "application/json; charset=UTF-8",
url: '@Url.RouteUrl("GetChangeOrders")',
getData: function (dataJson)
{
var data = dataJson.data;
return { data: data };
}
};
var obj =
{
title: "Test",
dataModel: dataModel,
colModel: colModel,
};
$("#Grid").pqGrid(obj);
});
</script>c# Code:
Code: [Select]
[Route("GetChangeOrders", Name = "GetChangeOrders")]
public JsonResult ChangeOrders()
{
var ChangeOrdersList = _DbContext.ChangeOrders.Select(co => new { ID = co.ID, Name = co.Name }).ToList();
return Json(ChangeOrdersList);
}
15
Help for ParamQuery Grid (free version) / Baisc demo for use with ASP.Net MVC?
« on: January 22, 2016, 12:32:04 am »
I am trying to evaluate/use PQGrid for a company project before we purchase but I am unable to get the simple demo working using ASP.Net MVC. I took the code from http://paramquery.com/tutorial#topic-start and that displays fine but since you have no examples of a basic table pulling remote data I am completely lost on where to start. I went though your other tutorials but the ones that do provide any MVC code are too complex on the JavaScript side for me to figure out. I am not a JavaScript developer so it would be really nice if I could just get a basic grid tutorial to start with and go messing around from there.
Pages: [1]