Develop Reference

Unable to apply style to my grid after creating a div using javascript

I am using the following grid. If you click on any of the cell of Link column, a new grid below will be generated.
And whenever I try to add css style using the following line in the code document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px"; below, it keeps on throwing error ("Uncaught TypeError: Cannot read property 'style' of null). However, if you comment it out, it works fine. I am basically trying to add more space between the first grid and the newly created grid which gets created everytime I click on any of the cell value of Link column.
// prepare the data
var url = "https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/feed.xml";
var source =
{
datatype: "xml",
datafields: [
{ name: 'title', type: 'string' },
{ name: 'link', type: 'string' },
{ name: 'pubDate', type: 'date' },
{ name: 'creator', map: 'dc\\:creator', type: 'string' },
],
root: "channel",
record: "item",
url: url
};
var linkrenderer = function (row, column, value) {
if (value.indexOf('#') != -1) {
value = value.substring(0, value.indexOf('#'));
}
var format = { target: '"_blank"' };
var html = $.jqx.dataFormat.formatlink(value, format);
//console.log(html)
return html;
}
var dataAdapter = new $.jqx.dataAdapter(source);
var cellsrenderer = function (row, column, value) {
var currentRowData = $("#jqxgrid").jqxGrid('getrowdata', row);
var rowDataLink = currentRowData["link"];
return "" + value + "";
};
// Create jqxGrid.
$("#jqxgrid").jqxGrid({
width: 850,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
columns: [
{ text: 'Link', datafield: 'link', width: 550},
{ text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
{ text: 'Creator', datafield: 'creator', width: 200 }
]
});
$("#jqxgrid").on("rowselect", function (e) {
let link = $("#jqxgrid").jqxGrid('getcell', e.args.rowindex, 'link');
console.log(link.value);
$('#commonWindow').remove();
var elem = document.createElement('div');
elem.id = 'commonWindow';
document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";
$(elem).jqxGrid({
source: dataAdapter, columns: [
{ text: 'Link', datafield: 'link', width: 550 },
{ text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
{ text: 'Creator', datafield: 'creator', width: 200 }
] });
document.body.appendChild(elem);
});
<div id="jqxgrid">
</div>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

By the time your code hits the following line:
document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";
...you haven't actually appended the element to the DOM yet, therefore the DOM cannot find the element when you ask for it by using document.getElementById.
The place you actually add the element to the DOM comes later:
document.body.appendChild(elem);
Instead, you should reference the element directly using elem, like you do elsewhere in your code, like this:
elem.style.padding = "50px 10px 20px 30px";
However all that said, it might make the most sense of all to just include the padding rule as a static style in your CSS instead of adding it to your JavaScript like this.

You are searching for an element with id commonWindow in document before putting it there. It's not there yet so you are getting null.
Also when you already have reference to the element in the variable elem, you can set style directly to it. You don't need to search document for it.
$("#jqxgrid").on("rowselect", function (e) {
let link = $("#jqxgrid").jqxGrid('getcell', e.args.rowindex, 'link');
console.log(link.value);
$('#commonWindow').remove();
var elem = document.createElement('div');
elem.id = 'commonWindow';
document.body.appendChild(elem);
elem.style.padding = "50px 10px 20px 30px";
$(elem).jqxGrid({
source: dataAdapter,
columns: [
{ text: 'Link', datafield: 'link', width: 550 },
{ text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
{ text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
{ text: 'Creator', datafield: 'creator', width: 200 }
]
});
});

jqxgrid editable properties based on a value on another column

With reference to the code available in given link below
http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
How to set the column property of column quantity and price based on the value of Order Date??
Example:
cellbeginedit: function (row) {
var Orderdate = $("#jqxgrid1").jqxGrid('getcellvalue', row, 'date');
if (Orderdate < '1-June-2018'){
$('#jqxgrid').jqxGrid('setcolumnproperty', 'quantity', 'editable', false);
$('#jqxgrid').jqxGrid('setcolumnproperty', 'price', 'editable', false);
}
}
In this particular case, all columns are by default having editable:true as the default properties. However as you can see in the given example, is it possible for the editable properties of a column to be set up based on the value from another column.

So after several tries, I finally figured out how to do this by utilizing 'cellselect'
$("#jqxgrid").on('cellselect', function (event) {
$('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', true);
$('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable',true);
var datafield = event.args.datafield;
var rowindex = event.args.rowindex;
var date = $("#jqxgrid").jqxGrid('getcellvalue',rowindex,'date');
if (date < '1-June-2018' ){
$('#jqxgrid1').jqxGrid('setcolumnproperty','quantity', 'editable', false);
$('#jqxgrid1').jqxGrid('setcolumnproperty','price', 'editable', false);
}
One interesting observation that I had is that it is important to reset the column property to default for every 'cellselect' event. if there is no reset, the impact of first 'cellselect' event will propagate to subsequent 'cellselect' event hence producing the undesirable result.
By doing this, one can dynamically decide which column can be edited for different row

How to make a cell in a jqxGrid dynamically editable depending on the content of the row

I am trying to make a cell in a jqxGrid editable depending on the value of another column in the row (with the name Editable).
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
editable: function (index, datafield, value, defaultvalue, column, rowdata) {
return rowdata.Editable;
}
},
This does not work. The cell is always editable regardless of the value of rowdata.Editable.
Replacing return rowData.Editable; with return false; does not work either.
I am using jqWidgets 3.9.0 in combination with JQuery 1.7.1.
Can anybody explain why this does not work and how to get it to work?

I got this to work by doing the following:
Replacing the url in the data source with localdata which references a local array called "data".
This array is filled using the original source url.
var data = [{}];
var source =
{
datatype: "json",
datafields: [
{ name: 'Id', type: 'number' },
{ name: 'Name', type: 'string' },
{ name: 'Percentage', type: 'string' },
{ name: 'Editable', type: 'bool' }
],
localdata: data
}
Using the cellbeginedit property instead of the editable property when defining the columns in the jqxGrid:
var dataAdapter = new $.jqx.dataAdapter(source);
$("#myGrid").jqxGrid(
{
width: 800,
source: dataAdapter,
editable: true,
editmode: 'click',
selectionmode: 'singlecell',
columns: [
{ text: "Id", datafield: "Id", columntype: 'textbox', editable: false, hidden: true },
{ text: "Name", datafield: "Name", columntype: 'textbox', width: 400, editable: false },
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
cellbeginedit: function (row) {
return data[row].Editable;
}
},
]
});

I was using the cellclick to do this kind of control.
$("#jqxGrid").on('cellclick', function (event) {
var args = event.args;
var datafield = event.args.datafield;
var rowIndex = args.rowindex;
var data = $('#jqxGrid').jqxGrid('getrowdata', rowIndex);
if(datafield == 'assign'){
if(data.assign){
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', true);
}else{
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', false);
}
}
});

Alert selective datafield in jQWidget Grid on hyperlink click event

I am working on JQWidget grid. In each row I have record ID along with other fields
there is two things I want to do, (I have done first part, code been updated... is anyone know about part 2 of this question????)
1- make name column in row hyperlink
2- when column cell with hyperlink click, script read the ID of record which in my case 'dataField =StudentDBID' and alert these information.
function BindStudentListToGrid(data)
{
var DataSource =
{
datatype: "json",
datafields: [
{ name : 'StudentDBID'},
{ name: 'RelationshipID' },
{ name: 'Studentid' },
{ name: 'Unite_id'},
{ name: 'Date_start' },
{ name: 'Date_end' },
{ name: 'FullName' },
{ name: 'Locality' }
],
id: 'ID',
localdata: data,
async: false,
};
var dataAdapter = new $.jqx.dataAdapter(DataSource);
$("#StudentListInRelationToStaffGrid").jqxGrid(
{
source: dataAdapter,
theme: 'classic',
width: '100%',
sortable: true,
pagesize: 2,
pageable: true,
autoheight: true,
columns: [
{ text: 'StudentDB ID', datafield: 'StudentDBID', hidden: true },
{ text: 'Relationship ID', datafield: 'RelationshipID', hidden: true },
{ text: 'Student ID', datafield: 'Studentid', hidden: true },
{ text: 'Unite ID', datafield: 'Unite_id', hidden: true },
{ text: 'From', datafield: 'Date_start', width: 200 },
{ text: 'To', datafield: 'Date_end', width: 200 },
{ text: 'Name', datafield: 'FullName', cellsrenderer: linkrenderer },
{ text: 'Locality', datafield: 'Locality' }
]
});
}
var linkrenderer = function (row, column, value) {
return "<a href=#>" + value + "</a>";
}
$('#StudentListInRelationToStaffGrid').on('cellclick', function (event) {
if (event.args.datafield == "FullName")
{
alert("A cell has been clicked:" + event.args.rowindex + ":" + event.args.datafield + event.args.value );
}
});
my data is coming in json format
In order word, how can read column field by row index as I can get that using click event???

here is complete answer
$("#StudentListInRelationToStaffGrid").jqxGrid(
{
source: dataAdapter,
theme: 'classic',
width: '100%',
sortable: true,
pagesize: 2,
pageable: true,
autoheight: true,
columns: [
{ text: 'StudentDB ID', datafield: 'StudentDBID', hidden: true },
{ text: 'Relationship ID', datafield: 'RelationshipID', hidden: true },
{ text: 'Student ID', datafield: 'Studentid', hidden: true },
{ text: 'Unite ID', datafield: 'Unite_id', hidden: true },
{ text: 'From', datafield: 'Date_start', width: 200 },
{ text: 'To', datafield: 'Date_end', width: 200 },
{ text: 'Name', datafield: 'FullName', cellsrenderer: linkrenderer },
{ text: 'Locality', datafield: 'Locality' }
]
});
}
var linkrenderer = function (row, column, value) {
return "<a href=#>" + value + "</a>";
}
$('#StudentListInRelationToStaffGrid').on('cellclick', function (event) {
if (event.args.datafield == "FullName")
{
alert("A cell has been clicked:" + event.args.rowindex + ":" + event.args.datafield + event.args.value);
var datarow = $('#StudentListInRelationToStaffGrid').jqxGrid('getrowdata', event.args.rowindex);
alert(datarow.StudentDBID);
}
});

How to send dynamic columns in jquery flexigrid

i am not sure how can i pass dynamic columns along with the default paramters e.g. rp, sortname, sortorder in jquery flexigrid. i have read articles but that only suggest to pass the dynamic column on onSubmit event. i am confused how can i embed this onsubmit event and pass the additional fields to server side. see my page code. i am using asp.net mvc4 so i am using c# controller to handle server side.
$('#CustomerList').flexigrid({
url: '#Url.Action("CustomerList", "Customer")',
dataType: 'json',
colModel: [
{
display: 'Number',
name: 'Id',
width: 40,
sortable: true,
align: 'left'
},
{
display: 'First Name',
name: 'FirstName',
width: 80,
sortable: true,
align: 'left'
},
{
display: 'Last Name',
name: 'LastName',
width: 80,
sortable: true,
align: 'left'
},
],
buttons: [
{
name: 'Edit',
bclass: 'edit',
onpress: test
}, {
name: 'Delete',
bclass: 'delete',
onpress: test
}, {
separator: true
}],
searchitems: [
{
display: 'First Name',
name: 'FirstName'
},
{
display: 'Last Name',
name: 'LastName'
},
{
display: 'Email',
name: 'Email'
},
{
display: 'Age',
name: 'Age'
},
{
display: 'Sex',
name: 'Sex'
},
{
display: 'Membership Type',
name: 'MembershipType'
}
],
sortname: "LastName",
sortorder: "asc",
usepager: true,
title: 'Customer',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 930,
height: 500,
singleSelect: true
});
Following aritcles suggest to create another form and pass the parameters in Onsubmit event. i am stuck how to pass it
<form id="fmFilter">
<select id="cmbfilter">
<option>All</option>
<option>Family</option>
</select>
</form>
<script>
$('#grid01').flexigrid($.extend({}, myFlex, {
onSubmit : function(){
$('#grid01').flexOptions({
params: [{name:'callId', value:'grid01'}].concat($('#fmFilter').serializeArray())
});
return true;
}
})); // ')' was missing
</script>
Controller
public ActionResult CustomerList(int page, int rp, string sortname, string sortorder, string qtype, string query){}
Essence:
how to call the CustomerList controller method on the onchange event of "cmbfilter" and send its value along with default flexigrid default parameters e.g. rp, sortorder, sortname?