Monday, 2 July 2018

jqgrid - drag and drop table rows from bottom to top and save data with filters in salesforce


PrioritizeProjects.vfp
===============

<apex:page controller="PrioritizeProjectsController" showHeader="false" sidebar="false" >
    <html>
        <head>
            <!-- The jQuery library is a prerequisite for all jqSuite products -->
            <script type="text/ecmascript" src="https://www.guriddo.net/demo/js/jquery.min.js"></script>
            <!-- This is the Javascript file of jQuery UI --> 
                <script type="text/ecmascript" src="https://www.guriddo.net/demo/js/jquery-ui.min.js"></script>
            <!-- This is the Javascript file of jqGrid --> 
            <script type="text/ecmascript" src="https://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
            <!-- This is the localization file of the grid controlling messages, labels, etc.
            <!-- We support more than 40 localizations -->
                <script type="text/ecmascript" src="https://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
            <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
            <link rel="stylesheet" type="text/css" media="screen" href="https://www.guriddo.net/demo/css/jquery-ui.css" />
            <!-- The link to the CSS that the grid needs -->
            <link rel="stylesheet" type="text/css" media="screen" href="https://www.guriddo.net/demo/css/trirand/ui.jqgrid.css" />
            <meta charset="utf-8" />
            <title>Prioritize Projects</title>
            <script type="text/javascript">
            var getProjectsList = '{!$RemoteAction.PrioritizeProjectsController.getProjectsList}';
            var saveProjectsList = '{!$RemoteAction.PrioritizeProjectsController.saveProjectsList}';         
            </script>
            <script src="{!$Resource.PrioritizeProjectsControllerJS}" type="text/javascript"></script>         
            </head>
            <script> var previousOnload = window.onload; window.onload = function() { if (previousOnload) { previousOnload(); } showDataInJqGrid(); } </script>
            <body>
                <div style="margin:3%">               
                    <div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" />
                 
                    <apex:form >
                        Project:
                        <apex:selectList id="pr" multiselect="false" size="1" onchange="doFilter();">
                            <apex:selectOptions value="{!projectStatuslist}"></apex:selectOptions>
                        </apex:selectList>&nbsp;&nbsp;
                        Worker:
                        <apex:selectList id="wr" size="1" multiselect="false" onchange="doFilter();">
                            <apex:selectOptions value="{!workerslist}"></apex:selectOptions>
                        </apex:selectList>
                    </apex:form>
                    <br />
                    <br />
                 
                        <table id="grid1"></table>
                        <div id="pgrid1"></div>                 
                        <br />         
                        <input type="button" value="Save Updated Order Of Priorities" onClick="savePriorities();" />
                 
                    <br />
                </div>
             
            </body>
        </html>
    </apex:page>




PrioritizeProjectsControllerJS.js
=======================
var gridData;
var obj;

function showDataInJqGrid(){
    var accName = '';
    //document.getElementById("query").value;
    console.log('accName: '+accName);
    //get filters
    var project=document.getElementById('j_id0:j_id2:pr').value;
    var worker=document.getElementById('j_id0:j_id2:wr').value;
   // placeData('All','All');
    placeData(project,worker);
}
function placeData(project,worker) { 
    var jsonString;
    Visualforce.remoting.Manager.invokeAction(
        getProjectsList,
        project,
        worker,
        function (result, event) {
            try{
                if(event.type == 'exception'){
                    alert(event.message);
                } else{     
                    jsonString = result;     
                    showProjectsList(jsonString);
                  //  gridData = JSON.stringify(jsonString);
                }
            }catch(err){
                console.log('Exception: '+err.stack);
            }
        },
        {escape: true}
    );
}
function showProjectsList(jsonString) {
    var cnames=jsonString.cnames;
    var cmodel=jsonString.cmodels;
    var data=jsonString.datalist;
    gridData=data;
    console.log('data: '+JSON.stringify(data)); 
 
    jQuery("#grid1").jqGrid({     
        height: 160,
        colNames: cnames,
        colModel: cmodel,
        caption: 'Prioritize Projects',
        pager: '#pgrid1'
    }); 
 
    for (var i = 0; i <= data.length; i++) {
        jQuery("#grid1").jqGrid('addRowData',i + 1, data[i]);
    }
 
  //  jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid1'});

  // move rows to anywhere
 $('#grid1').jqGrid('sortableRows', {
      cancel:".jqgrow.notsortable"
});

    $(window).on("resize", function () {
          // alert('test window');
        var $grid = $("#grid1"),
            newWidth = $grid.closest(".ui-jqgrid").parent().width();
        $grid.jqGrid("setGridWidth", newWidth, true);
    });
 
}



