This is a migrated thread and some comments may be shown as answers.

paging:remain on same page

5 Answers 382 Views

Grid

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 20 Mar 2013, 01:14 PM

The grid code is looking like this:
@(Html.Kendo().Grid<UCMSPayroll.ViewModels.TallyMeasurementViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Code);
        columns.Bound(p => p.Name);
        columns.Bound(p => p.MaxLength).Title("Max length");
        columns.Bound(p => p.IsActive).ClientTemplate("#=IsActive ? 'da': 'nu'#"); ;
        columns.Bound(p => p.IsHour).ClientTemplate("<input type='checkbox' disabled='true'   name='IsHour' #= IsHour ? checked='checked' : '' # />"); ; ;
        columns.Bound(p => p.Precision);
        columns.Bound(p => p.Priority);
        columns.Bound(p => p.Formula);
        columns.Command(command => { command.Destroy().Text("del"); command.Custom("modifica").Click("doLoading"); }).Width(200);
        columns.Template(x => { }).ClientTemplate("<img src='/Content/Images/edit.png' onclick='doLoading1(this)' title='test'> <a href='javascript: void(0)' class='abutton delete' onclick='deleteRow(this)' title='button delete'></a>");

    })

    .ToolBar(toolBar => toolBar.Template("<a href='javascript: void(0)' class='abutton create' onclick='createRow()' title='button create'></a>"))
    .Pageable()
    .Sortable()
    .Scrollable()

    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.PkTallyMeasurement))
        .Create(update => update.Action("EditingInline_Create", "Home"))
        .Read(read => read.Action("EditingInline_Read", "Home"))
        .Update(update => update.Action("EditingInline_Update", "Home"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Home"))
        .PageSize(5)
    )
    )
<div id="editZone">
</div>
<script>
function doLoading1(e) {

        var grid = $("#Grid").data("kendoGrid");
        var dataitem = grid.dataItem($(e).closest("tr"));
        $("#editZone").hide();
        $('#editZone').load('/Home/CreateEdit/' + dataitem["PkTallyMeasurement"], function () {
            $("#editZone").fadeIn('slow');
        });
    }
</script>
in the controller the read action is looking like this

public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_tallyMeasurementRepository.GetAll().ToDataSourceResult(request));
        }
the action that is used in the .Load function is looking like this:

[HttpGet]
        [OutputCache(Duration=2,VaryByHeader="X-Requested-With",Location=OutputCacheLocation.Server)]
        [RestrictToAjax]
        public ActionResult CreateEdit(int id=0)
        {
               if (id != 0)
                {
                    var model = _tallyMeasurementRepository.GetById(id);
                    return PartialView("_CreateEdit", AutoMapper.Mapper.Map<TallyMeasurement, TallyMeasurementViewModel>(model));
                }
                else
                {
                    return PartialView("_CreateEdit", new TallyMeasurementViewModel());
                }

        }
and the Post action
[HttpPost]

        public ActionResult CreateEdit(TallyMeasurementViewModel viewModel)
        {
            if (viewModel != null)
            {
                if (viewModel.PkTallyMeasurement != 0)
                    _tallyMeasurementRepository.Update(AutoMapper.Mapper.Map<TallyMeasurementViewModel, TallyMeasurement>(viewModel));
                else
                    _tallyMeasurementRepository.Add(AutoMapper.Mapper.Map<TallyMeasurementViewModel, TallyMeasurement>(viewModel));

            }
            return RedirectToAction("Measurementt");
        }

The main ideea is when i press add or edit,below the grid,it appears a html template,with the model values if,we are editing,or empty if we are adding.
And if i am on page 2,and i add a new record,the position is remaining on page 2,until i press the button to submit the new data,after that the grid refreshes and the page become 1,instead it should be still on page 2,or if i have a pagesize of 5,and i add a new data,it should move to the page 3,not repositioning on page 1.And i have to add the data to the server,because the template and the grid are on the same web page,so if i add something new,i want to see it in the grid.

I hope is pretty clear.
Regards,
Daniel