This is a migrated thread and some comments may be shown as answers.

Partial View with Kendo Grid

3 Answers 1966 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Leya asked on 16 Feb 2015, 09:35 AM

Hi Team,

I have two kendo grids in two partial views. This is being called in my
Index.chtml . I have set the ServerOperation(false) however when i
click the sort column, the partial view is opening in new window.

I would need the grid to be sorted in client side and the partial view should display inside the main view itself

Please find the below code for one partial view

Partial View

=========

@using Resources.Home

@model IEnumerable<PackageModel>

@(Html.Kendo().Grid(Model)

                  .Name("Grid")

                  .Columns(columns =>

                  {

                      columns.Bound(c => c.ClientName);

                      columns.Bound(c => c.Status).Template(

                        @<text>

                            <div style="width: 98%; background-color:
#fff; height: 5px; border: 1px solid #808080; float:
left;margin-bottom:10px;">

                                <div style="width: @( item.Status)%;
height: 5px; background-color: @(
item.StatusColor);">

                                </div>

                                <div style="float: left;">@( item.StatusValue)</div>

                            </div>

                        </text>);

                      columns.Bound(c =>
c.Vacancies).Template(@<text><img src='~/Assets/images/@(
item.VacancyColor).png' /></text>).HtmlAttributes(new { style =
"text-align:-webkit-center;" });

                      columns.Command(command => command.Custom("
Edit").Click("showDetails").HtmlAttributes(new { @class = "fa
fa-pencil-square-o" })).Title(@HomeResources.Edit_Properties);

                      columns.Command(command =>
command.Custom(string.Empty).Click("showDetails").HtmlAttributes(new {
@class = "fa fa-pencil-square-o" })).Title(@HomeResources.Planning);

                  })

                         .Sortable()

                              .DataSource(source => source

                                  .Ajax()

                                  .ServerOperation(false)))

Part of Index.cshtml

==========

      <div id="ActiveWorkPackage">

            @{ Html.RenderAction("ViewActiveWorkPackages", "Home"); } // Action and controller for the partial view grid data

        </div>

Controller

========

public ActionResult ViewActiveWorkPackages()

        {

            IEnumerable<WorkPackageModel> packages = _workPackageService.GetWorkPackageDetails();

            return this.PartialView(

               "_ActiveWorkPackageView", packages);

        }

3 Answers, 1 is accepted

answered on 08 Dec 2020, 02:57 PM

This posting informed my notion; wanting one page with two distinct models. Many searches and some serious confusion later the answer here is have one page, Index.cshtml, which includes two partials. Works very well. So to help out anyone else seeking a similar answer:

Index.cshtml:

<div id="Attributes">
@{ Html.RenderAction("ViewAttributes", "Home"); }
</div>
<div id="Parts">
@{ Html.RenderAction("ViewParts", "Home"); }
</div>

Controller

public ActionResult Index()
{
return View();
}
public ActionResult ViewParts()
{
SetSession("PartsPayload,AttributesPayload");
return this.PartialView("_PartialParts", PartsPayload);
}
public ActionResult ViewAttributes()
{
SetSession("PartsPayload,AttributesPayload");
return this.PartialView("_PartialAttributeSearch", AttributesPayload);
}

And then two partial cshtml pages...

_PartialAttributeSearch.cshtml

@model List<ERPDriven.Models.DynAttrClass>
@(Html.Kendo().Grid(Model)
.Name("AttrGrid")
.Columns(columns =>
{
columns.Bound(p => p.AttrClassID).Filterable(f => f.Multi(true));
})
.HtmlAttributes(new { style = "height: 150px;" })
.Pageable(pageable => pageable
.Input(true)
.Numeric(false)
.Refresh(true)
)
.Resizable(resize => resize.Columns(true))
.Scrollable(scr => scr.Height(100))
.Filterable()
.Events(events => events.DataBound("DataBound"))
)

and _PartialParts.cshtml

@(Html.Kendo().Grid(Model)
.Name("PartGrid")
.Columns(columns =>
{
columns.Bound(p => p.PartNum).Filterable(f => f.Multi(true));
columns.Bound(p => p.PartNum).Title("Part").Filterable(false).Sortable(false).MinResizableWidth(50)
.ClientTemplate("#if(!(PartNum == '' || PartNum === undefined || PartNum.length == 0)){" +
"#<button type='button' class='BioButton' id='#=uid#'" +
"style = 'width:40px;height:40px;background-position: center;background-size: cover;'> </button>#}#").Visible(true).Width(150);
columns.Bound(p => p.DescriptionFirstLine).Title("Description").Filterable(f => f.Multi(true));
columns.Bound(p => p.FormattedAmount).Title("Price").Sortable(true);
})
.HtmlAttributes(new { style = "height: 400px;" })
.Pageable(pageable => pageable
.Input(true)
.Numeric(false)
.Refresh(true)
)
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable(scr => scr.Height(350))
.Filterable()
.ClientDetailTemplateId("PartDetailTemplate") //This causes action result for the row expand?!
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(r => r.Action("PartRefresh", "Home").Data("PartRefreshParms"))
.Events(events => events.RequestEnd("XataBound"))
)
.Events(events => events.DataBound("DataBound")
.DataBound("RetrieveImages")
.DetailExpand("expandedThis"))
)

With two distinct models. Hope you find this additional information helpful.