$(document).ready(function(){
 
 
});

function doFilter(){
    var project=document.getElementById('j_id0:j_id2:pr').value;
    var worker=document.getElementById('j_id0:j_id2:wr').value;
    //alert('Project: '+project+'\nWorker: '+worker);
    //clear grid data
    jQuery("#grid1").jqGrid("clearGridData");
    placeData(project,worker);
    //Reload Grid
    $('#grid1').trigger( 'reloadGrid' );
}

function savePriorities(){
    console.log('savePriorities success');
     var datafromgrid = $('#grid1').jqGrid('getRowData');
    console.log('datafromgrid: '+JSON.stringify(datafromgrid));
    //update priorities
    for (var i = 0; i < datafromgrid.length; i++) {
        console.log('Name: '+datafromgrid[i].Name);
        datafromgrid[i].Current_Priority__c=(i+1)
    } 
    console.log('updated data: '+JSON.stringify(datafromgrid));   
    var project=document.getElementById('j_id0:j_id2:pr').value;
    var worker=document.getElementById('j_id0:j_id2:wr').value;
    //save data
    Visualforce.remoting.Manager.invokeAction(
        saveProjectsList,
        JSON.stringify(datafromgrid),
        project,
        worker,
        function (result, event) {
            try{
                if(event.type == 'exception'){
                    alert(event.message);
                } else{
    //clear grid data
    jQuery("#grid1").jqGrid("clearGridData");
                    //show updatd projects
    placeData(project,worker);
                }
            }catch(err){
                console.log('Exception: '+err.stack);
            }
        },
        {escape: true}
    );
}





