Dynamically disable grid rows

4 posts, 0 answers
  1. Jason
    Jason avatar
    12 posts
    Member since:
    Dec 2018

    Posted 07 Jun 2020 Link to this post

    Hello,

    Looking for an easy solution to enable/disable all grid rows based on other values/selections on the page.

    The following selectable parameters for the grid gives me exactly what I need but I need to be able to configure the grid based on the user's input values on the page.

    .Columns(columns => {
        columns.Bound(e => e.Id).Hidden();
        columns.Select()
            .Width("20px");
        columns.Bound(e => e.Name)
            .Title("Name")
            .Width("400px");
        columns.Bound(c => c.Description)
            .Title("Description")
            .Width("400px");
    })
    .Selectable(select => select
        .Mode(GridSelectionMode.Single)
        .Type(GridSelectionType.Row)
    )

     

    I've tried using the following jquery to toggle the rows, with no luck.  'enabled' is the parameter passed to the function.

    var grid = $('#grid').data('kendoGrid');
     
    grid.items().each(
        function (index, value) {
            $(value).find('.k-checkbox').attr('disabled', !enabled);
        }
    );

     

    Any suggestions on how I can achieve the functionality needed with the grid component?

    Thanks.

    Jason

     

     

  2. Jason
    Jason avatar
    12 posts
    Member since:
    Dec 2018

    Posted 08 Jun 2020 Link to this post

    I've also tried the following jquery,

     

     

    $("#gridPermissions").kendoGrid({
        selectable: "single, row"
    });

     

    This simply removes ALL rows in the grid but keeps the column names.

     

  3. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 09 Jun 2020 Link to this post

    Hi, Jason,

    Thank you for the provided code snippets.

    If you would like to disable the checkbox elements, use the "k-state-disabled" class instead. You could introduce an if-else clause to programmatically enable or disable them:

    var grid = $('#grid').data('kendoGrid');
     
    grid.items().each(
        function (index, value) {
            $(value).find('.k-checkbox').addClass("k-state-disabled");
        }
    );

    I hope you find this helpful.

     

    Regards,
    Anton Mironov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  4. Jason
    Jason avatar
    12 posts
    Member since:
    Dec 2018

    Posted 03 Jul 2020 Link to this post

    Thanks Anton.

     

    Worked perfectly.

     

Back to Top