Hi,
I have two grids, second grid (child) shows up in a window by clicking on the custom button in the first grid. the problem are I cannot transfer the required information from parent grid to the child one (for example the id of row ) and the window is initiated once not more (in order to invoke the child grid with new routevalue). I tried session to transfer id, but it does not work properly.
I followed these examples:
http://demos.telerik.com/aspnet-mvc/grid/custom-command
http://www.telerik.com/forums/kendo-grid-on-a-kendo-window
in my code, first grid (parent grid) is here:
@(Html.Kendo().Grid<MainPortal.Models.Tbl_Sample>()
.Name("GridShowSample")
.DataSource(dataSource => dataSource //Configure the Grid data source.
.Ajax() //Specify that Ajax binding is used.
.Model(model => model.Id(p => p.SID))
.PageSize(20)
.Read(read => read.Action("SampleRead", "Mycontroller"))
.Create(create => create.Action("AddNewSample", "Mycontroller", new { model = "#=MainPortal.Models.Tbl_Sample#" }))
.Update(update => update.Action("Edit", "Mycontroller"))
)
.Columns(columns =>
{
columns.Bound(p => p.ID).Width(130);
columns.Bound(p => p.SampleBirthDay).Format("{0:MM/dd/yyyy}").Width(130);
columns.Bound(p => p.SampleSex).ClientTemplate(
"#if (SampleSex == 0) { # Female # } else if (SampleSex == 1) { # Male # } else if (SampleSex == 2) { # Unknown # } #").Filterable(filterable => filterable.UI("genderFilter")).Width(130);
columns.Bound(p => p.SampleStatus).ClientTemplate("#=(SampleStatus == 1) ? 'Alive' : 'Dead'#").Filterable(filterable => filterable.UI("statusFilter")).Width(130);
columns.Bound(p => p.User).ClientTemplate("Unknown User").Width(130);
columns.Bound(p => p.Date).Format("{0:MM/dd/yyyy}").Width(130);
columns.Command(command => { command.Custom("ViewDetails").Text("show history").Click("showHistory"); command.Edit(); command.Custom("confirmdelete").Text("<span class=\"k-icon k-i-delete\" title=\"delete\"></span>").Click("confirmdelete"); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New Sample").HtmlAttributes(new { id = "AddNewSample" });
})
.Filterable(filterable => filterable
.Extra(false).Messages(m => m.Info("Items with value equal to:")
))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddNewSample") )
.Pageable()
.Sortable()
.Scrollable()
.Events(ev => ev.FilterMenuInit("filterMenuInit"))
.HtmlAttributes(new { style = "height:550px" })
)
}
here is the window that call the Partialview of the grid and Javascript function:
@{Html.Kendo().Window()
.Name("SampleHistoryModal")
.Content(@<text>
@{Html.RenderPartial("_PartialSampleHistory")}
</text>)
.Draggable()
.Resizable()
.Visible(false)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
.Render();
}
<script>
function showHistory(e) {
e.preventDefault();
var grid = $("#GridShowSample").data("kendoGrid");
var dataItem = grid.dataItem($(e.target).closest("tr"));
var SID = dataItem.MyData;
$("#SampleHistoryModal").data("kendoWindow").open()
}
</script>
And here is the child grid in partial view:
@(Html.Kendo().Grid
<MainPortal.Models.Tbl_Sample_History_Sel_ID_Result>
()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.ID).Width(130);
columns.Bound(o => o.SampleFName).Width(120);
columns.Bound(o => o.SampleLName).Width(120);
columns.Bound(o => o.User).ClientTemplate("Unknown User").Width(130);
columns.Bound(o => o.Date).Format("{0:MM/dd/yyyy}").Width(130);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(o => o.PhenotypeSID))
.Read(read => read.Action("SampleHistoryRead", "MyController",new { ID = "1234" }))))
5 Answers, 1 is accepted
A similar to the described functionality is available in the "Add Custom Column Popup Editor" how to article:
Having said that, could you please check the above article and let me know if the approach outlined there works for your project?
Regards,
Preslav
Progress Telerik
Rank 1
Dear Preslav,
Thank you very much for reply. the link that you send me is useful but unfortunately it doesn't solve my issue. to be clear about my issue I explain it again:
I have a grid and based on the information on the grid, when a user click on the "Show info" for each raw, I would like to open a popup windows to show extra information related to that specific raw. one of the things that I would like to show is the list and I would like to show it in a grid. I query the data based on the Unique ID from the master grid but I am not able to transfer it to the popup windows. As I said before I used session but when I pass it to my data-source loader It doesn't recognize the "Session[ID]"
.DataSource(dataSource => dataSource .Ajax() .Model(model => model.Id(o => o.PhenotypeSID)) .Read(read => read.Action("SampleHistoryRead", "MyController",new { ID = Session["ID"] }))))
So I would like to know what is the best way to transfer the ID from the 1st grid to the 2nd grid which exists on the popup window and load the data based on that ID.
Kind regards
Amin
Thank you for elaborating on the scenario.
To achieve the desired behavior, I would suggest using the LoadContentFrom parameter of the window to set the Url, which will be requested to return the content.
For example:
.LoadContentFrom("MyPartialView", "Grid")In the showHistory function use the refresh method and its data parameter to use the desired ID.
wnd.refresh({ data: {customerID: dataItem.customerID}})In the grid controller, create a new ActionResult method that will return the partial.
public ActionResult MyPartialView(int? customerID){ return PartialView(customerID);}Use the Model in the relevant partial view CSHTML file to load the child grid content.
I hope this helps.
Regards,
Preslav
Progress Telerik
Rank 1
Hello Did u solve this issue
I am having the same problem
Hi Priya,
Could you please elaborate on what the exact issue that you are experiencing is?
Regards,
Preslav
Progress Telerik