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.

Grid and MVC server side paging

Thread ID:

Created:

Updated:

Platform:

Replies:

118429 Mar 7,2015 02:30 PM Mar 10,2015 08:21 AM ASP.NET MVC 3
loading
Tags: Grid
Rohith
Asked On March 7, 2015 02:30 PM

I would like to get some samples to work on MVC grid with server side paging in mvc controllers.

I tried looking through forums and couldn't find any relevant examples.

Any good pointers will be useful.

Ajith R [Syncfusion]
Replied On March 9, 2015 09:39 AM

Hi Rohith,

Thanks for using Syncfusion products.

Query: I would like to get some samples to work on MVC grid with server side paging in mvc controllers. I tried looking through forums and couldn't find any relevant examples.

We suggest you to use UrlAdaptor to achieve server side paging in the MVC application. In the controller we have to pass the DataManager object as an argument which have the skip and take value for server side paging. We can use the PerfromSkip and PerformTake function from DataOperation object to iterate the current page data for Grid.

We have to pass the JSON data in the format of  result and count properties from server side to view page. Please refer the below code snippet for further details.

[cshtml]

@(Html.EJ().Grid<ServerSidePaging.OrdersView>("FlatGrid")

        .Datasource(ds=>ds.URL("Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor))       

        .AllowPaging()              

        .Columns(col =>

        {

            -------

            -------

        })

)

[C#]

public ActionResult DataSource(DataManager dm)

        {

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

            DataResult result = new DataResult();

            DataOperations obj = new DataOperations();

            if (dm.Skip != 0)

            {

                DataSource = obj.PerformSkip(DataSource, dm.Skip); // Skip function

            }

            if (dm.Take != 0)

            {

                DataSource = obj.PerformTake(DataSource, dm.Take); // Take function

            }

            result.result = DataSource;

            result.count = OrderRepository.GetAllRecords().Count();

            return Json(result, JsonRequestBehavior.AllowGet);

        }

        public class DataResult

        {

            public IEnumerable result { get; set; }

            public int count { get; set; }

        }

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/directtrac/118429/ServerSidePaging1855417167.zip

Please let us know if you have any concenrs.

Regards,

Ajith R



Rohith
Replied On March 9, 2015 03:23 PM

Hi Ajith,

Thank you. I was able to follow up with that.

Also i have a question related to Adding new item in a grid. I have seen samples where based on the beginedit or add ; some html controls are converted on the fly using  javascript to syncfusion control.

Is there any way I can directly include some syncfusion mvc control inside script template; so that I don't have to call in conversion methods to convert when appropriate edit/ add is called?

<script type="text/html">
    <label>
        Description
       @{ Html.EJ().RTE("description"); }
    </label>
    <label>
</script>

I tried including it like this, but it wasn't properly initialised to Syncfusion controls when clicking on add with inline form template.


Ajith R [Syncfusion]
Replied On March 10, 2015 08:21 AM

Hi Rohith,

Thanks for your update.

Query: Is there any way I can directly include some syncfusion mvc control inside script template; so that I don't have to call in conversion methods to convert when appropriate edit/ add is called?

We are sorry to let you know that it is not feasible to directly include the Syncfusion MVC controls inside the template, because the template doesn’t support with its content. We suggest you to use basic html tags inside the template and render the Syncfusion controls in the actionComplete client side event to achieve your requirement. Please refer the  below code snippet for further details.

<script type="text/x-jsrender" id="InlineTemplate">

    <label>

        Description

        <textarea id="description" rows="10" cols="30" style="width: 740px; height: 100px"></textarea>

    </label>

</script>

<script type="text/javascript">

    function onActionComplete(args) {

        if (args.requestType == "beginedit" || args.requestType == "add") {

            $("#description").ejRTE();

        }

    }

</script>

We have faced some CSS issues while using RTE inside the inline form template edit type, We can overcome this by using the below work around solution.

<style>

  #FlatGrid .e-inlineformedit form div {

        display: block;

    }

</style>

For your convenience we have modified the previous sample and the same can be downloaded from the below link.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118429/ServerSidePaging-1660402792.zip

Please let us know if you have any concerns.

Regards,

Ajith R



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.

;