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. Image for the cookie policy date

format datetime

I implemented the grid with server side paging. First I tried the datamanager but I did return JSON data but the grid was not filled.
So I tried another solution (see below)

 //todo: create support ticket why .Adaptor(AdaptorType.UrlAdaptor) does not work.
        //public ActionResult Data(DataManager dm)
        //{
        //    var dataSource = _patientBusiness.GetAllPatients(dm.Skip, dm.Take); 
        //    return Json(new { d = new { results = dataSource.FilteredResult, __count = dataSource.TotalCount }}, JsonRequestBehavior.AllowGet);
        //}

        public ActionResult Data([Bind(Prefix = "$skip")]int? skip, [Bind(Prefix = "$top")]int? top)
        {
            var dataSource = _patientBusiness.GetAllPatients(skip.Value, top.Value);
            return Json(new { d = new { results = dataSource.FilteredResult, __count = dataSource.TotalCount } }, JsonRequestBehavior.AllowGet);
        }

This works but in the frontend I get following error: Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.

Code of the frontend:
                    <div class="project-list">
                        @(Html.EJ().Grid<PatientDto>("PatientGrid")
                            .Datasource(ds => ds.URL("/Patient/Data"))
                            .AllowPaging()
                            .PageSettings(m => m.PageSize(50))
                            .Columns(col =>
                            {
                                col.Field("PatientId").IsPrimaryKey(true).Visible(false).Add();
                                col.Field("SocialSecurityNumber").HeaderText("Number").Width(80).Add();
                                col.Field("Name").HeaderText("Name").Width(80).Add();
                                col.Field("FirstName").HeaderText("FIrstname").Width(80).Add();
                                col.Field("BirthDate").HeaderText("Birthday").Format("{BirthDate:dd/MM/yyyy}").Width(80).Add();
                                col.HeaderText("Details").Commands(command =>
                                {
                                    command.Type("detail")
                                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                                           {
                                               Text = "Details",
                                               Width = "100px",
                                               Click = "onClick"
                                           }).Add();
                                })
                                .IsUnbound(true)
                                .TextAlign(TextAlign.Center)
                                .Width(150)
                                .Add();
                            })
                        )
                    </div>

@section scripts
{
    <script type="text/javascript">
        function onClick(args) {
            var grid = $("#PatientGrid").ejGrid("instance");
            var index = this.element.closest("tr").index(); //For getting clicked rowElement(tr) index
            var record = grid.getCurrentViewData()[index]; //For getting the record by passing the row index
            var primaryKeyValue = record['PatientId']; //Here i_banner_id is primarykey column.
            window.location = "/Patient/Edit/" + primaryKeyValue;
        }
    </script>
}

What is the problem here?

Thank you

Regards

3 Replies

AR Ajith R Syncfusion Team May 22, 2015 05:49 AM UTC

Hi Van,

Thanks for using Syncfusion products.

Query 1: First I tried the datamanager but I did return JSON data but the grid was not filled. why Adaptor(AdaptorType.UrlAdaptor) does not work.

We have analyzed your code snippet and found that you have pass the data as results and _count object instead of result, count object which is the cause of the issue. We would like to let you know that when we are using UrlAdaptor we must have to pass the data as result and count object from the controller. Please refer the below code snippet for further details.


public ActionResult DataSource(DataManager dm)

{

IEnumerable DataSource = OrderRepository.GetAllRecords().ToList();

DataOperations opt = new DataOperations();

var count = DataSource.AsQueryable().Count();

//Paging

DataSource = opt.PerformSkip(DataSource, dm.Skip);

DataSource = opt.PerformTake(DataSource, dm.Take);

return Json(new { result = DataSource, count = count }, JsonRequestBehavior.AllowGet);
}


Query 2: This works but in the frontend I get following error: Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.

We suggest you to use DataManager parameter instead of skip and top in the Url method with the above solution to achieve your requirement. For your kind information there is no such parameters like skip and top in the Url method to perform server side paging to the Grid.

The DataManager itself have all Grid basic functionality parameters and the data operations can be performed by using DataOperations class. Please refer the below screen shot for further details.



Query 3: format datetime

