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
2 Answers
Reset to default 5Since 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");
(beingelem_id
theid
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)