Grid and MVC server side paging

[Rohith]

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]

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]

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]

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