[CLOSED] Ajax partialviewresult grid refresh

I have got a filter panel that a view.

Its looks like filterpanel.cshtml
-------------

Code:

---

@model ContainerCheckModel

@{
    var X = Html.X();
}

@(X.FormPanel()
        .Title("Sorgulama")
        .Width(800)
        .BodyPadding(5)
        .Layout(LayoutType.Column)
        .FieldDefaults(fd =>
        {
            fd.LabelAlign = LabelAlign.Left;
            fd.MsgTarget = MessageTarget.Side;

        })
        .Items(
                    X.TextFieldFor(t => t.QueryValues).Value("MSCURY026529"),
                X.TextFieldFor(t => t.ConsigneeTaxNo),
                X.TextFieldFor(t => t.CustomPerson),
                        X.ComboBoxFor(t => t.Tariff).Items(Session["Tariff"] as Ext.Net.ListItem[]).Value("STANDART"),
                        X.DateFieldFor(t => t.ExitDate).Value(DateTime.Now),
        X.ComboBoxFor(t => t.ExitType).Items(Session["ExitType"] as Ext.Net.ListItem[]).Value("Kapı ?ıkış"),
              X.TextFieldFor(t => t.CustomDeclarationNo)
            )

        .Buttons(
            X.Button()
                .Text("Sorgula")
                        .DirectEvents(de =>
                        {
                            de.Click.Url = "/ContainerCheck/GetValue";
                            de.Click.Method = HttpMethod.POST;
                            de.Click.Delay = 500;
                            de.Click.Failure = "alert('Bir hata oluştu. Tekrar deneyiniz.')";
                            de.Click.EventMask.ShowMask = true;
                        }),
            X.Button()
                .Text("Temizle")
                .OnClientClick("this.up('form').getForm().reset();")
      ))


@Html.X().Container().ID("QueryResultContainer").StyleSpec("display:none;")

---

Controller looks like
----------------------

Code:

---

public PartialViewResult GetValue(ContainerCheckModel entities)
        {
                entities.ContainerChecks = _service.GetByContainer(entities.ExitDate,
                    entities.ExitType, queryValues,
                    entities.ConsigneeTaxNo, entities.Complex).ToList();

            return new PartialViewResult
            {
                ContainerId = "QueryResultContainer",
                ViewName = "QueryResult",
                RenderMode = RenderMode.Replace,
                Model = entities.ContainerChecks,
            };

        }

---

Query Result view result page that contain a grid.
Its look like - queryresult.cshtml

Code:

---

