jQWidgets Forums

Tagged: checkbox, filtering, grid, jqxgrid, row, select, selection, selectionmode

This topic contains 11 replies, has 2 voices, and was last updated by Dimitar 11 years, 6 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Problem with selection mode 'chekbox' Posts
October 1, 2013 at 7:06 pm Problem with selection mode 'chekbox' #29999

watchman
Member

Hello! I have a jqxGrid with filter row in my MVC 4 application. I use selection mode ‘checkbox’. Filtering execute on server side and return data to view. Problem – i try to select row, but row not displaying as selected. Please help me.

October 2, 2013 at 7:39 am Problem with selection mode 'chekbox' #30025

Dimitar
Participant

Hello watchman,

Please provide us with your grid JavaScript code, which would help us determine the source of the issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 2, 2013 at 10:45 am Problem with selection mode 'chekbox' #30041

watchman
Member

Oh! Yes of course!
This is my js file:
var source =
{
datatype: “json”,
datafields: [
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘MiddleName’, type: ‘string’ },
{ name: ‘SurName’, type: ‘string’ },
{ name: ‘TabNomer’, type: ‘string’ },
{name:’Podrazdelenie’, type: ‘string’}
],
url: ‘OnePhoto/GetEmployees’,
filter: function () {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxdropdownbutton”).jqxDropDownButton({ width: 400, height: 25});
$(“#jqxgrid”).jqxGrid(
{
width: 768,
theme:’arctic’,
selectionmode: ‘checkbox’,
showfilterrow: true,
filterable: true,
source: dataAdapter,
columns: [
{ text: ‘Фамилия’, datafield: ‘SurName’, width: 200 },
{ text: ‘Имя’, datafield: ‘FirstName’, filterable : false, width: 100 },
{ text: ‘Отчество’, datafield: ‘MiddleName’, filterable: false, width: 180 },
{ text: ‘Таб.номер’, datafield: ‘TabNomer’, filterable: false, width: 75, cellsalign: ‘right’ },
{ text: ‘Подразделение’, datafield: ‘Podrazdelenie’, filterable: false, width: 150 }
]
});

Server side code:
[Authorize]
public JsonResult GetEmployees()
{
var query = Request.QueryString;
var SurNameFilter = String.Empty;
if (filtersCount > 0)
{
var filterKey = query.GetKey(0);
if (filterKey == “SurNameoperator”)
{
SurNameFilter = query.GetValues(1)[i];
SurNameFilter = SurNameFilter.ToUpper();
var rezreq = model.tblEmployees.Where(w =>w.colSurname.StartsWith(SurNameFilter)).Select(s => new { FirstName = s.colName, MiddleName = s.colMiddlename, SurName = s.colSurname, TabNomer = s.colTabNumber, Podrazdelenie = s.tblEnterpriseTree.colName }).ToList();
return Json(rezreq, JsonRequestBehavior.AllowGet);
}
}
return Json(null, JsonRequestBehavior.AllowGet);
}

And I can show screen with my problem.

October 2, 2013 at 10:50 am Problem with selection mode 'chekbox' #30043

watchman
Member

I can selected custom rows, but this not displaing as selected.

October 3, 2013 at 5:28 am Problem with selection mode 'chekbox' #30106

Dimitar
Participant

Hi watchman,

Please make sure you are using the latest version of jQWidgets (3.0.3) in your solution.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 3, 2013 at 8:08 am Problem with selection mode 'chekbox' #30115

watchman
Member

I am sure that i use the latest version of widjets. This is link http://www.jqwidgets.com/download/ for download. I choose the type of download as “personal, for non-comercial use”.

October 10, 2013 at 6:51 am Problem with selection mode 'chekbox' #30526

watchman
Member

Guys! What about my problem?

October 10, 2013 at 9:40 am Problem with selection mode 'chekbox' #30536

Dimitar
Participant

Hi watchman,

We were not able to determine the source of the issue from the code snippet you provided. Please post a image that shows the issue and also the code with the CSS and JavaScript references in your page.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 14, 2013 at 7:44 am Problem with selection mode 'chekbox' #30676

watchman
Member

when i load data into jqxGrid without filters values selection work fine. When i apply one of the filters and loading new data, checkboxes are displaing. Now i try to select row, i do mouse click in checkbox, but row not displaying as selected. Jqxgrid are understand what this row are selected, but not displaying as selected((

October 15, 2013 at 7:06 am Problem with selection mode 'chekbox' #30723
Dimitar
Participant
Hi watchman,

We were not able to reproduce the issue you are experiencing with version 3.0.3 of jQWidgets and the following example:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var source =
                {
                    localdata: generatedata(500),
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    datatype: "array"
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ];
            // create data grid.
            $("#grid").jqxGrid(
            {
                width: 670,
                height: 300,
                source: dataAdapter,
                selectionmode: "checkbox",
                filterable: true,
                theme: theme,
                columns: columns
            });
            // init buttons.
            $("#refresh").jqxButton({ theme: theme });
            $("#clear").jqxButton({ theme: theme });
            $("#refresh").click(function () {
                source.localdata = generatedata(500);
                // passing "cells" to the 'updatebounddata' method will refresh only the cells values when the new rows count is equal to the previous rows count.
                $("#grid").jqxGrid('updatebounddata', 'cells');
            });
            $("#clear").click(function () {
                $("#grid").jqxGrid('clear');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
        <div style="margin-top: 10px;">
            <input id="refresh" type="button" value="Refresh Data" />
            <input id="clear" type="button" value="Clear" />
        </div>
    </div>
</body>
</html>
```
Does the erroneous behaviour occur at your side in this example?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
October 16, 2013 at 4:23 am Problem with selection mode 'chekbox' #30790

watchman
Member

This is solution is worked but i use in my project layout view (MVC 4 C#) and jqxgrid location in partial view. Maybe problem is here? Can you show for me how i can use jqxwidgets with layout view and bundle config?

October 16, 2013 at 7:53 am Problem with selection mode 'chekbox' #30806

Dimitar
Participant

Hi watchman,

Please check the file references in your partial view.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.