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
Top achievements
Rank 1
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

Sort by
0
Leya
Top achievements
Rank 1
answered on 17 Feb 2015, 06:31 AM
I have found the problem, It was because I have the following code in place

.DataSource(source => source

                                  .Ajax()

                                  .ServerOperation(false)

I have removed it and it worked like charm.
0
Tigga
Top achievements
Rank 1
Iron
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.

0
Anton Mironov
Telerik team
answered on 10 Dec 2020, 01:03 PM

Hi Tigga,

Thank you for sharing the approach below with our community. It looks great and for sure will be helpful for other users.

As the issue is resolved, I will close this thread. The solutions below will be available in the forum and the thread could be opened again if needed.

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Leya
Top achievements
Rank 1
Answers by
Leya
Top achievements
Rank 1
Tigga
Top achievements
Rank 1
Iron
Anton Mironov
Telerik team
Share this question
or