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. Image for the cookie policy date

Enable/Disable row selection depending on condition

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.

2 Replies

BM Balaji Marimuthu Syncfusion Team February 2, 2016 08:51 AM UTC

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


BM Balaji Marimuthu Syncfusion Team February 2, 2016 08:53 AM UTC

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

Loader.
Up arrow icon