Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Abhishek Singhal
930
Allow multiple selection at runtime in igGrid
posted

Hi

We have a grid configured on server side using Asp.Net MVC Helpers, and uses filtering and paging. Datasource is set to the initial data and datasourceUrl is set to get the paging data.

Initial mode is single selection enabled in row mode. Row selectors are present with rownumbering enabled and checkbox disabled.

On the client side, I would like to allow user to click a button and then enable the check boxes and let him select multiple rows. I tried with the following but could not get results:

        var obj = $('#acMainGrid');

        obj.igGridSelection('option', 'multipleSelection', true);
        obj.igGridRowSelectors('option', 'enableCheckBoxes', true);

I understand multipleSelection cannot be enabled after grid creation and that my only options are to get a new grid from the server or to recreate grid on the client. I dont want to hit the server because it takes time. How to do this purely on the client side ?

Kindly advise asap

Thanks

Parents
  • 485
    Offline posted

    Hello Abhishek,

     

    Thank you for posting in our forum.

     

    The multipleSelection option has a setter, so it is actually possible to change it at runtime after grid creation. This is not the case with the “enableCheckBoxes” – changing it would require recreating the grid in order for it to reflect the changes, just as you have stated.

     

    I would suggest that you handle the “rendered” event raised by the igGrid after it has finished initializing and has been rendered. In the handling function would contain the code that would call the grid API and change the two options. The reason for this is that we want to be sure the grid has been initialized and the widgets are there when we are calling them – otherwise clicking the button would cause an error.

     

    The igDatasource widget API provides the “data” method, which would give you the original data that has been passed to the grid for databinding. Storing it in a variable and setting it as a new dataSource would make the grid dataBind again, which includes destroying it, binding to the new data (which is actually the old one) and reinitializing. That way the two options that have been changed would be reflected.  

     

    Here is a sample code that demonstrates the aforementioned approach in code:

     

     

    <!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <div style="margin: 50px auto; display:flex; justify-content: center; align-items: center; flex-direction: column">
        <table id='grid'></table>
        <br/>
        <button id='configButton'>Change config</button>
    </div>
    <script>
        $(() => {            
            let data = [
                { "ProductID": 1, "ProductCategory": "Done Today", "UnitPrice": 12.81, "SellerName": "Stanley Brooker", "Country": "Bulgaria", "City": "Plovdiv", "UnitsSold": 282 },
                { "ProductID": 2, "ProductCategory": "Done Today", "UnitPrice": 49.57, "SellerName": "Elisa Longbottom", "Country": "US", "City": "New York", "UnitsSold": 296 },
                { "ProductID": 3, "ProductCategory": "Postponed", "UnitPrice": 3.56, "SellerName": "Lydia Burson", "Country": "Uruguay", "City": "Ciudad de la Costa", "UnitsSold": 68 },
            ];
            let customTemplate = '{}' 
            $("#grid").igGrid({
                dataSource: data,
                primaryKey: "ProductID",
                width: "1200px",
                autoCommit: true,
                rendered: () => {
                    $('#configButton').on('click', () => {
                        let localData = $('#grid').data('igGrid').dataSource.data()
                        $('#grid').igGridSelection('option', 'multipleSelection', true);
                        $('#grid').igGridRowSelectors('option', 'enableCheckBoxes', true)
                        $('#grid').igGrid('option', 'dataSource', localData);
                    })
                },
                columns: [   
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "25%", hidden: true },
                    { headerText: "Seller Name", key: "SellerName", dataType: "string", width: "33%"},
                    { headerText: "Product Category", key: "ProductCategory", dataType: "string", width: "33%" },
                    { headerText: "Units Sold", key: "UnitsSold", dataType: "number", width: "33%" },
                ],
                features: [
                    { name: "Selection" },
                    { name: "RowSelectors" }
                ]
            })
        })
    </script>
</body>
</html>

     

     

    Please let me know if you have some additional questions regarding this matter. 

Reply Children