Move grid rows between two grids?

[Ross]

Does anyone know of an example where you can move rows between two grids (left/right)?  In the attached image I've got two select boxes but I want to turn them into grids with a row event that moves them left or right.  Any pointers would be greatly appreciated.

[Ä m o l]

Hi Ross,

I used KendoListBox instead of Grid hope this will help you.

//Following is the template I used to fill the kendoListbox//
<script type="text/x-kendo-tmpl" id="ListViewtemplate">
        <p value=${ProviderID}>
            ${ProviderName}          
        </p>
</script>

//// Script ////
AssignedGroupsListBox = $("#assignedGroupsListView").kendoListView({
                        dataSource: assignedGroupsDS,
                        selectable: "multiple",
                        template: kendo.template($("#ListViewtemplate").html())
                    });

function addGroup()
 {
        AssignedGroupsListBox.append($(AvailableGroupsListBox).find("P:.k-state-selected"));
        $(AvailableGroupsListBox).find("P:.k-state-selected").detach();
}

function addAllGroups() 
{
        if (AssignedGroupsListBox.html().length > 0) 
        {
            AssignedGroupsListBox.html(AssignedGroupsListBox.html() + AvailableGroupsListBox.html());
        }
        else 
        {
            AssignedGroupsListBox.html(AvailableGroupsListBox.html());
        }
        AvailableGroupsListBox.html('');
}

function removeGroup()
{
        AvailableGroupsListBox.append($(AssignedGroupsListBox).find("P:.k-state-selected"));
        $(AssignedGroupsListBox).find("P:.k-state-selected").detach();
}

function removeAllGroups()
{
    AvailableGroupsListBox.html(AssignedGroupsListBox.html());
    AssignedGroupsListBox.html('');
}