Kendo.grid() in Kendo.window() with route value

6 posts, 0 answers
  1. Amin
    Amin avatar
    9 posts
    Member since:
    Feb 2012

    Posted 07 Oct 2017 Link to this post

    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"  }))))

     

     

     

     

  2. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 10 Oct 2017 Link to this post

    Hi Amin,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Amin
    Amin avatar
    9 posts
    Member since:
    Feb 2012

    Posted 11 Oct 2017 Link to this post

    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

     

     

  4. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 13 Oct 2017 Link to this post

    Hello 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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. priya
    priya avatar
    1 posts
    Member since:
    Feb 2020

    Posted 10 Mar 2020 in reply to Amin Link to this post

    Hello Did u solve this issue

    I am having the same problem

  6. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 12 Mar 2020 Link to this post

    Hi Priya,

    Could you please elaborate on what the exact issue that you are experiencing is? 

     

    Regards,
    Preslav
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top