Grid with a checkbox selecton and more.

[ray]

 Just Compare with This control,There is no chechboxcolumn?When i select a row ,the checkbox checked.Can i set the page size in the grid? 

[Gowthami V]

Hi Ray,

Thanks for using Syncfusion products.

Query 1: Just Compare with This control,There is no chechboxcolumn?

Based on your requirement we have created a sample and the same can be downloaded from the following link.

Sample Link: Sample

In the above sample, we have created a column “checked” with value “false” by default. Based on the checkbox selection, the corresponding record’s checked value is assigned true.

In actionComplete and actionBegin events of the grid, the records with “checked” value “true” are retrieved and thus the selection made is persisted while navigating to other pages.

<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True"

       AllowSelection="true" Selectiontype="Multiple">

<ClientSideEvents ActionBegin="begin" ActionComplete="complete"RowSelecting="rowSelect"/>

. . . .

</ej:Grid>

<script type="text/javascript">

var gridObj; 

function complete(args) {

$("#<%= Grid.ClientID %> .rowCheckbox").on("change", checkChange);

gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");

 if (args.requestType == "paging") {

 . . . .

gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);

}

 else {

 var idx = 0;

 for (i = args.startIndex; i < args.endIndex; i++) {

 if (gridObj.model.dataSource[i].Checked == true) {

gridObj.multiSelectCtrlRequest = true;

gridObj.selectRows(idx);

$('#<%= Grid.ClientID %> .rowCheckbox')[idx].checked = true;

}

idx++;

}}}}

 function begin(args) {

gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");

 

 if (args.requestType == "paging") {

 . . . .

data.filter(function (x) {

 if ((x.Checked) == true)

index.push(j)

j++;

 return index;

});

 for (j = 0; j < index.length; j++) {

gridObj.multiSelectCtrlRequest = true;

$('#<%= Grid.ClientID %> .rowCheckbox')[j].checked = true;

}}}}
function rowSelect(args)
{

if (!ej.isNullOrUndefined(args.target) && args.target.hasClass("e-rowcell"))

args.cancel=true;

}

<script>

Query 2: Can i set the page size in the grid? 

Yes. We can set the page size in the grid using “PageSize” property of the “PageSettings” of the grid as follows.

<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True"
       AllowSelection="true" Selectiontype="Multiple" >
. . . .
<PageSettings PageSize="10" />
  </ej:Grid>

Please try the sample and let us know if you have any queries.

Regards,
Gowthami V.

[ray]

Hi Ray,

Thanks for using Syncfusion products.

Query 1: Just Compare with This control,There is no chechboxcolumn?

Based on your requirement we have created a sample and the same can be downloaded from the following link.

Sample Link: Sample

In the above sample, we have created a column “checked” with value “false” by default. Based on the checkbox selection, the corresponding record’s checked value is assigned true.

In actionComplete and actionBegin events of the grid, the records with “checked” value “true” are retrieved and thus the selection made is persisted while navigating to other pages.

<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True"

       AllowSelection="true" Selectiontype="Multiple">

<ClientSideEvents ActionBegin="begin" ActionComplete="complete"RowSelecting="rowSelect"/>

. . . .

</ej:Grid>

<script type="text/javascript">

var gridObj; 

function complete(args) {

$("#<%= Grid.ClientID %> .rowCheckbox").on("change", checkChange);

gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");

 if (args.requestType == "paging") {

 . . . .

gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);

}

 else {

 var idx = 0;

 for (i = args.startIndex; i < args.endIndex; i++) {

 if (gridObj.model.dataSource[i].Checked == true) {

gridObj.multiSelectCtrlRequest = true;

gridObj.selectRows(idx);

$('#<%= Grid.ClientID %> .rowCheckbox')[idx].checked = true;

}

idx++;

}}}}

 function begin(args) {

gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");

 

 if (args.requestType == "paging") {

 . . . .

data.filter(function (x) {

 if ((x.Checked) == true)

index.push(j)

j++;

 return index;

});

 for (j = 0; j < index.length; j++) {

gridObj.multiSelectCtrlRequest = true;

$('#<%= Grid.ClientID %> .rowCheckbox')[j].checked = true;

}}}}
function rowSelect(args)
{

if (!ej.isNullOrUndefined(args.target) && args.target.hasClass("e-rowcell"))

args.cancel=true;

}

<script>

Query 2: Can i set the page size in the grid? 

Yes. We can set the page size in the grid using “PageSize” property of the “PageSettings” of the grid as follows.

<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True"
       AllowSelection="true" Selectiontype="Multiple" >
. . . .
<PageSettings PageSize="10" />
  </ej:Grid>

Please try the sample and let us know if you have any queries.

Regards,
Gowthami V.

Thanks for your replay..first,I think a build-in chechbox column will be more convenient.second i mean set the pagesize dynamicly with a dropdown......

[Gowthami V]

Hi Ray,

Thanks for your update.

Query 1: ,I think a build-in chechbox column will be more convenient.

For your information by default the Boolean type column displayed in the grid as check box with disabled mode for preventing editing.

So we can achieve your requirement by enable the check box using Create and ActionComplete event of the grid.

Based on your requirement we have modified the sample and the same can be downloaded from the following link.

Sample Link: Sample

we have bound the “change ” event to the checkboxes for changing and maintaining the check state of the check boxes.

Please refer the below snippet.

  <script type="text/javascript">

function enableCheckbox(gridElement) {

            gridElement.element.find("input[type='checkbox']").removeAttr("disabled");

            this.element.find("input[type='checkbox']").on("change", function (e) {

                checkChange(this, e);

            });

        }

        function create(args)

        {

            enableCheckbox(this);

           
        }

function complete(args) {

          

            enableCheckbox(this);

            if (args.requestType == "paging") {

                var idx = 0;

                . . . .

                        this.selectRows(idx);

                        $('#<%= Grid.ClientID %> input[type="checkbox"]')[idx].checked = true;

                    }

                    idx++;

. . . .
    </script>

And also we can check and uncheck the checkbox while clicking on the record in the “RecordClick” event of the grid. In the change event of the check box we have maintained the check state in Checked parameter.

Please refer the below code snippet.

<script type="text/javascript">

        function checkChange(ele,e) {

            gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");

            if (ele.checked == false) {

                gridObj.model.dataSource[gridObj.getIndexByRow(ele.parentElement.parentElement)].Checked = false;

            }

            gridObj.multiSelectCtrlRequest = true;

            . . . .

                var add = temp + arr;

                gridObj.model.dataSource[add].Checked = true;

            }

           

        }

         </script>

Query 2: set the pagesize dynamicly with a dropdown......

We can set the page size by using property “pageSize” property of the grid in “ClientSideOnChange” event of the dropdownlist  as follows.

<ej:DropDownList ID="optIndexChange" WaterMarkText="Select" ClientSideOnChange="onActiveIndexChange" runat="server" Width="107px">
. . . .
</ej:DropDownList>

<script type="text/javascript">

function onActiveIndexChange(args) {

          

. . . .

               $('#<%= Grid.ClientID %>').ejGrid("getPager").ejPager("goToPage", newLastPage);

            $('#<%= Grid.ClientID %>').ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } });

           setPageValue(model1.totalPages);

        }

        function setPageValue(val) {

            $("#currentpage").ejNumericTextbox("model").maxValue = val;

            $("#pagecount").ejNumericTextbox("model").maxValue = val;

        }

    </script>

Please try the sample and let us know if you have any queries.

Regards,
Gowthami V.