We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Grid with a checkbox selecton and more.

Thread ID:

Created:

Updated:

Platform:

Replies:

119371 Jun 11,2015 08:19 AM Jun 15,2015 11:24 PM ASP.NET Web Forms 3
loading
Tags: Grid
ray
Asked On June 11, 2015 08:19 AM

 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 [Syncfusion]
Replied On June 12, 2015 08:48 AM

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
Replied On June 12, 2015 07:54 PM

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 [Syncfusion]
Replied On June 15, 2015 11:24 PM

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;