Grid Row Select with Check box click

[Chatra]

Hi,

I have two grids on a Popup Edit of another grid and want to move data rows between the two grids on Popup.

As of now able to maintain the check-box check state on the grid during refresh as below.

And I am  looking for is to select the row when the check-box is checked and Unselect  the row when check box is unchecked even when grid is refreshed.

(Note: Grid as of now not at set to  [selectable: "multiple"] and  let me know if this is required.)

$("#availableAgentsGrid").kendoGrid({
        dataSource: agentdataSource,
       dataBound: function () { 

         //On Grid Databound Maintain the state of Checkbox when grid refresh on .
            for (agent in avAgentCheckedarray) {
                if (avAgentCheckedarray[agent]) {
                    $('#'+agent).attr('checked', 'checked');
                }
            }


            //Set agent Check box; Check and Uncheck Action Event
            $('#availableAgentsGrid tbody').on('click', ':checkbox', function () {
                var id = availableAgentGridData.dataItem($(this).closest('tr')).AgentID;
                if ($(this).is(':checked')) {
                    avAgentCheckedarray[id] = true;
                    $('#' + id).attr('checked', 'checked');

                } else {
                    avAgentCheckedarray[id] = false;
                    $('#' + id).removeAttr("checked");
                }
            });

        },//End of Databound
        columns: [
                       { field: "AgentID",
                           title: "<input id='acheckAll', type='checkbox', class='checkbox' />",
                           width: 50,
                           filterable: false, sortable: false,
                           template: "<input type='checkbox' class='checkbox' id='${AgentID}' />" //define template column with check-box and attach click event handler
                       },

  });// End of #availableAgentsGrid  

availableAgentGridData = $('#availableAgentsGrid').data().kendoGrid;

Thanks,
Chatrapathi Chennam

[Atanas Korchev]

Hello,

You can check the Select grid rows using checkboxes code library project.

Regards,
Atanas Korchev
Telerik

 

 

[Chatra]

HI Korechev,

Thanks for the reply.

This is what I am looking for, but went to issues when trying to get list of rows/row selected in the grid using   "availableAgentGridData.select();"

"Unable to get property 'value' of undefined or null reference.select();"

Let me know something more custom code to be done when making a row selected.

Thanks,
Chatrapathi Chennam

[Atanas Korchev]

Hi,

To get the selected rows of the grid you need to use its select method. The error you are getting could happen if the reference to the grid object isn't valid. You can try inspecting the availableAgentGridData variable to see if it is a valid instance. Use your browser developer tools to do that.

Regards,
Atanas Korchev
Telerik

 

 

[Chatra]

Hi Korechev,

I have attached the demo project below to move agents between grids ("#availableAgentsGrid" & "#selectedAgentsGrid") under Role pop-up Grid("#Role") Edit.

Grid.Select() is throwing errors unless Grid is Configured with  (selectable: "multiple").

Here I want to achieve is to move Rows items between the grid by maintain the  Status of Row Items(Checked& Selected) as in Source Grid after initial push to destination Grid .

Thanks,
Chatrapathi Chennam

[Atanas Korchev]

Hi,

Unfortunately I am not sure how to get to that grid. Could you please list here the required steps?

Regards,
Atanas Korchev
Telerik

 

 

[Chatra]

Hi,

Click on the Edit row of User Grid-->Click on Roles Tab-->Click Edit of any row of the  Roles Grid--> Click "Next" on Select Role Wizard Tab-->Here You can see the Two Agents Grids where trying to move row "Data items" between the Grids; like a List Box.

All the functionality to move Row "Data Items" between the grids in Button Click of pushAgentsbtn_click() and popAgentsbtn_click().
And row Select operations are performed in databound event of grid "#availableAgentsGrid" 

Search for  $('#availableAgentsGrid tbody').on('click', ':checkbox', function () on Scripts/User.js file.

Thanks,
Chatrapathi chennam

[Atanas Korchev]

Hi,

Thanks for the provided instructions. The problem is caused because the select() method of the grid works only when the grid selection is enabled via the "selectable" option. If selectable is not set the select method will fail as it does now. If you don't want to enable selection for some reason you can just find the table rows that have k-state-selected class:

//Push Agents to Selected grid 
function pushAgentsbtn_click() {

    $("#availableAgentsGrid .k-state-selected").each(function () {

Keep in mind that you can't use the select() method of the grid if selection isn't enabled. You should add "k-state-selected" to select rows and remove that class to unselect rows.

Here is the complete code:

function pushAgentsbtn_click() {


    $("#availableAgentsGrid .k-state-selected").each(function () {
        var dataItems = availableAgentsGrid.dataItem($(this));                                        //Get the row item to be pushed


        var column = dataItems.uid;                                                                  // Whatever the name of the unique id for your data source
        if (selectedAgentsGrid.table.find('tr[data-uid="' + column + '"]').length == 0) {            // Check to make sure it's not in there in Destination Grid
            selectedAgentsGrid.dataSource.add(dataItems);                                            // DESTINATION DATASOURCE
            selectedAgentsGrid.table.find('tr[data-uid="' + column + '"]').addClass("k-state-selected");
            $('#' + dataItems.AgentID).attr('checked', 'checked');
        }
    });

    selectedAgentsGrid.refresh();                                                                    // MUST REFRESH THE DESTINATION GRID

    /** To be done; need to remove pushed items from source grid.**/
}
Regards,
Atanas Korchev
Telerik