We have found that you have set the date format as "{BirthDate:dd/MM/yyyy}" and we would like to let you know that when we are setting format to the columns the format must have the 0 prefix with colon and then format “{0:dd/MM/yyyy}”. Please refer the below code snippet for further details.


@(Html.EJ().Grid<object>("Grid")

-------

-------

.Columns(col =>

{

--------

--------

col.Field("OrderDate").HeaderText("Birthday").Format("{0:dd/MM/yyyy}").Width(80).Add();


});

)



Please refer the below UG Doc and online demo link to know further details about Url Adaptor in ejGrid.

UG Doc: http://help.syncfusion.com/ug/js/index.html#!Documents/urladaptor.htm

For your convenience we have created a simple sample and the same can be downloaded from the below lin.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119196/UrlAdaptor_Grid-952468734.zip

Please let us know if you have any concerns.

Regards,
Ajith R


VM Van Meerbeeck Jonathan May 22, 2015 06:15 AM UTC

Hi Ajith,

Query 1:
It works now, the problem was in the return JSON. But now I get weird signs in the paging buttons below on the grid. Attached you can find the screenshot.


Query2 and 3
I only get this error if I try to set the datetime correctly.
The javascrip still remains even if use the following format:
@(Html.EJ().Grid<PatientDto>("PatientGrid")
                            .Datasource(ds => ds.URL("/Patient/Data").Adaptor("UrlAdaptor"))
                            .AllowPaging()
                            .PageSettings(m => m.PageSize(50))
                            .Columns(col =>
                            {
                                col.Field("PatientId").IsPrimaryKey(true).Visible(false).Add();
                                col.Field("SocialSecurityNumber").HeaderText("Number").Width(80).Add();
                                col.Field("Name").HeaderText("Name").Width(80).Add();
                                col.Field("FirstName").HeaderText("FIrstname").Width(80).Add();
                                col.Field("BirthDate").HeaderText("Birthday").Format("{0:dd/MM/yyyy}").Width(80).Add();
                                col.HeaderText("Details").Commands(command =>
                                {
                                    command.Type("detail")
                                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                                           {
                                               Text = "Details",
                                               Width = "100px",
                                               Click = "onClick"
                                           }).Add();
                                })
                                .IsUnbound(true)
                                .TextAlign(TextAlign.Center)
                                .Width(150)
                                .Add();
                            })
                        )
So the issue is not resolved.

Regards
Jonathan

Attachment: paging_49fcf585.zip


AR Ajith R Syncfusion Team May 25, 2015 09:00 AM UTC

Hi Van,

Thanks for your update.

Query 1: I get weird signs in the paging buttons below on the grid

We are sorry to let you know that we are unable to reproduce your reported issue. We suspect that you have missed to include the common-images for the Grid CSS which causes the pager icon issue.

We would like to let you know that the Gird SVG icons has been placed inside the common-images folder and we have to include this folder to apply the icons in the Grid. Please refer the below location to get the common-images for ejGrid.

Common-Images: C:\Program Files (x86)\Syncfusion\Essential Studio\13.1.0.26\JavaScript\assets\css\web

Please refer the below screen shot from the application for further details.



Query 2: I only get this error if I try to set the datetime correctly.

We are sorry for the inconvenience caused. We are unable to reproduce your reported issue. We suspect that you doesn’t refer the “jquery.globalize.min.js” script file in your layout page which causes this issue while setting format to the columns. Please refer the below code snippet for further details.

[_Layou.cshtml]

<script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>


For your kind information, we are using jquery globalize script to format the columns and we have to refer this script file to avoid the script errors when formatting a column in the Grid. Please refer the below UG Doc to know the dependent files.

UG Doc: http://help.syncfusion.com/ug/js/index.html#!Documents/dependencies.htm

If the above two issues are still reproduced in your end please refer the below queries for further details.

Pager Queries:

1. Can you please let us know whether you have used any custom CSS in your application ?
2. Please share us your layout page from the application

Script error Queries:

1. Can you please share us the screen shot for stack trace of the script error ?
2. Please provide us more information regarding these issues or else please get back to us with reproducing the issues in the below sample. It will be helpful for us to analyze the issue and provide you the response as early as possible.

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119196/UrlAdaptor742794776.zip

Please let us know if you have any concerns.

Regards,
Ajith R

Loader.
Live Chat Icon For mobile
Up arrow icon