Использование собственного окна с формой AJAX для добавления новой строки сетки - PullRequest
Новая
       26

Использование собственного окна с формой AJAX для добавления новой строки сетки

0 голосов
/ 25 апреля 2019

Мне нужно создать более продвинутый метод добавления новых элементов в сетку кендо, поэтому вкратце я повторил следующий пример, так как он делает именно то, что мне нужно: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/window/KendoWindow-Ajax-Form

И он работает простохорошо.Разница лишь в том, что новая строка добавляется в правильное место в сетке, а не сверху, как обычно.Как я могу, используя пример, связанный с, поместить новую строку сверху?

(я думаю, что не нужно показывать мой код здесь, так как он очень похож на код, приведенный в ссылке выше)

Ответы [ 2 ]

0 голосов
/ 07 мая 2019

В конечном итоге я сам нашел решение.Следуя примеру в ссылке, которую я сделал в исходном сообщении, я сделал следующее: во-первых, когда создается новый «заказ», я проверяю, что у модели, возвращенной в методе «Создать» в OrdersDataController, есть идентификатор, когдаМодель добавлена ​​в БД.Поэтому, когда эта часть выполняется в "_OrdersCreate.cshtml": 

@if (Model != null && ViewData.ModelState.IsValid)
{
    <script>
        closeCreatePopup();
    </script>
}

, я отправляю информацию о новом созданном Заказе.Поэтому для этого я изменил «closeCreatePopup ()» для обработки аргументов.Поэтому для получения законченных результатов я просто буду использовать фрагмент кода из моего собственного проекта, ниже приведена моя реализация метода closeCreatePopup (): 

function closeCreateEmployeeWindow(name, rHPersonID, personID, organizationID) {
    if (name !== undefined
        && rHPersonID !== undefined
        && personID !== undefined
        && organizationID !== undefined) {

        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
        grid.dataSource.sync();
    }

    var wnd = $("#createEmployeeModal").data("kendoWindow");
    wnd.refresh({ url: '@Url.Action("CreateEmployee", "Employee", new { Area = "Administration" })' });
    wnd.close();
}

Важная часть такова: 

var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert({ Name: name, RHPersonID: rHPersonID, PersonID: personID, OrganizationID: organizationID });
grid.dataSource.sync();

Что здесь происходит, я использую метод "insert" из сетки и добавляю новый объект.«Вставить» вставляет новый объект в самый верх сетки.Не забудьте вызывать метод «sync» сразу после.

Делая это таким образом, нормальный метод «create», встроенный в сетку, реплицируется.

0 голосов
/ 26 апреля 2019

Итак, если вы хотите добавить строку вверх, я думаю, вы могли бы использовать пользовательский шаблон.Возможно, я не совсем понимаю, что вы делаете, но я постараюсь вам помочь.Вот сетка в коде: `

     @(Html.Kendo().Grid<OrderViewModel>()

                    .Name("grid")
                    .Columns(columns =>
                     {
                      columns.Bound(c => c.Message).EditorTemplateName("MessageEditor");
                     }
                    .DataSource(datasource => datasource

                        .Ajax()

                        .Read(read => read.Action("GetOrders", "OrdersData"))



                )

                )`

Затем напишите шаблон следующим образом: 

<script type="text/x-kendo-template" id="MessageEditor">
    <div class="k-header k-grid-toolbar">

        <div style="display: inline-block; font-size:1.25em; padding: 
        </div>
    </div>

</script>

Ну, это может быть не лучшим решением, однако это единственный способ, которым язнать, как создать пользовательский столбец в сетке Kendo

...