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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Error on grouping Grid columns by javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

128913 Feb 15,2017 01:21 PM UTC Feb 23,2017 12:42 PM UTC ASP.NET MVC 16
loading
Tags: Grid
CLAUDIO RICCARDI
Asked On February 15, 2017 01:21 PM UTC

I have a configured a grid without paging like this:

<div style="padding: 10px; text-align: center">
    @(Html.EJ().Grid<SlimHub.ViewModels.WorkActivityToPlan>("WorkActivitiesGrid")
          .Datasource(ds => ds.URL("../WorkActivity/WorkActivitiesToPlan").Adaptor(AdaptorType.UrlAdaptor))
          .AllowResizing()
          .AllowTextWrap(true)
          .AllowRowDragAndDrop()
          .AllowFiltering()
          .SelectionType(SelectionType.Multiple)
          .AllowGrouping()
          .GroupSettings(group => { group.ShowGroupedColumn(false); group.ShowDropArea(false); group.GroupedColumns(col => { col.Add("City"); col.Add("CustomerName"); col.Add("Service"); }); })
          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
          .Columns(col =>
          {
              col.Field("Id").HeaderText("Id").HeaderTextAlign(TextAlign.Center).Visible(false).Add();
              col.Field("City").HeaderText("Località").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("CustomerName").HeaderText("Cliente").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("Service").HeaderText("Servizio").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("WorkCode").HeaderText("Cliente").Template("#CustomerTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(20).Add();
              col.Field("WorkCode").HeaderText("Attività").Template("#ActivityTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(30).Add();
          })
          .ClientSideEvents(s => s.RowDrop("onRowDrop").RowDragStart("onRowDrag").QueryCellInfo("queryCellInfo"))
          )
</div>

When the grid is loaded for the first time, it's all ok.

I can filter the dataset of the grid using a filter form.

The javascript function executed aftre filtering is this:

        geocoder.geocode({ 'address': address },
            function (results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    lat = results[0].geometry.location.lat();
                    lng = results[0].geometry.location.lng();

                    $.ajax({
                        type: "POST",
                        dataType: 'json',
                        async: true,
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({ cLat: lat, cLng: lng, range: $('#radiusInput').val(), FromDate: fDate, ToDate: tDate }),
                        url: "../../WorkActivity/WorkActivitiesToPlanRangePartial",
                        success: function (data) {
                            var objJSON = eval(data);
                            if (objJSON.count > 0) {
                                alert(objJSON.count);
                                $("#WorkActivitiesGrid")
                                    .ejGrid({
                                        dataSource: data.result, // data must be array of json
                                        allowGrouping : true,
                                        allowPaging : false,
                                        // More than one column is grouped while initializing the grid itself.
                                        groupSettings: { showDropArea: false, groupedColumns: ["City", "CustomerName", "Service"] },
                                        columns : ["City", "CustomerName", "Service"]],
                                        refreshContent: true
                                    });
                            } else {
                                var obj = $("#WorkActivitiesGrid").ejGrid("instance");
                                obj.model.filterSettings.filteredColumns
                                    .push({
                                        field: "Id",
                                        operator: "equal",
                                        value: 0,
                                        matchcase: false,
                                        predicate: "and"
                                    });
                                obj.refreshContent();
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Error during process: \n' + xhr.responseText);
                        }
                    });
                } else {
                    console.log("Geocode was not successful for the following reason: " + status);
                }
            });

As result, the dataset is correctly filtered, but I see the following console error:

Uncaught TypeError: Cannot read property 'ejPvtData' of undefined

There must be some error in the highlighted code...

Thanks in advance.

CLAUDIO RICCARDI
Replied On February 15, 2017 01:59 PM UTC

I found that the bahaviour is ok if I use Internet Explorer, while in Chrome the problem is present.

I use the following versions of browsers:

IE: 11.576.14393.0
Chrome: 56.0.2924.87

Claudio 

Mani Sankar Durai [Syncfusion]
Replied On February 16, 2017 12:22 PM UTC

Hi CLAUDIO, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are able to reproduce the reported issue. From your code example we have found that you are trying re-render the grid in AJAX post. So this is the cause of the issue. So we suggest you to destroy the grid and after that please render the grid as you did in the AJAX post. 
Please refer the below code example 
$.ajax({ 
                    url: "/Home/DataSource", 
                    type: "POST", 
                    data: { id: 1 }, 
                    success: function (result) { 
                     $("#Grid").ejGrid('destroy');  // destroy before rerender the grid 
                         $("#Grid").ejGrid({ 
                            dataSource: result.result, 
                            allowGrouping:true, 
                             columns: ["ShipCity", "CustomerID", "ShipCountry"], 
                            groupSettings: { showDropArea: false, groupedColumns: ["ShipCity", "CustomerID", "ShipCountry"] }, 
                         }) 
                         $("#Grid").ejGrid("refreshContent", true); 
                    } 
                }) 

Also you have used the refereshContent method as property in grid. We cannot use the method as property. So please refer the above code example of how have refreshed the grid content. 
We have also prepared a sample based on your requirement that can be downloaded from the below link. 
In this sample we have used button to re-render the grid. When clicking the button we have AJAX post. In the success function AJAX post we have destroy and re-render the grid. 
Refer the documentation link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


CLAUDIO RICCARDI
Replied On February 16, 2017 02:12 PM UTC

Hi,

I have modified the javascript function as you said..now the ajax call is this:

        geocoder.geocode({ 'address': address },
            function (results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    lat = results[0].geometry.location.lat();
                    lng = results[0].geometry.location.lng();

                    $.ajax({
                        type: "POST",
                        dataType: 'json',
                        async: true,
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({ cLat: lat, cLng: lng, range: $('#radiusInput').val(), FromDate: fDate, ToDate: tDate }),
                        url: "../../WorkActivity/WorkActivitiesToPlanRangePartial",
                        success: function (data) {
                            $("#WorkActivitiesGrid").ejGrid('destroy');
                            var objJSON = eval(data);
                            if (objJSON.count > 0) {
                                $("#WorkActivitiesGrid")
                                    .ejGrid({
                                        dataSource: data.result, // data must be array of json
                                        allowGrouping : true,
                                        groupSettings: { showDropArea: false, groupedColumns: ["City", "CustomerName", "Service"] }
                                    });
                                $("#WorkActivitiesGrid").ejGrid("refreshContent", true);
                            } else {
                                var obj = $("#WorkActivitiesGrid").ejGrid("instance");
                                obj.model.filterSettings.filteredColumns
                                    .push({
                                        field: "Id",
                                        operator: "equal",
                                        value: 0,
                                        matchcase: false,
                                        predicate: "and"
                                    });
                                obj.refreshContent();
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Error during process: \n' + xhr.responseText);
                        }
                    });
                } else {
                    console.log("Geocode was not successful for the following reason: " + status);
                }
            }); 

Now the grid is correctly destroyed, but not recreated.
I see the following error message:

Uncaught TypeError: Cannot read property 'enableGroupByFormat' of null
Uncaught TypeError: Cannot read property 'css' of null

Claudio

CLAUDIO RICCARDI
Replied On February 16, 2017 02:21 PM UTC

Ok...the problem is that I must define che columns property, otherwise the error I mentioned appears.

But I use a custom template for the two columns in the grid:

          .Columns(col =>
          {
              col.Field("Id").HeaderText("Id").HeaderTextAlign(TextAlign.Center).Visible(false).Add();
              col.Field("City").HeaderText("Località").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("CustomerName").HeaderText("Cliente").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("Service").HeaderText("Servizio").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("WorkCode").HeaderText("Cliente").Template("#CustomerTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(20).Add();
              col.Field("WorkCode").HeaderText("Attività").Template("#ActivityTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(30).Add();
          })

How can I define the columns property in the ajax call specifying that I use a template?

Claudio

CLAUDIO RICCARDI
Replied On February 16, 2017 03:31 PM UTC

I have modified my code like this:

                    $.ajax({
                        type: "POST",
                        dataType: 'json',
                        async: true,
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({ cLat: lat, cLng: lng, range: $('#radiusInput').val(), FromDate: fDate, ToDate: tDate }),
                        url: "../../WorkActivity/WorkActivitiesToPlanRangePartial",
                        success: function (data) {
                            $("#WorkActivitiesGrid").ejGrid('destroy');
                            var objJSON = eval(data);
                            if (objJSON.count > 0) {
                                $("#WorkActivitiesGrid")
                                    .ejGrid({
                                        dataSource: data.result, // data must be array of json
                                        allowGrouping: true,
                                        allowTextWrap: true,
                                        allowResizing: true,
                                        allowRowDragandDrop: true,
                                        selectionType: "multiple",
                                        allowPaging: false,
                                        groupSettings: { showGroupedColumns: false, showDropArea: false, groupedColumns: ["City", "CustomerName", "Service"] },
                                        columns:[{field:"Id",headerText:"Id",visible: false},
                                            {field:"Id",headerText:"Id",visible: false},
                                            {field:"City",headerText:"Località",visible: false},
                                            {field:"CustomerName",headerText:"Cliente",visible: false},
                                            {field:"Service",headerText:"Servizio",visible: false},
                                            {field:"WorkCode",headerText:"Cliente",template:true,templateID:"#CustomerTemplate",width:20},
                                            {field:"WorkCode",headerText:"Attività",template:true,templateID:"#ActivityTemplate",width:30} ]
                                    });
                                $("#WorkActivitiesGrid").ejGrid({
                                    queryCellInfo: function(args) {
                                        if (args.column.field == "Service") {
                                            $($(args.cell).parent()).css("backgroundColor", args.data.RGBColor);/*custom css applied to the row */
                                            $($(args.cell).parent()).css("color", args.data.FontColor);/*custom css applied to the row */
                                        }
                                    }
                                });
                                $("#WorkActivitiesGrid").ejGrid("refreshContent", true);
                            } else {
                                var obj = $("#WorkActivitiesGrid").ejGrid("instance");
                                obj.model.filterSettings.filteredColumns
                                    .push({
                                        field: "Id",
                                        operator: "equal",
                                        value: 0,
                                        matchcase: false,
                                        predicate: "and"
                                    });
                                obj.refreshContent();
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Error during process: \n' + xhr.responseText);
                        }
                    });

It is ok. I want to add a queryCellInfo javascript event that modifies the background of the cell.

I have added the highlighted code and now it works.

QUESTION:

When I first define the grid, I use the following Razor code:

<div style="padding: 10px; text-align: center">
    @(Html.EJ().Grid<SlimHub.ViewModels.WorkActivityToPlan>("WorkActivitiesGrid")
          .Datasource(ds => ds.URL("../WorkActivity/WorkActivitiesToPlan").Adaptor(AdaptorType.UrlAdaptor))
          //.Datasource(ds => ds.Json((IEnumerable<WorkActivity>) Model).Adaptor(AdaptorType.RemoteSaveAdaptor))
          .AllowResizing()
          .AllowTextWrap(true)
          .AllowRowDragAndDrop()
          //.AllowPaging()
          .AllowFiltering()
          .SelectionType(SelectionType.Multiple)
          .AllowGrouping()
          .GroupSettings(group => { group.ShowGroupedColumn(false); group.ShowDropArea(false); group.GroupedColumns(col => { col.Add("City"); col.Add("CustomerName"); col.Add("Service"); }); })
          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
          //.DetailsTemplate("#ActivityToPlanTemplate")
          .Columns(col =>
          {
              col.Field("Id").HeaderText("Id").HeaderTextAlign(TextAlign.Center).Visible(false).Add();
              col.Field("City").HeaderText("Località").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("CustomerName").HeaderText("Cliente").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("Service").HeaderText("Servizio").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("WorkCode").HeaderText("Cliente").Template("#CustomerTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(20).Add();
              col.Field("WorkCode").HeaderText("Attività").Template("#ActivityTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(30).Add();
          })
          .ClientSideEvents(s => s.RowDrop("onRowDrop").RowDragStart("onRowDrag").QueryCellInfo("queryCellInfo"))
          )
</div>

As you can see, there are three client side events:

    function onRowDrag(e) {

    }

    function onRowDrop(e) {

    }

    function queryCellInfo(args) {

    }

hen I destroy the grid and then recreate in ajax call, must I define again also the client side events, like the highlighted yellow code?

Thanks.

CLAUDIO RICCARDI
Replied On February 16, 2017 05:43 PM UTC

Hello.

I have another question? If I change the dataset after the ajax call, is it necessary to destroy the grid and recreate it? Or can I simply change the dataset property of the original grid?

If so, I think most of the work I'm doing is superfluous...

Claudio

Mani Sankar Durai [Syncfusion]
Replied On February 17, 2017 11:40 AM UTC

Hi CLAUDIO, 

We are analyzed your query and we are quite unclear regarding your information. To bind the dataSource for the grid in the AJAX success function it is enough to call dataSource method in grid from the grid instance and no need to destroy. Also once the grid is destroyed we cannot use any events that we used from the destroyed grid. 
Refer the documentation link of dataSource method in grid. 
Refer the code example. 
success: function (result) { 
                        var obj = $("#Grid").ejGrid('instance'); 
                        obj.dataSource(result.result);  // it is enough to set the datasource alone 
}  

But from your code example we found that you are trying to re-render the grid. So please share the details. 
1.       Is that you want to re-render the grid or it is enough to update the dataSource alone to the grid? 
2.       In which case you are calling AJAX post? Like in any button click or any grid action? 
3.       Share the full grid code and controller page. 
4.       Share the exact scenario that you would like to do in AJAX post. 
5.       If possible please share the sample project will full requirements. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


CLAUDIO RICCARDI
Replied On February 17, 2017 03:03 PM UTC

Ok, it's true that it is enough to call dataSource method in grid from the grid instance and no need to destroy, but then I loose grouping information and grid refreshes with a plain (not grouped) number of rows.

I have attached two images.

First image: refers to the first loading, where everything is ok (grouping by City, CustomerName and Service)

Second image: when I select a city in the text box, I call a javascript function with an ajax call that that changes the datasource. Data is correct, but grouping information is lost...

Thanks.

CLAUDIO RICCARDI
Replied On February 17, 2017 04:00 PM UTC

Sorry..I missed the images...

Claudio

Attachment: firstLoading_314971db.zip

CLAUDIO RICCARDI
Replied On February 17, 2017 04:01 PM UTC

this is the secon image...

Claudio

Attachment: secondLoading_58ade083.zip

Mani Sankar Durai [Syncfusion]
Replied On February 21, 2017 01:25 PM UTC

Hi Claudio, 

We have analyzed your query and checked based on the provided code example. But we are unable to reproduce the reported issue.  
We have also prepared a sample that can be downloaded from the below link. 
In this sample we have bind the data in button click using dataSource method in grid. Here the grouped columns in grid has been maintained 
If you still face the issue please get back to us with the following details. 
1.       Have you faced any error in console window after AJAX success? 
2.       Share the replication procedure of about calling AJAX success. 
3.       If possible please reproduce the issue in the above attached sample. 
The provided information will help us to analyze the issue and provide you the response as early as possible 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


CLAUDIO RICCARDI
Replied On February 21, 2017 07:52 PM UTC

Hi,

1. No, no error in the console window
2. I have the following search form:

        <div id="COL1">
            <div style="padding: 10px; vertical-align: middle; text-align: center; font-weight: bold;">Attività da pianificare</div>
            <table class="userInteractionTable">
                <tr>
                    <td>
                        <div class='well'>
                            <div class="row">
                                <div class='floating-label'>Dal</div>
                                <div class='floating-element'>
                                    @Html.EJ().DatePicker("FromDate").Value(@System.DateTime.Today.AddYears(-1)).DateFormat("MM/yyyy")
                                </div>
                                <div class='floating-label'>Al</div>
                                <div class='floating-element'>
                                    @Html.EJ().DatePicker("ToDate").Value(@System.DateTime.Today.AddMonths(1)).DateFormat("MM/yyyy")
                                </div>
                                <div class='floating-element'>
                                    @Html.EJ().CheckBox("AllDates").Text("Tutte").Value("All")
                                </div>
                            </div>
                            <div class="row">
                                <div class='floating-label'>Località</div>
                                <div class='floating-element'>
                                    <input id="cityInput" type="text" placeholder="Digita la località">
                                </div>
                                <div class='floating-label'>Raggio</div>
                                <div class='floating-element'>
                                    <input type="number" value="10" min="0" id="radiusInput" name="radiusInput" autofocus />
                                </div>
                                <div class='floating-element'>
                                    <form id="options">
                                        <select id="unitSelector" name="unitSelector">
                                            <option value="km">Kilometers</option>
                                            <option value="mi">Miles</option>
                                            <option value="ft">Feet</option>
                                            <option value="mt">Metres</option>
                                            <option value="in">Inches</option>
                                            <option value="yd">Yards</option>
                                            <option value="fa">Fathoms</option>
                                            <option value="na">Nautical miles</option>
                                            <option value="ch">Chains</option>
                                            <option value="rd">Rods</option>
                                            <option value="fr">Furlongs</option>
                                        </select>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="target">
                            @Html.EJ().WaitingPopup("target").ShowOnInit(true).ShowImage(true)
                            <div id="activitiesToPlanGrid" style="width: 100%">
                                @Html.Partial("../WorkActivity/WorkActivitiesToPlanPartial")
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

    $(document).ready(function () {
        obj = $("#WorkActivitySchedule").data("ejSchedule");
        $("#WorkActivitySchedule").ejSchedule("option", "tooltipSettings.enable", true);
        $("#WorkActivitySchedule").ejSchedule("option", "tooltipSettings.templateId", "#tooltipTemp");
        var input = document.getElementById('cityInput');
        autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.addListener('place_changed', function () {
            syncActivitiesGrid();
        });
    });

    function syncActivitiesGrid() {
        var place = autocomplete.getPlace();

        var objActGrid = $("#activitiesToPlanGrid").data("ejGrid");

        debugger;
        var range = $('#radiusInput').val();
        var lat;
        var lng;
        if (!place.geometry) {
            window.alert("Impossibile calcolare le coordinate per la località scelta!");
            return;
        }

        var address = place.formatted_address;
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({ 'address': address }, function (results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                lat = results[0].geometry.location.lat();
                lng = results[0].geometry.location.lng();

                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify({ cLat: lat, cLng: lng, range: $('#radiusInput').val() }),
                    url: "../../WorkActivity/WorkActivitiesToPlanRangePartial",
                    success: function (data) {
                        var objJSON = eval(data);
                        if (objJSON.count > 0) {
                            $("#WorkActivitiesGrid").ejGrid({
                                dataSource: data.result, // data must be array of json
                                refreshContent: true
                            });
                        } else {
                            var obj = $("#WorkActivitiesGrid").ejGrid("instance");
                            obj.model.filterSettings.filteredColumns.push({ field: "Id", operator: "equal", value: 0, matchcase: false, predicate: "and" });
                            obj.refreshContent();
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Error during process: \n' + xhr.responseText);
                    }
                });
            } else {
                console.log("Geocode was not successful for the following reason: " + status);
            }
        });
    }

I hope this will help you.

3. I can't reproduce the issue because of different assembly versions...

Mani Sankar Durai [Syncfusion]
Replied On February 22, 2017 01:12 PM UTC

Hi Claudio, 

We have checked your code example and found that you are binding the data for the grid using dataSource property in the AJAX success so that it will re-render the grid and grouped columns will not maintain. Also you have used refreshContent as a property in a grid even though it is a method.  So we suggest you to bind the data to the grid using dataSource method instead of using dataSource property in grid for AJAX success. 
Please refer the below code example. 
success: function (result) { 
                        var obj = $("#Grid").ejGrid('instance'); 
                        obj.dataSource(result.result);    //use dataSource method like this to bind the data 
                         } 

We have also prepared a sample that can be downloaded from the below link. 

Refer the documentation link. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


CLAUDIO RICCARDI
Replied On February 22, 2017 01:51 PM UTC

Great! It works.

But now I have another problem...when I first show the grid data grouped correctly, I can drag&drop from the grid to the scheduler only the rows of the first group. When I click on one row of the second group and drop in the scheduler, nothing happens...

Can you help me?

Claudio

CLAUDIO RICCARDI
Replied On February 22, 2017 02:02 PM UTC

For further details:

this is my original Grid:

<div style="padding: 10px; text-align: center">
    @(Html.EJ().Grid<SlimHub.ViewModels.WorkActivityToPlan>("WorkActivitiesGrid")
          .Datasource(ds => ds.URL("../WorkActivity/WorkActivitiesToPlan").Adaptor(AdaptorType.UrlAdaptor))
          .AllowResizing()
          .AllowTextWrap(true)
          .AllowRowDragAndDrop()
          .AllowFiltering()
          .SelectionType(SelectionType.Multiple)
          .AllowGrouping()
          .GroupSettings(group => { group.ShowGroupedColumn(false); group.ShowDropArea(false); group.GroupedColumns(col => { col.Add("City"); col.Add("CustomerName"); col.Add("Service"); }); })
          .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
          .Columns(col =>
          {
              col.Field("Id").HeaderText("Id").HeaderTextAlign(TextAlign.Center).Visible(false).Add();
              col.Field("City").HeaderText("Località").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("CustomerName").HeaderText("Cliente").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("Service").HeaderText("Servizio").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Visible(false).Add();
              col.Field("WorkCode").HeaderText("Cliente").Template("#CustomerTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(20).Add();
              col.Field("WorkCode").HeaderText("Attività").Template("#ActivityTemplate").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(30).Add();
          })
          .ClientSideEvents(s => s.RowDrop("onRowDrop").RowDragStart("onRowDrag").QueryCellInfo("queryCellInfo"))
          )
</div>

The attached image explains better the issue...

Claudio

Attachment: issue_85c9fcde.zip

Mani Sankar Durai [Syncfusion]
Replied On February 23, 2017 12:42 PM UTC

Hi Claudio, 

A support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.   
 
Regards,   
Manisankar Durai 


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.

Warning Icon 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.Close Icon

;