Grid Dynamic Columns issue

[Bora]

Hi,

I have one dropdownlist and one grid in my form.I fill grid from dropdownlist change event with script.I initialize the data from page load in the controller.I create dynamic grid with columns.In  dropdownlist item support has diffrent column count and names think about like table.When I selected the item on dropdownlist the grid data will come but columns number will not change how can I change the columns from selected item?.I get the columns and data from controller.Data will come but columns will not come and change.And also the view page(.cshtml) not trigger when grid read the data.How can I solve this issue changing the columns selecting from dropdownlist 

And my view page source codes is here.

Can any one help?

<div id="DropDown">
    @(Html.Kendo().DropDownList()
          .Name("DropDownList")

          .HtmlAttributes(new { style = "width: 350px" })
                    .DataTextField("text")
                    .DataValueField("value")
          .Filter("startswith")
          .OptionLabel("--SELECT--")
          .DataSource(source =>
          {
              source.Custom()
                  .Type("aspnetmvc-ajax")
                  .Transport(transport =>
                  {
                      transport.Read("CodesDropDownList", "GlobalSettings");
                  })
                  .Schema(schema =>
                  {
                      schema.Data("Data")
                          .Total("Total");
                  });
          })

          .Events(e =>
          {
              e.Change("onChange");
          })

    )
</div>

 

<div id="DynmicGrid">
        @(Html.Kendo().Grid<dynamic>()
              .Name("grid")
              .AutoBind(false)
              .Columns(columns =>
              {
                  foreach (DataColumn column in Model.Columns)
                  {
                      var c = columns.Bound(column.ColumnName);
                      c.Title(column.Caption);
                  }
              })
              .Pageable(pager => pager.Refresh(true))
              .Sortable()
              .ToolBar(toolbar => toolbar.Create())
              .Editable(ed => ed.Mode(GridEditMode.PopUp))
              .Selectable(selectable =>
              {
                  selectable.Mode(GridSelectionMode.Single);
                  selectable.Type(GridSelectionType.Row);
              })
              .Navigatable()

              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(model =>
                  {

                      var id = Model.PrimaryKey[0];

                      foreach (var keyColumn in Model.PrimaryKey)
                      {
                          var field = model.Field(keyColumn.ColumnName, keyColumn.DataType);
                          field.Editable(false);
                      }

                      model.Id(id.ColumnName);

                  })
                  .Read(read => read.Action("Read", "GlobalSettings").Data("additionalData"))
                  .Update(update => update.Action("UpdateRecordINGrid", "GlobalSettings"))
                  .Create(read => read.Action("CreateNewRowDataINGrid", "GlobalSettings").Data("additionalData"))

              )
              .Events(e =>
              {

              })

              )
    </div>

var ddlItem;

    function onChange() {
 ddlItem = this.value();
var grid = $("#grid").data("kendoGrid");
grid.dataSource.read();
}
function additionalData(e) {
        return { item: ddlItem }
    }

[Dimo]

Hello Bora,

The Grid datasource and columns configuration cannot be changed with a simple rebind. You need to destroy the Grid and recreate it with the new column and data field (model) settings. Usually, setOptions() is used in such cases, which destroys and recreates the Grid internally.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

http://demos.telerik.com/kendo-ui/grid/persist-state

When the Grid is initialized, the columns are created before the widget is databound, so normally, you should know the columns and data fields in advance. It is possible to use auto-generated columns, but only if all data fields are of string type. In most cases it is better to retrieve the column and model information with a separate request, then create the Grid, and then bind it.

Regards,
Dimo
Telerik