最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Refresh Kendo UI grid on dropdown selected index change event - Stack Overflow

programmeradmin7浏览0评论

Sorry to ask this mon question again, but I am really not able to understand a few points. So, I have this grid which I have generated using Telerik Kendo UI. It's a very simple grid and I have this bo box on the page, which is outside the grid as an independent control. Of course, again this is a Telerik Kendo UI ComboBox control. Now, I am trying to implement a scenario where when the user changes the selection on Combobox, I want to pass the selection value to the action method and refresh the grid accordingly. I referred to few articles on StackOverflow and I found these useful links,

Kendo UI Grid Refesh on Dropdown Selection

How to refresh the Kendo UI grid

Reloading/refreshing Kendo Grid

All these links have provided this code line which will refresh grid on the client side,

var grid = $("#Product").data("**kendoGrid**");
grid.dataSource.read();

Now what I am unable to understand is what this above bold word 'kendoGrid' stands for i.e. what should be the parameter for the 'data' method?

I have implemented the below piece of code for my application but unfortunately, it's not working. Can anyone please point out what am I missing and how can I fix this code to get it working,

@(Html.Kendo()
        .DropDownList()
        .Name("ddlProject")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
         {
              source.Read(read => { read.Action("GetProjectsForCurrentUser", "Home"); });
         })
         .OptionLabel("Select a Project")
         .HtmlAttributes(new { style = "width:200px;height:20px;" })
                                  .Events(e => e.Change("selectedIndexChanged")))

@Html.Action("LoadDefects")

@(Html.Kendo()
      .Grid(Model)
      .Name("DefectGrid")
      .Columns(columns =>
      {
          columns.Bound(d => d.DefectId).Title("ID").Width("5%");
          columns.Bound(d => d.Title).Title("Title").Width("20%");
          columns.Bound(d => d.Severity).Title("Severity").Width("10%");
          columns.Bound(d => d.Status).Title("Status").Width("10%");
          columns.Bound(d => d.Description).Title("Description").Width("20%");
          columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
          columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
      })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(200))
      .DataSource(dataSource => dataSource
                                          .Ajax()
                                          .Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid"))
                                          .PageSize(20)
                                          .ServerOperation(false))


var dataItem;

function refreshGrid() {
    return {
        selectedProject: dataItem
    };
}

function selectedIndexChanged(e) {
    dataItem = this.dataItem(e.item.index());
    var grid = $("#grid").data("kendoGrid");
    alert(grid);
    grid.dataSource.read();
    return;
}

    [ChildActionOnly]
    public ActionResult LoadDefects(string selectedProject = "")
    {
        var defectList = dBO.GetDefects(2, "2").ToList();
        for (int i = 0; i < 100; i++)
        {
            defectList.Add(defectList[0]);
        }
        return PartialView(defectList);
    }

Sorry to ask this mon question again, but I am really not able to understand a few points. So, I have this grid which I have generated using Telerik Kendo UI. It's a very simple grid and I have this bo box on the page, which is outside the grid as an independent control. Of course, again this is a Telerik Kendo UI ComboBox control. Now, I am trying to implement a scenario where when the user changes the selection on Combobox, I want to pass the selection value to the action method and refresh the grid accordingly. I referred to few articles on StackOverflow and I found these useful links,

Kendo UI Grid Refesh on Dropdown Selection

How to refresh the Kendo UI grid

Reloading/refreshing Kendo Grid

All these links have provided this code line which will refresh grid on the client side,

var grid = $("#Product").data("**kendoGrid**");
grid.dataSource.read();

Now what I am unable to understand is what this above bold word 'kendoGrid' stands for i.e. what should be the parameter for the 'data' method?

I have implemented the below piece of code for my application but unfortunately, it's not working. Can anyone please point out what am I missing and how can I fix this code to get it working,

@(Html.Kendo()
        .DropDownList()
        .Name("ddlProject")
        .DataTextField("Text")
        .DataValueField("Value")
        .DataSource(source =>
         {
              source.Read(read => { read.Action("GetProjectsForCurrentUser", "Home"); });
         })
         .OptionLabel("Select a Project")
         .HtmlAttributes(new { style = "width:200px;height:20px;" })
                                  .Events(e => e.Change("selectedIndexChanged")))

@Html.Action("LoadDefects")

@(Html.Kendo()
      .Grid(Model)
      .Name("DefectGrid")
      .Columns(columns =>
      {
          columns.Bound(d => d.DefectId).Title("ID").Width("5%");
          columns.Bound(d => d.Title).Title("Title").Width("20%");
          columns.Bound(d => d.Severity).Title("Severity").Width("10%");
          columns.Bound(d => d.Status).Title("Status").Width("10%");
          columns.Bound(d => d.Description).Title("Description").Width("20%");
          columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
          columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
      })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(200))
      .DataSource(dataSource => dataSource
                                          .Ajax()
                                          .Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid"))
                                          .PageSize(20)
                                          .ServerOperation(false))


var dataItem;

function refreshGrid() {
    return {
        selectedProject: dataItem
    };
}

function selectedIndexChanged(e) {
    dataItem = this.dataItem(e.item.index());
    var grid = $("#grid").data("kendoGrid");
    alert(grid);
    grid.dataSource.read();
    return;
}

    [ChildActionOnly]
    public ActionResult LoadDefects(string selectedProject = "")
    {
        var defectList = dBO.GetDefects(2, "2").ToList();
        for (int i = 0; i < 100; i++)
        {
            defectList.Add(defectList[0]);
        }
        return PartialView(defectList);
    }
Share Improve this question edited May 14, 2020 at 23:48 Fateme Mirjalili 7427 silver badges20 bronze badges asked Apr 24, 2014 at 16:56 stack underflowstack underflow 3573 gold badges6 silver badges19 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

Since the id of your Kendo UI Grid is DefectGrid so you should use:

var grid = $("#DefectGrid").data("kendoGrid");
grid.dataSource.read();

You should not modify kendoGrid since the Widget that you want to update is a kendoGrid.

  • If you want to access a Kendo ListView you should do: $("#elem_id").data("kendoListView"); (being elem_id the id of the HTML element that includes the ListView).
  • If it is a DropDown List, then you should do $("#elem_id").data("kendoDropDownList");
  • and so on...

When KendoUI creates a Widget, it stores a reference to the object that holds the methods and private data to that Widget in data. This is something not specific of KendoUI but inherited from jQuery (see documentation about jQuery data here).

your Grid read event:

 .Read(read => read.Action("My_Read", "Admin").Data("bodata"))

your change event function:

function selectedIndexChanged() {
                var grid = $("#DefectGrid").data("kendoGrid");

                grid.dataSource.read(); // rebind the Grid's DataSource
            }

And add this function

 function bodata(e) {

                var value = $("#ddlProject").data("kendoDropDownList").value();
                return { ID: value };
                }

Edit : Don't forget reading id in controller

 public ActionResult my_Read([DataSourceRequest] DataSourceRequest request,int ID)
发布评论

评论列表(0)

  1. 暂无评论