Kendo Grid doesn't work in Partial View

[Zann]

Hi,

i try to load a kendo grid in partial view. But i found that edit from inline is not able to work even it was fine at a normal page in this case, i try to copy the same code in index page, grid was working fine.

so i have already upload my test codes, please help to find out what problem exactly it is, thanks!

[Daniel]

Hello Zann,

The problem occurs because a complete view is being loaded with Ajax instead of a partial one. Using a PartialViewResult instead of a ViewResult should resolve the problem e.g.

public ActionResult GetServerTemplate()
{
    return PartialView("ServerTemplate");
}

I attached the modified project. Kind regards,
Daniel
the Telerik team

[Greg]

Hi,

I have the same issue. I tried to load kendo grid in partial view and the inline or even the pop up edit doesn't work.

Here is my code:
 partial view :  _Descriptor

@(Html.Kendo().Grid<.Models.CitationDescriptor>()
.Name("gridDes")

.Columns(columns =>
{
columns.Bound(p => p.CitationDescriptorID).Hidden(true);
 columns.Bound(p => p.Descriptors);
 columns.Command(command => { command.Edit();}).Width(372);
columns.Command(command => { command.Destroy(); }).Width(372);
 })

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))
.Resizable(resize => resize.Columns(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
 .DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.CitationDescriptorID);
 
}

)

.Create("InsertDescriptors", "CitationDescriptors", new { id = @Model.CitationID })
.Read("GetDescriptors", "CitationDescriptors", new { id = @Model.CitationID })
.Update("EditDescriptors", "CitationDescriptors")
.Destroy("DeleteDescriptors", "CitationDescriptors")
 
)
)

 Action Results:

public ActionResult Descriptors(int id)
{
CitationDescriptor descriptors = new CitationDescriptor();
descriptors.CitationID = id;
return PartialView("_descriptors", descriptors);

}

public ActionResult EditDescriptors([DataSourceRequest] DataSourceRequest request, CitationDescriptor citationDescriptor)
{
 int Id = citationDescriptor.CitationDescriptorID;
 if (citationDescriptor != null && ModelState.IsValid)
{
var target = Db.Descriptors.SingleOrDefault(d => d.CitationDescriptorID == Id);
if (target != null)
{
TryUpdateModel(citationDescriptor);
 Db.SaveChanges();
}
}
return Json(ModelState.ToDataSourceResult());
 }
 
the grid works fine with the main view.

[Daniel]

Hello Greg,

The code looks correct. Could you provide a sample project that reproduces the problem so I can investigate further?

Regards,
Daniel
the Telerik team

[Jose]

Hi have the same problem , i need to use kendo grid inside the partial view in asp.net core razor pages:

here's my code:

@model IEnumerable<usp_ww_order_detailsResult>



<h3 class="text-center">Order details for order number: @TempData["message"] </h3>

<hr>

@(Html.Kendo().Grid(Model)
          .Name("GridTest")
          .Columns(columns =>
          {
              columns.Bound(p => p.order_number);
          })
)

 

[Alexander]

Hi Jose,

Upon my initial observations, I noticed that the Grid declaration is configured for a local binding scenario. Generally, when configured for local binding the Grid's state will be read-only, as no CRUD operations will be specified.

Thus, if conventional CRUD operations need to be set, I would recommend reviewing the following resource that you might find helpful in this regard:

• Ajax Binding (Documentation)

Additionally, when bound locally, it is important to mention that the DataSource configuration should be incorporated within the boundaries of the component as well. Similar to how is outlined in step "3" in the following documentation:

• Local Binding (Documentation)

If this does not help, would it be possible for you to share more details regarding your scenario? For example, if there are any server-side or client-side errors persevering on your side that may be causing problematic behavior.