Enable/Disable row selection depending on condition

[Gajanan Deshpande]

Hi,

    I have One question related enable disable row selection depending on the column field data in asp.net mvc Grid.

I have Grid as follows:

  @(Html.EJ().Grid<object>("HPCJobGrid")

        .Datasource((List<ARAPL.BusinessObjects.HPCOperation>)ViewBag.HpcJobGrid)

        .CssClass("SyncGridStyle")

              .AllowFiltering()

              .EnableHeaderHover()

              .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .AllowPaging()

        .AllowResizing()

        .Columns(col =>

        {

            //col.HeaderTemplateID("#headerTemplate").Template(true).TemplateID("#checkboxTemplate").Width(50).Add();//The checkbox column is bound to the grid using template property and headerTemplateID property

            col.Field("JobId").HeaderText("Job ID").TextAlign(TextAlign.Right).Width(40).Add();

            col.Field("UserId").HeaderText("User ID").Width(150).Add();

            col.Field("AnalysisType").HeaderText("Analysis Type").Width(60).Add();

            col.Field("JobStatus").HeaderText("Job Status").Width(60).Add();

            col.Field("LogFileName").HeaderText("Log File Name").Width(80).Add();

            col.Field("SubmissionDateTime").HeaderText("Submission Date Time").TextAlign(TextAlign.Right).Format("{0:yyyy-MM-dd hh:mm:ss.fff}").Width(120).Add();

            col.Field("LastUpdationDateTime").HeaderText("Last updation Date Time").TextAlign(TextAlign.Right).Format("{0:yyyy-MM-dd hh:mm:ss.fff}").Width(120).Add();

            col.Field("JobDetails").HeaderText("Job Details").Width(180).Add();

        })

     )

Condition:

column field "JobStatus" have value as - Finished, Failed, Queued etc

I want enable selection to the only row which have "Finished" value. other rows should not be enable for select.

I am trying to handle event using jquery but could not manage at all.

so please help me to handle client side event for above using jquery.

[Balaji Marimuthu]

Hi Gajanan,

Thanks for contacting Syncfusion support.

You can enable/disable the row selection based on columns data in Grid using the client side RowSelection event. Refer to the sample, Help Document, code example given below.

Sample: RowSelection

Help Document: http://help.syncfusion.com/js/api/ejgrid#events:rowselecting

@(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowFiltering()

        .EnableHeaderHover()

        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .AllowPaging()

        .AllowResizing()

        .Columns(col =>

        {

            col.Field("JobID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("UserID").HeaderText("Customer ID").Width(80).Add();

            col.Field("JobStatus").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("JobCountry").HeaderText("Ship City").Width(110).Add();

        })

        .ClientSideEvents(eve => eve.RowSelecting("rowselecting"))

)

<script type="text/javascript">

    function rowselecting(args) {

        if (args.data["JobStatus"] != "Finished")

            args.cancel = true;         //prevent the rowselection

    }

</script>

In the above code example, we have enabled the rowselection for the value of JobStatus as Finished and prevented the row selection for both Failed and Queued by checking the condition using the args.data[“JobStaus”] in row selecting event.

Regards,
Balaji Marimuthu

[Balaji Marimuthu]

Hi Gajanan,

Please ignore our previous update.

You can enable/disable the row selection based on columns data in Grid using the client side RowSelecting event. Refer to the sample, Help Document, code example given below.

Sample: RowSelection

Help Document: http://help.syncfusion.com/js/api/ejgrid#events:rowselecting

@(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowFiltering()

        .EnableHeaderHover()

        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .AllowPaging()

        .AllowResizing()

        .Columns(col =>

        {

            col.Field("JobID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("UserID").HeaderText("Customer ID").Width(80).Add();

            col.Field("JobStatus").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("JobCountry").HeaderText("Ship City").Width(110).Add();

        })

        .ClientSideEvents(eve => eve.RowSelecting("rowselecting"))

)

<script type="text/javascript">

    function rowselecting(args) {

        if (args.data["JobStatus"] != "Finished")

            args.cancel = true;         //prevent the rowselection

    }

</script>

In the above code example, we have enabled the rowselection for the value of JobStatus as Finished and prevented the row selection for both Failed and Queued by checking the condition using the args.data[“JobStaus”] in row selecting event.

Regards,
Balaji Marimuthu