kendo mvc grid is splitting in to in to 2 parts on the model binding of a list values

Question

When i try loading data directly into kendo grid by using Html.Kend().Grid(Data) , The UI is getting split into two halves if i put it with in the form tag

Is there any solution to fix this

Answer 1

You can post the code of you grid?

I had this problem too. In my case is the container ID is the same as the Grid Name.

Answer 2

hi william here is the code the grid 


        @(Html.Kendo().Grid<iRPAS.Models.Covers.PolicyCoverDetail>(obj.listdetails)

        .Name("ElectricalAccessories")
                        .HtmlAttributes(new { style = "width: 100%;" })
                //style = "width: 480px; height: 115px;"
.Columns(columns =>
{

    //columns.Bound(p => p.PHIntField1).Width(50).Title("SlNo");
    columns.Bound(p => p.PHVarcharField4).Width(80).Title("Serial No");
    columns.Bound(p => p.PHVarcharField1).Width(100).Title("MakeModel");
    //columns.Bound(p => p.SumInsured).Width(150).ClientFooterTemplate("<Button onclick='ggg()'>GetSum</Button>");
    columns.Bound(p => p.PHVarcharField2).Width(100).Title("SumInsured");
    columns.Bound(p => p.PHVarcharField3).Width(100).Title("Description");
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})
           .ToolBar(toolbar =>
{
    toolbar.Create().Text("Add");

})
.Editable(editable => editable.Mode(GridEditMode.InLine))

.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.Batch(true)
.Model(model =>
    {
        model.Id(p => p.PHIntField1);

    }

)
                                 .Create(update => update.Action("EditingInline_Create", "Policy"))

                                                        .Update(update => update.Action("EditingInline_Update", "Policy"))
                                                .Destroy(update => update.Action("EditingInline_Destroy", "Policy")))

                                                                  .Events(e =>
                                                                  {
                                                                      e.Save("GetSumElectricalAccessories");
                                                                      e.Remove("EndRequest");
                                                                  })



        )