Reordering problems

[Wouter]

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]

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. 

 

Help Documents: http://help.syncfusion.com/js/grid/editing#url-adaptor 

http://help.syncfusion.com/js/datamanager/data-adaptors#url-adaptor 

 

 

    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. 

 

Sample: http://jsplayground.syncfusion.com/dux1atpj 

 

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]

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]

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. 

 

http://jsplayground.syncfusion.com/rpbg201a 

 

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