PrioritizeProjectsController.cls
======================
global class PrioritizeProjectsController {
    global String selectedProject{get;set;}
    public PrioritizeProjectsController() {
selectedProject='';     
    } 
    @RemoteAction
    global static ProjectWrapper getProjectsList(String p_project,String p_worker){
       // system.debug('Inside method: '+accName);
       // accName = '%'+ accName+'%';
        List<Project_Management__c> projects = new List<Project_Management__c>();
        ProjectWrapper pw=new ProjectWrapper();
        String query='SELECT Id,Name, Current_Priority__c, Parent_Project__r.Name,Project_Number__c,Requester__r.Name, Worker__r.Name, '+
            'Status__c, Status_Date__c, Completion_Proof__c,'+
                    'Description__c,Type__c,Initial_Priority_Placement__c, Date_Stamp_Assigned__c, '+
                    'Project_Age_Days__c,Createddate,Reject_Reason__c '+                                                 
                    'FROM Project_Management__c'+
            ' Where Status__c=:p_project AND Worker__c=:p_worker';
       /* if(!p_project.equals('All')
           && !p_worker.equals('All')){
             query+=' Where Status__c=:p_project AND Worker__c=:p_worker';
        }
        else if(!p_project.equals('All')
                && p_worker.equals('All')){
            query+=' Where Status__c=:p_project';
        }
        else if(p_project.equals('All')
                && !p_worker.equals('All')){
            query+=' Where Worker__c=:p_worker';
        }*/
        query+=' ORDER BY Current_Priority__c ASC';
        System.debug('query: '+query);
        projects = Database.query(query);
        System.debug('Projects: '+projects);     
        projects.add(new Project_Management__c(Name='ETC'));
        // WHERE status__c IN: {'Working','Backlog'}];
        List<String> cnamelist=new List<String>();
        cnamelist.add('Current_Priority__c');
        cnamelist.add('Name');
        cnamelist.add('Parent_Project__r.Name');
        cnamelist.add('Project_Number__c');
        cnamelist.add('Type__c');
        cnamelist.add('Requester__r.Name');
        cnamelist.add('CreatedDate');
        cnamelist.add('Status__c');
        cnamelist.add('Status_Date__c');   
        cnamelist.add('Worker__r.Name');
        cnamelist.add('Completion_Proof__c');
        cnamelist.add('Reject_Reason__c');
        List<ColModelWrapper> cmodelslist=new List<ColModelWrapper>();
        List<String> newcnamelist=new List<String>();
        for(String c:cnamelist){
            cmodelslist.add(new ColModelWrapper(c,c,95));
            if(c.contains('__r.Name'))
                c=c.replace('__r.Name','');
            if(c.contains('__c'))
                c=c.replace('__c','');
            if(c.contains('_'))
                c=c.replace('_',' ');
            if(c.equals('Name'))
                c='Project Name';
            newcnamelist.add(c);
        }
        pw.datalist=projects;
        pw.cnames=newcnamelist;
        pw.cmodels=cmodelslist;
       // System.debug('projects: '+pw);
        return pw;
    } 
    global class ProjectWrapper{
        global List<String> cnames;
        global List<ColModelWrapper> cmodels;
        global List<Project_Management__c> datalist;
        global ProjectWrapper(){}     
    }
    global class ColModelWrapper{
        global String name;
        global String index;
        global Integer width;
        global ColModelWrapper(String p_name,String p_index,Integer p_width){
            name=p_name;
            index=p_index;
            width=p_width;
        }
    }
    public List<SelectOption> getworkerslist() {
        List<SelectOption> options = new List<SelectOption>();
       // options.add(new SelectOption('All','All'));
        Map<String,String> workersMap=new Map<String,String>();
        for(Project_management__c pm:[SELECT Worker__c, Worker__r.Name
                                      FROM Project_management__c]){
                                          if(!workersMap.containsKey(pm.worker__c)){
                                              options.add(new SelectOption(pm.Worker__c,pm.Worker__r.Name));
                                              workersMap.put(pm.Worker__c,pm.Worker__r.Name);
                                          }
                                      }
        return options;
    }
    public List<SelectOption> getprojectStatusList(){
         List<SelectOption> options = new List<SelectOption>();
        // options.add(new SelectOption('All','All'));
         Map<String,String> workersMap=new Map<String,String>();
        for(Project_management__c pm:[SELECT Worker__c, Worker__r.Name ,Status__c
                                      FROM Project_management__c]){
                                          if(!workersMap.containsKey(pm.Status__c)){
                                              options.add(new SelectOption(pm.Status__c,pm.Status__c));
                                              workersMap.put(pm.Status__c,pm.Status__c);
                                          }
                                      }
        return options;
    }
     @RemoteAction
    global static void saveProjectsList(String p_projects,String p_project,String p_worker){
    Map<String,Id> projectNumberIdMap=new Map<String,Id>();
        for(Project_Management__c pm:[select Id,Project_Number__c
                                      From Project_Management__c
                                     WHERE Status__c=:p_project
                                      AND Worker__c=:p_worker]){
                                        projectNumberIdMap.put(pm.Project_Number__c,pm.Id);
                                      }
       List<Project_management__c> projects=(List<Project_Management__c>)JSON.deserialize(p_projects, List<Project_Management__c>.class);
       List<Project_management__c> processed=new List<Project_management__c>();
        System.debug('projectNumberIdMap: '+projectNumberIdMap);
        // Remove last index ETC     
        for(Project_management__c pm:projects){
            if(!pm.name.equals('ETC')){
                pm.Id=projectNumberIdMap.get(pm.Project_Number__c);
                processed.add(pm);
            }
        }
        update processed;
    } 
}








Downloads:

https://drive.google.com/open?id=1AsXMVp0ygBFnjrKfTpy1R__xhVGgpK0W

https://drive.google.com/open?id=1VmJqcO8XmfqZJVzMj0tM4XO4h-wbwde9


No comments:

Post a Comment