I need an help to align this table. I don't know work with design. How I can align and adapt size to each column, and the table in full size in my window?
I want all auto align. Width and Height (Full size).
My code:
$(document).ready(function () {
source =
{
datatype: "xml",
datafields: [
{ name: 'User', type: 'string' },
{ name: 'AccessGroup', type: 'string' },
{ name: 'FolderAccess', type: 'string' },
{ name: 'RequestDate', type: 'Date' },
{ name: 'SituationDesc', type: 'string' },
{ name: 'Approver', type: 'string' },
{ name: 'ApprovalDate', type: 'Date' },
{ name: 'BusinessJustification', type: 'string' },
{ name: 'AllBusinessJustification', type: 'string' },
{ name: 'UserRequestor', type: 'string' }
],
async: false,
record: 'Table',
url: 'Tickets.aspx/GetTickets',
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8'}
);
$("#jqxgrid").jqxGrid(
{
width: 3000,
source: dataAdapter,
theme: 'classic',
autoheight: true,
columns: [
{ text: 'User', datafield: 'User', widht: 'auto' },
{ text: 'Access Group', datafield: 'AccessGroup', widht: 'auto' },
{ text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto' },
{ text: 'Request Date', datafield: 'RequestDate', widht: 'auto' },
{ text: 'Situation', datafield: 'SituationDesc', widht: 'auto' },
{ text: 'Approver', datafield: 'Approver', widht: 'auto' },
{ text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto' },
{ text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto' },
{ text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto' },
{ text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' },
]
});
});
<body>
<form id="form1" runat="server">
<div>
<div align="center" style="width: 100%; height: 100%;">
<img src="image/NdriveBanner.png" align="center" />
</div>
<br />
<br />
<div id="jqxgrid">
</div>
<br />
<br />
<div align="center" style="width: 100%; height: 100%;">
<asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/image/home_back_48.png"
NavigateUrl="~/home.aspx">homepage</asp:HyperLink>
</div>
</div>
</form>
Here's a sample code which shows how to set the Grid's size in percentages so it will be auto-resized.
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this sample, the Grid's size is set in percentages. When you resize the browser's window, the Grid's Width and Height will be automatically adjusted. The "width" and "height" properties of jqxGrid in this sample are set to "50%"</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var theme = getDemoTheme();
var data = generatedata(500);
var source =
{
localdata: data,
datafields:
[
{ name: 'name', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'date', type: 'date'},
{ name: 'quantity', type: 'number' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: '50%',
height: '50%',
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' },
{
text: 'Product', datafield: 'productname', width: '35%'
},
{ text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
{ text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid">
</div>
</body>
</html>
jqgrid is providing the align property to each columns, to align header you need to change in the jqgrid css to the respective call for the headers.
for the align in columns you can add like this
$("#jqxgrid").jqxGrid(
{
width: 3000,
source: dataAdapter,
theme: 'classic',
autoheight: true,
columns: [
{ text: 'User', datafield: 'User', widht: 'auto',align="center" },
{ text: 'Access Group', datafield: 'AccessGroup', widht: 'auto',align="center" },
{ text: 'Folder Access', datafield: 'FolderAccess', widht: 'auto',align="center" },
{ text: 'Request Date', datafield: 'RequestDate', widht: 'auto',align="center" },
{ text: 'Situation', datafield: 'SituationDesc', widht: 'auto',align="center" },
{ text: 'Approver', datafield: 'Approver', widht: 'auto' ,align="center"},
{ text: 'Approval Date', datafield: 'ApprovalDate', widht: 'auto',align="center" },
{ text: 'Business Justification', datafield: 'BusinessJustification', widht: 'auto',align="center" },
{ text: 'All Business Justifications', datafield: 'AllBusinessJustification', widht: 'auto',align="center" },
{ text: 'User Requestor', datafield: 'UserRequestor', widht: 'auto' ,align="center"},
]
});
Related
I'm trying to make a kendo grid column template like this, based on condition show text input and other way round
wrote the following code for this
columns.Bound(p => p.MyColumn).Template(#<text></text>).ClientTemplate(
"# if (myFirstCondion == true) { #" +
"<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
"# } else { #" +
"<input type='hidden'></input>" +
"# } #"
);
but the problem is when I click hidden column, its become input text field,
how to make this non editable once click hidden field
You could use the column.Editable handler.
e.g.
columns.Bound(p => p.MyColumn).Editable("conditionalEditable").Template(#<text></text>).ClientTemplate(
"# if (myFirstCondion == true) { #" +
"<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
"# } else { #" +
"<input type='hidden'></input>" +
"# } #"
);
...
<script>
function conditionalEditable(dataItem){
return dataItem.myFirstCondion; // add the same per item condition as in the client template
}
</script>
Let me guess: Your grid is editable right? If so, your grid will take control over the cell's content when editing. You need to customize it, like the example below:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
Test: { type: "string" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
editable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" },
{ field: "Test", editor: ($td, data) => {
if (data.model.Discontinued) {
let myColumn = 1;
$td.append(`<input type='text' style='width:100%' class='k-textbox' value='${myColumn}'></input>`);
} else {
$td.append("<input type='hidden'></input>");
}
}
}
]
});
});
</script>
</div>
</body>
</html>
Dojo
So inside the editor callback, you can create(or not) your own input depending on any condition you need. You also have the model.
I keep getting the following error: "Invalid JSON primitive: Date". I am not sure how to correct as I have changes to the front/back-end of the project. Everything seems to be working other than when I de-bug the JavaScript. My front-end code is as follows (I only included some HTML, where a date is used):
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent"
runat="server">
<script>
$("#Grid").kendoGrid({
"dataSource": {
"transport": {
"read": {
"url": "CreateReq.aspx/PopulateMessages",//page then function
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "json",
"data": {
requestID: document.getElementById("lblRequestID").textContent
}
},
create: {
url: "CreateReq.aspx/CreateMessage",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
"data": {
}
},
"prefix": ""
},
"schema": {
data: function (response) {
return response.d;
},
model: {
fields: {
Date: { type: "date",editable: false, format: "{0: MM/dd/yyyy}", encoded: true, /*defaultValue: Date.now*/ },
Author: { type: "string", editable: true},
Message: { type: "string" },
}
}
},
},
//pageable: true,
height: 225,
toolbar: ["create"],
columns: [
{ field: "Date", title: "Date", width: "75px", /*template: '#= kendo.toString((Date), "MM/dd/yyyy")#'*/ format: "{0: MM/dd/yyyy}", encoded: true},
{ field: "Author", title: "Author", width: "75px" },
{ field: "Message", title: "Message", width: "300px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
</script>
<h1 style="text-align: center">Academic Code Request</h1>
<div class="TopPageButtons" style="text-align: center">
<br />
</div>
<div class="TrackingBox">
<div class="TrBoxContent">
<div>
<label><b>ID</b></label><br />
<asp:Label ID="lblRequestID" Text="" runat="server" ClientIDMode="Static"/>
</div>
<div>
<label><b>Form View Date</b></label><br />
<asp:TextBox ID="RequestDate" runat="server" ClientIDMode="Static" style="text-align:center"/>
<script>
document.getElementById("RequestDate").value = new Date().toString();
</script>
</div>
I am Using jqgrid in mvc 4. I want to show grid data only those data which match with OrderNo. Grid is showing but data is not showing. Here is Controller where i am writing my sql search method for filtering data. please suggest me the better way to search data in grid view?
public ActionResult getItemsByOrder(string OrdNo)
{
try
{
List<OrderDtl> itm = db.Fetch<OrderDtl>("select * from OrderDtls where OrderNo=" + OrdNo).ToList();
return Json(itm, JsonRequestBehavior.AllowGet);
}
catch
{
return Json(null, JsonRequestBehavior.AllowGet);
}
}
Here is my script. I think my problem is in url: line or in controller. Please Help me to solve my solution.
</script>
<link rel="stylesheet" type="text/css" href="/scripts/css/ui.jqgrid.css" title="coffee" media="screen" />
<script src="~/Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="~/Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="~/Scripts/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
var ord = $('#OrderNo').val();
jQuery("#list").jqGrid({
url: '/NewOrder/getItemsByOrder/' + ord,
datatype: 'json',
mtype: 'GET',
colNames: ['ItemId', 'ItemName', 'Quantity', 'Rate', 'Amount', 'Action'],
colModel: [
{ name: 'ItemId', index: 'Id', width: 100, align: 'left' },
{ name: 'ItemName', index: 'ItemName', width: 100, align: 'left' },
{ name: 'Quantity', index: 'Quantity', width: 200, align: 'left' },
{ name: 'Rate', index: 'Rate', width: 200, align: 'left' },
{ name: 'Amount', index: 'Amount', width: 200, align: 'left' },
{ name: 'Action', index: 'Action', width: 100, align: 'left' }
],
cellEdit: true,
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'ItemId',
sortorder: "desc",
viewrecords: true,
width: 950,
imgpath: '/scripts/themes/coffee/images',
caption: 'Order Details Grid'
});
});
</script>
When I type the URL http ://localhost/login/login.aspx into my browser, I see my response is {success: true}. When I run my load my html page, I can see from Fiddler and the debugger that the aspx page is called; however, nothing is being returned to my javascript and it go to FAILURE instead of SUCCESS.
I have used this url in other programming projects, but this is my first time using it with Ext JS. I have seen various examples online and none seem to fix my issue. Below is my javascript file and any help would be appreciated in getting a successful return on my button click.
So, it is not entering my C# code from the javascript call even thought fiddler shows the call is being made to http ://localhost/login/login.aspx.
Any help would be greatly appreciated.
Ext.require([
'Ext.form.*',
'Ext.window.Window'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
var field = new Ext.form.field.Text({
renderTo: document.body
}),
fieldHeight = field.getHeight(),
padding = 5,
remainingHeight;
field.destroy();
remainingHeight = padding + fieldHeight * 2;
var login = new Ext.form.Panel({
border: false,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 100
},
defaultType: 'textfield',
bodyPadding: padding,
items: [{
xtype: 'box',
region: 'west',
width: 128,
height: 46,
autoEl: { tag: 'img', src: 'images/logo.png' },
style: 'margin: 10px 0px 15px 15px'
}, {
allowBlank: false,
fieldLabel: 'Company Name',
name: 'company',
emptyText: 'Company ID',
style: 'margin: 10px 0px 10px 30px'
}, {
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'User Name',
style: 'margin: 10px 0px 10px 30px'
}, {
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'Password',
inputType: 'password',
style: 'margin: 10px 0px 10px 30px'
}]
});
new Ext.window.Window({
autoShow: true,
title: 'Support Tools Login',
resizable: false,
closable: false,
width: 350,
height: 250,
layout: 'fit',
plain: true,
items: login,
constrain: true,
draggable: false,
buttons: [{
text: 'Login',
formBind: true,
handler: function () {
login.getForm().submit({
method: 'POST',
url: 'http://localhost/login/login.aspx',
waitTitle: 'Connectiong',
waitMsg: 'Sending data...',
success: function (login, action) {
Ext.Msg.alert('Success');
},
failure: function (login, action) {
Ext.Msg.alert('Failure')
}
});
}
}]
});
});
Aspx file:
using System;
using System.Diagnostics;
using System.Web;
using SupportToolsCommon;
namespace App.login
{
public partial class login : System.Web.UI.Page
{
private static Database db;
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.Write("{success: true}");
Response.End();
}
}
}
default.html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login Page</title>
<!-- ExtJS -->
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/support-tools.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/login.js"></script>
</head>
<body id="login-page"></body>
</html
Try replacing this line:
Response.Write("{success: true}");
with well formed JSON (property names must all be enclosed in quotes in JSON, as opposed to javascript):
Response.Write("{\"success\": true}");
I have a jqGrid on which clicking of a row should render a partial view below the jqGrid, but it doesn't happen. I am doing something as shown below:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/json2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/CookieManagement.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jQGridState.js")"></script>
<link href="#Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#Listing').jqGrid({
url: '#Url.Action("Grid", "Name")',
datatype: "json",
edit: false,
add: false,
del: false,
height: 330,
mtype: 'GET',
colNames: ['ID','Name'],
jsonReader: {
root: "Clients",
page: "CurrentPage",
total: "TotalPages",
records: "TotalRecords",
repeatitems: false,
cell: "",
id: "0"
},
colModel: [
{ name: 'Id', index: 'Id', width: 65, align: 'center', sorttype: "int" },
{ name: '#NameMap.STATUS_COLUMN', index: '#NameMap.STATUS_COLUMN', width: 140, align: 'left', sortable: true }],
pager: '#pager',
rowNum: 10,
rowList: [10, 15, 20],
sortname: 'Id',
sortorder: 'asc',
viewrecords: true,
gridview: true,
onSelectRow: function (id) {
$.ajax({
url: '#Url.Action("Details","Name")',
data: { 'Id': id },
success: function (detailsHtml) {
$('#NameDetails').html(detailsHtml);
},
dataType: 'html'
});
},
loadComplete: function () {
$('#NameDetails').html("");
}
});
});
});
</script>
Here Details and Grid are the controller action in the Name Controller. Details which is hooked up to onSelectRow returns a View and $('#NameDetails') is the id of the last div in this page.
My problem is that I am not able to see the details view appearing even though the values inside it are properly getting populated, is there something wrong in my OnSelectRow or do i need to include any other javascript file??
Well that was foolish, but actually I did a spelling mistake in an id called "NameDetails" as "NameDetalis" and that was the reason that my view was not getting rendered.