How to add checkbox column to jqxgrid

[harshParticipant]

Hi,

I am trying to add checkbox column to the grid as follows. But the values are not showing up and the column is not editable ie i cannnot check or uncheck the checkboxes.can you please help me with the issue

$(document).ready(function () {
var source1 =
{
datatype: “json”,
datafields: [

{ name: ‘Description’, type: ‘string’ },

{ name: ‘ProductLineTypeID’, type: ‘string’ },
{ name: ‘SelectProductLine’, type: ‘boolean’ }
],
url: “@Url.Action(“ProductList”, “ProductTypeAssignment”, new { OfficeID = Request.QueryString[“OfficeID”] })”
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
// initialize jqxGrid
$(“#grid”).jqxGrid(
{
width: 600,
source: dataAdapter1,
columns: [
{ text: “Description”, datafield: “Description” },

{ text: “ProductLineTypeID”, datafield: “ProductLineTypeID” },
{ text: ‘Alloted’, dataField: ‘SelectProductLine’, columntype: ‘checkbox’, width: 100, editable: true, resizable: false },
]
});

[VladimirParticipant]

Hello harsh,

Please make sure you have included the jqwidgets/jqxgrid.edit.js script and that you are using the latest version of jQWidgets (3.8.2).
If this still doesn’t work can you please create a jsfiddle with the problem so we can investigate it.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[harshParticipant]

I have included the following files

<script type=”text/javascript” src=”http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqx-all.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqxcore.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqxmenu.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqxgrid.edit.js”></script>

the checkbox is disabled and i dont see any values in the checkbox

[VladimirParticipant]

Hello harsh,

Please provide a jsfiddle recreating the issue.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[harshParticipant]

Hi,

Here is my code

var source1 =
{
datatype: “json”,
datafields: [

{ name: ‘Description’, type: ‘string’ },

{ name: ‘ProductLineTypeID’, type: ‘string’ },
{ name: ‘SelectProductLine’, type: ‘bool’ }
],
url: “@Url.Action(“ProductList”, “ProductTypeAssignment”, new { OfficeID = Request.QueryString[“OfficeID”] })”
};
var dataAdapter1 = new $.jqx.dataAdapter(source1);
// initialize jqxGrid
$(“#grid”).jqxGrid(
{
width: 600,
editable: true,
source: dataAdapter1,
selectionmode: ‘singlecell’,

editmode: ‘click’,
columns: [
{ text: ‘SelectProductLine’, datafield: ‘SelectProductLine’, columntype: ‘checkbox’, width: 67 },

{ text: “Description”, datafield: “Description” },
{ text: “ProductLineTypeID”, datafield: “ProductLineTypeID” }

]
});

public class ProductTypeAssignmentController : Controller
{
// GET: ProductTypeAssignment
public ActionResult Index()
{

ProductTypeAssign pta = new ProductTypeAssign();
List<ProductTypeAssign> list = pta.GetProductLinesSpecial(Request.QueryString[“OfficeID”]);
return View(list);
}

public JsonResult ProductList()
{
ProductTypeAssign pta = new ProductTypeAssign();
List<ProductTypeAssign> list = pta.GetProductLinesSpecial(Request.QueryString[“OfficeID”]);
return Json(list, JsonRequestBehavior.AllowGet);
}
}

[VladimirParticipant]

Hello harsh,

Here is an example using your code.
As you can see I can click the checkboxes, so either you have some problem with the included files (try using jqx-all.js), or you have a problem with your data format.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[harshParticipant]

Hi ,

The example you posted does not have any check-boxes.It has an alert box and no code.
Can you please re-post the example so that i can refer.

Thanks,
Harshini

[VladimirParticipant]

Hello harsh,

I may have not shared it correctly the first time.
Can you please check it now.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[harshParticipant]

Hi,

I resolved my problem.

check_black.png image was missing when i added it problem got fixed.

Thanks you for the help.

[Author]

Posts