Как выбрать все флажки в Jquery, используя шаблон заголовка кендо?

Я все еще новичок в кодировании и только начал javascript около месяца назад. Извините за непонятный код. Любая помощь будет мне очень признательна. Спасибо..

Итак, у меня есть сетка кендо, которую я использую с бритвой и mvc. Мне также нужно будет связать галочку и изменения строки, чтобы он обновил мой раскрывающийся список (CustomerServiceCustomerCodeList)... но я попытаюсь понять эту часть, когда доберусь туда... Прежде всего, что более важно, мне нужно получить кнопка выбрать все работает правильно. Мои флажки установлены с шаблоном клиента и шаблоном заголовка. Мне нужно выяснить, как выбрать все галочки в моей части шаблона заголовка сетки с помощью jquery. Шаблон клиента проверяет код отдельных ящиков, но не проверяет все. Я пробовал сотни различных подходов и не могу заставить его работать. Пожалуйста помоги.

Сетка кендо:

      
@model IEnumerable<MyEntity.Shipment.ShipmentServiceLevel>
@{

    var userCustomerCode = HttpContext.Current.Session["ServiceLevelCustomerCode"];
}

@(Html.Kendo().Grid(Model)
    .Name("ServiceLevelGrid")
    .Reorderable(reorder => reorder.Columns(true))
    .Columns(columns =>
    {
        columns.Bound(s => s.IsSelected).Template(@<text></text>)
              .HeaderTemplate("<input type='checkbox' class='chkbx k-checkbox' id='selectAllCheck' />") 
              .ClientTemplate("<input type='checkbox' id='eachCheckbox' class='chkbxq k-checkbox' />")
                            .Sortable(false)
                            .Filterable(false)
    .Width(40);

        columns.Bound(s => s.ServiceLevelCode).Title("Code").Width(73);
        columns.Bound(s => s.ServiceLevelDescription);
        columns.Command(command => { command.Edit();}).Width(77);
    })
    .Sortable()
    .Scrollable()
    //.Editable(ed => ed.Mode(GridEditMode.InCell))
    .Selectable(s => s
        .Type(GridSelectionType.Row)
        .Mode(GridSelectionMode.Multiple)
    )
    .PersistSelection(false)
    .HtmlAttributes(new { style = "min-height:280px; height:280px;", id = "ServiceLevelGrid" })
    .DataSource(dataSource =>
    {
        dataSource
            .Ajax()
            //.Events(ev =>
            //{
            //    //ev.Change("CustomServiceLevel_DataSourceChange");
            //    //ev.Edit("CustomServiceLevelEdit");
            //    ev.Save("CustomServiceLevelSave");
            //    //ev.Sync("resyncChildGrid");
            //    //ev.RequestEnd("AddressBook_requestEnd");
            //})
            .Model(model =>
            {
                model.Id(s => s.ServiceLevelCode);
                model.Field(field => field.IsSelected).Editable(true);
                model.Field(field => field.ServiceLevelCode).Editable(false);
                model.Field(field => field.ServiceLevelCustomDescription).Editable(true);
            })
            .Batch(true)
            .Update(update =>
            {
                update.Action("ServiceLevelGrid_Update", "UserAccount", new {Area = "Management", CustomerCode = userCustomerCode});
                //update.Data("ServiceLevel_GetCustomList_Data");
            })
            .Read(read =>
            {
                read.Action("ServiceLevelGrid_Read", "UserAccount", new {Area = "Management", CustomerCode = userCustomerCode});
                //read.Data("ServiceLevel_GetCustomList_Data");
            });
    })
    )

@*.Events(ev => ev.DataBound("CustomServiceLevelGrid_DataBound"))*@

Вот мой Jquery.

        debugger;
    //customer code dropdown list bind to grid 
    function ServiceLevel_GetCustomList_Data(event) {
        var customServiceCustomerCodeList = $("#CustomServiceCustomerCodeList").data("kendoDropDownList"),
            customServiceCustomerCodeList_DataItem = customServiceCustomerCodeList.dataItem(),
            customServiceCustomerCodeList_ItemValue = customServiceCustomerCodeList_DataItem["OrganizationCode"];

        var customServiceDataModel = {
            customerCode: customServiceCustomerCodeList_ItemValue
        }
        return customServiceDataModel;
    };



    //Checkbox grid 
    debugger;
    console.log();
    $('#ServiceLevelGrid').on("click", ".k-checkbox", function (e) {
        grdChkBoxClick(e);
    });

    function grdChkBoxClick(e) {
        var row = $(e.target).closest('tr');
        grdChkBoxUpdate(row);
    };

    };

    //individual check box select
    function grdChkBoxUpdate(row) {
        debugger;
        console.log();
        var grid = $("#ServiceLevelGrid").data("kendoGrid"),
            dataItem = grid.items().length > 0 ? grid.dataItem(row) : undefined,
            isItemChecked = ($("#eachCheckbox", row).prop("checked") === true);
        debugger;
        console.log();
        if (isItemChecked) {
            var isSelected = dataItem.IsSelected;
            dataItem.dirty = true;
            dataItem.IsSelected = true;
            console.log("isSelected: " + isSelected);
        } else {
            dataItem.dirty = true;
            dataItem.IsSelected = false;
        }
    }


    function checkAll(row) {
        $(".chkbxq").each(function () {
            debugger;
            console.log();
            // handle the checkbox logic
            // add logic to check if is checked or not and do proper handling based on that
                     $(this).attr('checked', row);

            // update dataItem to reflect changes.... (update model and dirty flag)
            grdChkBoxUpdate;

            var row = $(e.target).closest('tr');
            grdChkBoxUpdate(row);
           

        });
        }
          function checkAll(row) {
        $(".chkbxq").each(function () {
              debugger;
                      console.log();
              function sRow() {
                 var trLength = $("#ServiceLevelGrid .k - checkbox table tr").length;

                  if (trLength > 0) {
                      $("#ServiceLevelGrid .k - checkbox table tr").each(function(i) {
                          grdChkBoxUpdate(this);
                      });
                  }
              }
              var isSelected = $(".k-checkbox", "#ServiceLevelGrid thead").attr("aria-checked");
              if (isSelected !== "true") {
                  $(".k-checkbox", "#ServiceLevelGrid thead").click();
              }

                               $(this).attr('checked', row);

              var row = $(e.target).closest('tr');
              grdChkBoxUpdate(row);

                  });
    }

0 ответов

Другие вопросы по тегам