We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Reordering problems

Thread ID:

Created:

Updated:

Platform:

Replies:

124295 May 30,2016 08:55 AM Jun 1,2016 07:04 AM JavaScript 3
loading
Tags: ejGrid
Wouter
Asked On May 30, 2016 08:55 AM

I've created an example to demonstrate my problems here: http://jsplayground.syncfusion.com/oh0tnyti
Keep in mind that manipulating employee doesn't make sense, but in my real problem this occurs the same way with a position column. Also, the first problem is the showstopper, the second one is a UX problem (which is important too, but I can make a workaround if need be).

Problem 1:

If the datasource is using a datamanager with an url adapter I cannot iterate trough the datasource like I do now on lines 53 - 57.

Problem 2:

Scenario:
  1. select first record (nancy)
  2. drag nancy further down
  3. click "Save to datasource"

The data seems to be persisted (alert behind the button "GetCurrentViewData" shows this) but the template column isn't properly refreshed.


Balaji Marimuthu [Syncfusion]
Replied On May 31, 2016 04:43 AM

Hi Wouter, 
 
Thanks for contacting Syncfusion support. 
 
Please find the response. 
 
Query:1 If the datasource is using a datamanager with an url adapter I cannot iterate trough the datasource like I do now on lines 53 - 57. 
 
When using the UrlAdaptor, it will retrieve data from server based on the pageSize , for ex: pageSize 10 it retrieves only 10 records and doesn’t retrieve all records. So, we can’t access all records in client side. We can access only the current page records using the currentViewData property in model property. 
 
 
 
    var obj = $("#Grid").ejGrid("instance"); 
            var data = obj.model.currentViewData; 
 
 
 
Query:2 The data seems to be persisted (alert behind the button "GetCurrentViewData" shows this) but the template column isn't properly refreshed. 
 
We have checked this issue by using the provided scenario and sample. The Template Column in Grid has been rendered based on the EmployeeID field, but you have changed the value of EmployeeID in btnclick, btnfresh and droppedrow functios. That is the cause of the issue. 
 
 
function btnclick() { 
        var obj = $("#Grid").ejGrid("instance"); 
        var data = obj.model.currentViewData; 
        var str=""; 
        for (var i = 0; i < data.length; i++){ 
            data[i].EmployeeID =i+1; 
            str=str+"\n"+data[i].EmployeeID+" : "+data[i].FirstName; 
        } 
        alert(str); 
    }; 
    function btnfresh() { 
        var obj = $("#Grid").ejGrid("instance"); 
        var str =""; 
        var data = obj.model.dataSource; 
        for (var i = 0; i < data.length; i++){ 
            data[i].EmployeeID =i+1; 
            str=str+"\n"+data[i].EmployeeID+" : "+data[i].FirstName; 
        } 
        $("#Grid").ejGrid("refreshContent"); 
        alert(str); 
    }; 
    var droppedRow = function (args) { 
        var data = args.model; 
        var str=""; 
        for (var i = 0; i < data.length; i++) { 
            model.dataSource[i].EmployeeID = i; 
        } 
        $("#Grid").ejGrid("refreshContent"); 
    }; 
 
 
 
So, we have removed the highlighted codes and now it’s working properly. Refer to the modified sample as below. 
 
 
If we had misunderstood your requirement, please share more information about the issues & requirement that will be helpful to find the cause of issue and provide the better solution at the earliest. 
 
 
Regards, 
Balaji Marimuthu 


Wouter
Replied On May 31, 2016 04:49 AM

But I want to edit EmployeeID! In my actual case its a position field.

My actual requirement is: reorder rows and save this to the database.

Balaji Marimuthu [Syncfusion]
Replied On June 1, 2016 07:04 AM

Hi Wouter,  
 
In provided sample, template column has been rendered using the EmployeeID field i.e. the image name will be as 1.png, 2.png..etc., After reordering you have changed value of EmployeeID but the image name which will be used by the template column has not changed and it holds the same name therefore, the template column maintained the old image like as 1.png, 2png..etc., 
 
 
   
        <div class="cols-sample-area"> 
          <script type="text/x-jsrender" id="columnTemplate"> 
                    <img style="width: 75px; height: 70px" src="13.4.0.53/themes/web/images/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
          </script> 
    <script type="text/javascript"> 
      function btnclick() { 
           
              . . . 
 
             data[i].EmployeeID =i+1; 
      }; 
    function btnfresh() { 
 
            . . .  
 
            data[i].EmployeeID =i+1; 
             
    }; 
    var droppedRow = function (args) { 
 
         . . .  
          
          model.dataSource[i].EmployeeID = i; 
         
    }; 
    $(function () { 
        var grid = $("#Grid").ejGrid({ 
            // the datasource "window.employeeView" is referred from jsondata.min.js 
 
            columns: [ 
              { 
                  headerText: "Employee Image", template: true, templateID: "#columnTemplate", textAlign: "center", width: 110 } 
              , 
              { 
                  field: "EmployeeID", headerText: "Employee ID", isPrimarykey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 90 } 
    } 
 
              . . . .  
     ); 
 
 
 
For your scenario, please make the image independent of EmployeeID column So, once the value of EmployeeID field change, the changes won’t affect the template column. Refer to the following sample. 
 
 
In above sample, we have used the different field to the template column – ID field and render Grid.  
 
 
<script type="text/x-jsrender" id="columnTemplate"> 
        <img style="width: 75px; height: 70px" src="13.4.0.53/themes/web/images/Employees/{{:Id}}.png" alt="{{: Id }}" /> 
    </script> 
 
 
  var grid = $("#Grid").ejGrid({ 
            // the datasource "window.employeeView" is referred from jsondata.min.js 
            dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(8)), 
            editSettings: { 
                allowEditing: true, allowAdding: true, allowDeleting: true 
            } 
          , 
            allowRowDragAndDrop: true, 
            selectionType: "multiple", 
            columns: [ 
              { 
                  headerText: "Employee Image", template: true, templateID: "#columnTemplate", textAlign: "center", width: 110 
              } 
              , 
              { 
                  field: "EmployeeID", headerText: "Employee ID", isPrimarykey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 90 
              } 
               
            ] 
        } 
 
 
If we had misunderstood your requirement, kindly revert the sample with screenshot of how you want to save the datasource after reordering and the issue you have faced. 
 
 
Regards, 
Balaji Marimuthu 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;