@(Html.X().GridPanel()
              .ID("GridPanel1")
              .Title("Hesaplamaya konu kayıtlar")
              .Width(800)
              .Height(350)
              .Frame(true)
              .Collapsible(true)
              .ForceFit(true)
              .Store(Html.X().Store()
                  .ID("Store1")
                  .DataSource(Model)
                  .Reload()
                  .AutoLoad(true)
                  .Sorters(sorters =>
                      sorters.Add(Html.X().DataSorter()
                          .Property("BillOfLading")
                          .Direction(Ext.Net.SortDirection.ASC)
                          )
                  )
                  .GroupField("ContainerNo")
                  .Model(Html.X().Model()
                      .Fields(
                          new ModelField("BillOfLading"),
                          new ModelField("ContainerNo"),
                          new ModelField("Line"),
                          new ModelField("ContainerType"),
                          new ModelField("DeliveryDate", ModelFieldType.Date, "dd.MM.YYYY hh:mmtt"),
                          new ModelField("DischargeVessel", ModelFieldType.String),
                          new ModelField("UnitNotes", ModelFieldType.String),
                          new ModelField("EventType", ModelFieldType.String),
                          new ModelField("InsertedType", ModelFieldType.String),
                          new ModelField("Complex", ModelFieldType.String),
                          new ModelField("EventId", ModelFieldType.Int),
                          new ModelField("StorageDay", ModelFieldType.Int),
                          new ModelField("ServiceCode", ModelFieldType.String),
                          new ModelField("ServiceName", ModelFieldType.String),
                          new ModelField("KdvRatio", ModelFieldType.Float),
                          new ModelField("StorageDay", ModelFieldType.Int),
                          new ModelField("Quantity", ModelFieldType.Int),
                          new ModelField("PriceUsd", ModelFieldType.Float),
                          new ModelField("PriceKdvUsd", ModelFieldType.Float)
                      )
                  )
              )
              .ColumnModel(
                  Html.X().ColumnFor(Model, m => m.BillOfLading)
                      .ToBuilder<Column.Builder>()
                      .Width(150),

                  Html.X().Column()
                      .Text("Konteyner No")
                      .DataIndex("ContainerNo")
                      .Width(130),

                  Html.X().Column()
                      .Text("Konteyner Tipi")
                      .DataIndex("ContainerType")
                      .Width(150),

                  Html.X().Column()
                      .Text("Line")
                      .DataIndex("Line")
                      .Width(100),

                  Html.X().DateColumn()
                      .Text("?ıkış Tarihi")
                      .DataIndex("DeliveryDate")
                      .Width(130),

                  Html.X().Column()
                      .Text("Tahliye Gemisi")
                      .DataIndex("DischargeVessel")
                      .Width(180),

                  Html.X().Column()
                      .Text("Hareket")
                      .DataIndex("EventType")
                      .Width(180),

                  Html.X().Column()
                      .Text("Eklenme")
                      .DataIndex("InsertedType")
                      .Width(200)
              )
              .TopBar(
                  Html.X().Toolbar()
                      .Items(
                          Html.X().Button()
                              .Text("Add")
                              .Icon(Icon.Add)
                              .Handler("this.up('grid').store.insert(0, new ContainerCheck());"),

                          Html.X().Button()
                              .Text("Delete")
                              .Icon(Icon.Exclamation)
                              .Handler("this.up('grid').deleteSelected(); App.NewEventForm.getForm().reset();")
                      )
              )
              .SelectionModel(
                  Html.X().RowSelectionModel()
                      .Mode(SelectionMode.Single)
                      .Listeners(l =>
                      {
                          l.Select.Handler = "App.NewEventForm.getForm().loadRecord(record);";
                      })
              )
              .Features(
                  Html.X().Grouping()
                      .HideGroupedHeader(true)
                      .GroupHeaderTplString("{columnName}: {name} ({[values.rows.length]} {[values.rows.length > 1 ? \"Items\" : \"Item\"]})")
              )
              .BottomBar(X.PagingToolbar()
                  .Items(
                      X.Button()
                          .Text("Fiyatlandır")
                          .DirectEvents(de =>
                          {
                              de.Click.Url = Url.Action("SetPrice");
                              de.Click.EventMask.ShowMask = true;
                              de.Click.ExtraParams.Add(new Ext.Net.Parameter()
                              {
                                  Name = "selection",
                                  //Value = "App.GridPanel1.getSelectionSubmit().getSelectionModelField().getValue()",
                                  Value = "App.GridPanel1.getRowsValues(false)",
                                  Mode = ParameterMode.Raw
                              });
                          })
                  )))

---

The first time data is coming smoothly. But when I query the second time with another record, the grid can not be renewed.

Thanks for reply.

Burhan

Hi @YilportDeveloper,

Welcome to the Ext.NET forums!

RenderMode.Replace means that the partial view's content replaces the QueryResultContainer container (specified using the ContainerId property). So, when it renders at the second time, there is just no QueryResultContainer container and the partial view is not rendered at all, because of no the holding component.

I suggest to use RenderMode.AddTo instead and also use the ClearContainer option.

Code:

---

return new PartialViewResult
{
    ContainerId = "QueryResultContainer",
    ViewName = "QueryResult",
    RenderMode = RenderMode.AddTo,
    ClearContainer = true,
    Model = entities.ContainerChecks
};

---

Here is a full sample.

View

Code:

---

@{
    var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>
</head>
<body>
    @X.ResourceManager()
   
    @X.Button().Text("Render Partial").DirectClickAction("RenderPartial")

    @X.Container().ID("Container1")
</body>
</html>

---

Partial View

Code:

---

@model IEnumerable<object>

@{
    var X = Html.X();   
}

@(X.GridPanel()
    .Store(X.Store()
        .Model(X.Model().Fields("second"))
        .DataSource(Model)
    )
    .ColumnModel(X.Column().Text("Second").DataIndex("second"))
)

---

Controller Actions

Code:

---

public ActionResult Index()
{
    return this.View();
}

public PartialViewResult RenderPartial()
{
    return new PartialViewResult
    {
        ContainerId = "Container1",
        ViewName = "Partial",
        RenderMode = RenderMode.AddTo,
        ClearContainer = true,
        Model = new object[]
        {
            new
            {
                second = DateTime.Now.Second
            }
        }
    };
}

---