Kendo MVC Grid - событие NumericTextBox не запущено - PullRequest
Новая
       30

Kendo MVC Grid - событие NumericTextBox не запущено

0 голосов
/ 02 сентября 2018

У меня есть сетка кендо, которая содержит числовое текстовое поле в каждой строке.

Я хочу обнаруживать события изменения и вращения этих числовых текстовых полей, но события по какой-то причине не запускаются.

Код сетки Кендо, 

@(Html.Kendo().Grid<ContactLenseViewModel>()
    .Name("contactLensesGridOs")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Title("Id").Hidden();
        columns.Bound(p => p.Description).Title("Description");

        columns.Bound(p => p.CostPrice).Title("Cost Price");
        columns.Bound(p => p.SellingPrice).Title("Selling Price");


        //numeric increment
        columns.Bound(p => p.ItemQuantity).ClientTemplate(Html.Kendo().NumericTextBox()
        .Name("clItemQuantityOs_#=Id#")
        .HtmlAttributes(new { value = "#=ItemQuantity #" })
        .Min(0)
        .Max(5)
        .Step(1)
        .Decimals(0)

        .Events(e => e
            .Change("change")
            .Spin("spin")
        )
        .ToClientTemplate().ToHtmlString());


    })
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
        <div class="toolbar">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                        <input type="text" class="form-control" id='FieldFilterOs' placeholder="Search for...">

                    </div>
                </div>                  
            </div>
        </div>
        </text>);

            })
.Events(e =>
{
    e.DataBound("GridBound");
    e.Change("Grid_OnRowSelect");
})
.Pageable()
.Sortable() 
.Scrollable()
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(5)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.Id))

    .Read(read => read.Action("SearchData", "Cls").Data("searchInputsOs"))
)
)

Используются события изменения и вращения, 

<script type="text/javascript">

        $(document).ready(function () {
            //....
        });           


        function change() {

            alert("Change :: " + this.value());
        }

function spin() {
            alert("Spin :: " + this.value());
        }
</script>

Если я использую числовое текстовое поле такого же типа вне сетки кендо, оно работает как положено и запускает вращение и изменяет события при изменениях (выбор числа, ввод числа).

Итак, у меня возник вопрос: почему события изменения, вращения не запускаются, когда числовое текстовое поле находится внутри сетки? Любая помощь будет высоко ценится. Спасибо.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Для этого я не смог найти решение проблемы NumericTextBox, когда он используется в сетке MVC кендо.

В качестве обходного пути я использовал встроенный режим редактирования ячеек сетки кендо и включил функцию редактирования только в столбце ItemQuantity. И поскольку ItemQuantity - это число, в сетке режима редактирования автоматически добавляется поле ввода type = "number", которое помогает достичь того же, что и при использовании NumericTextBox.

Новый код сетки кендо приведен ниже. 

@(Html.Kendo().Grid<ContactLenseViewModel>()
                                    .Name("contactLensesGridOd")
                                    .Columns(columns =>
                                    {
                                        columns.Bound(p => p.Id).Title("Id").Hidden();
                                        columns.Bound(p => p.Description).Title("Description");
                                        columns.Bound(p => p.Daily).Title("Daily").Hidden();
                                        columns.Bound(p => p.Daily).ClientTemplate("#= Daily ? 'Yes' : 'No'#").Title("Daily");
                                        columns.Bound(p => p.Stigimatism).Title("Stigimatism").Hidden();
                                        columns.Bound(p => p.Stigimatism).ClientTemplate("#= Stigimatism ? 'Yes' : 'No'#").Title("Stigimatism");
                                        columns.Bound(p => p.NumberOfLensesInBox).Title("Number Of Lenses In Box");
                                        columns.Bound(p => p.NameOfLenses).Title("Name Of Lenses").Width(125);
                                        columns.Bound(p => p.Brand).Title("Brand");
                                        columns.Bound(p => p.CostPrice).Title("Cost Price");
                                        columns.Bound(p => p.SellingPrice).Title("Selling Price");
                                        columns.Bound(p => p.ItemQuantity).Title("Quantity").HtmlAttributes(new {@class = "numericIncrementer" });

                                        //columns.Bound(p => p.ItemQuantity).ClientTemplate("<input type='number' name='quantity' min='1' max='5'>");

                                        //columns.Bound(p => p.ItemQuantity).ClientTemplate(Html.Kendo().NumericTextBox()
                                        //    .Name("clItemQuantityOs_#=Id#")
                                        //    .HtmlAttributes(new { value = "#=ItemQuantity #" })
                                        //    .Min(0)
                                        //    .Max(5)
                                        //    .Step(1)
                                        //    .Decimals(0)
                                        //    .ToClientTemplate().ToHtmlString());

                                    })
                                    .ToolBar(toolbar =>
                                    {
                                    toolbar.Template(@<text>
                                        <div class="toolbar">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                                                        <input type="text" class="form-control" id='FieldFilterOd' placeholder="Search for...">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </text>);

                                    })
                                    .Events(e =>
                                    {
                                        e.Save("CellChangedRight");
                                        e.DataBound("GridBoundRight");
                                    })
                                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                                    .Pageable(pageable => pageable.Refresh(false))
                                    .Sortable()
                                    .Selectable()
                                    .Scrollable()
                                    .HtmlAttributes(new { style = "height:400px;" })
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(5)
                                        .Events(events => events.Error("error_handler"))
                                        .ServerOperation(false)
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                    })
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Id);
                                        model.Field(p => p.Description).Editable(false);
                                        model.Field(p => p.Daily).Editable(false);
                                        model.Field(p => p.Stigimatism).Editable(false);
                                        model.Field(p => p.NumberOfLensesInBox).Editable(false);
                                        model.Field(p => p.NameOfLenses).Editable(false);
                                        model.Field(p => p.Brand).Editable(false);
                                        model.Field(p => p.CostPrice).Editable(false);
                                        model.Field(p => p.SellingPrice).Editable(false);

                                    })
                                    .Read(read => read.Action("SearchContactLensesUnpaged", "Cls").Data("searchInputsOd"))
                                )
                    )

И я прочитал изменения в значении количества товара из файла JS следующим образом: 

function CellChangedRight(e) {

  if (e.values != null && e.model.Id != null) {
     var grid = e.sender;
     var changedProperty = Object.getOwnPropertyNames(e.values)[0];
     var currentId = e.model.Id;  // Edited columns Id value
     var currentQty = e.values[changedProperty];   // New value inserted by user     

  }    
}

Обратите внимание, что приведенный выше код срабатывает при редактировании ячейки в сетке, поскольку сетка имеет конфигурацию ниже. 

.Events(e =>
      {
           e.Save("CellChangedRight");
           e.DataBound("GridBoundRight");
      })

Надеюсь, что эта работа будет полезна для тех, кто сталкивается с подобной ситуацией.

0 голосов
/ 02 сентября 2018

Я не уверен, в чем именно ваша проблема, но вы можете попробовать создать шаблон Editor вашего NumericText и поместить его внутрь: Shared / EditorTemplates. что-то выглядит так: 

 @Html.Custom_DropdownList("ArticleId", ViewData["articles"] as SelectList, new { @class = "form-control validate[required]  ", style = "width:100%" })

<script>
    $(function () {
        $('#ArticleId').select2();

    });
</script>

и затем вы можете получить доступ к изменениям и поворотам событий, используя идентификатор вашего элемента (внутри скрипта js). наконец, вы можете вызвать свой editorTemplate внутри сетки следующим образом: 

:columns.Bound(p => p.ArticleId).EditorTemplateName("DossierListe").Title("Catégorie").ClientTemplate("#= Article#");
...