List property of model always NULL

8 posts, 1 answers
  1. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 21 Jun Link to this post

    Hi all,

    I've got a slight problem when displaying data from my model. My model is simple and straight forward:

    01.public class TableSchema
    02.{
    03.    public TableSchema()
    04.    {
    05.        Columns = new List<ColumnDescription>();
    06.    }
    07. 
    08.    public string TableName { get; set; }
    09.    public List<ColumnDescription> Columns { get; set; }
    10.}

     

    I'm displaying some of the data in a Kendo Grid which is working without problem. The grid is displaying fine. I want to use a custom editor template to open a popup which displays the "TableName" property and another grid which contains the "List<ColumnDescription> Columns" property. Here is the code for my main grid which displays the TableSchema model:

    01.@model IEnumerable<ServiorInventaire.Shared.Models.Dynamic.TableSchema>
    02. 
    03.@(Html.Kendo().Grid(Model)
    04.    .Name("ItemTypes")
    05.    .NoRecords(Language.ItemsGridNoRecords)
    06.    .Columns(columns =>
    07.    {
    08.        columns.Bound(p => p.TableName).Title(Language.ItemsGridTableName).Width(250);
    09.        columns.Command(command => { command.Edit().Text(Language.Edit).UpdateText(Language.Save).CancelText(Language.Cancel); }).Width(250);
    10.    })
    11.    .Resizable(resizing => resizing.Columns(true))
    12.    .Reorderable(reordering => reordering.Columns(true))
    13.    .ToolBar(toolbar =>
    14.    {
    15.        toolbar.Create().Text(Language.Create);
    16.    })
    17.    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("TableSchema").Window(w => w.Title(Language.ItemsPageTitle)))
    18.    .HtmlAttributes(new { style = "height: 550px;" })
    19.    .Pageable(pageable => pageable
    20.        .Input(true)
    21.        .Numeric(true)
    22.        .Info(true)
    23.        .PreviousNext(true)
    24.        .Refresh(true)
    25.        .PageSizes(false)
    26.    )
    27.    .Sortable()
    28.    .Scrollable(scr => scr.Height(430))
    29.    .Filterable()
    30.    .DataSource(dataSource => dataSource
    31.        .Ajax()
    32.        .PageSize(20)
    33.        .ServerOperation(false)
    34.        .Model(model => model.Id(p => p.TableName))
    35.        .Create(create => create.Action("EditingPopup_Create", "Grid"))
    36.        .Update(update => update.Action("EditingPopup_Update", "Grid"))
    37.     )
    38.)

     

    And finally, there is the code for my custom editor template:

    01.@model ServiorInventaire.Shared.Models.Dynamic.TableSchema
    02. 
    03.<div class="editor-label">
    04.    @Html.LabelFor(model => model.TableName)
    05.</div>
    06.<div class="editor-field">
    07.    @Html.Kendo().TextBoxFor(model => model.TableName)
    08.</div>
    09. 
    10.<div class="editor-label">
    11.    @Html.LabelFor(model => model.Columns)
    12.</div>
    13.<div class="editor-field">
    14.    @(Html.Kendo().Grid(Model.Columns)
    15.        .Name("Columns")
    16.        .NoRecords(Language.ItemsGridNoRecords)
    17.        .Columns(columns =>
    18.        {
    19.            columns.Bound(p => p.ColumnName).Title(Language.ColumnsGridColumnName).Width(250);
    20.            columns.Bound(p => p.Type).Title(Language.ColumnsGridType).Width(250);
    21.            columns.Command(command => { command.Edit().Text(Language.Edit).UpdateText(Language.Save).CancelText(Language.Cancel); }).Width(250);
    22.        })
    23.        .ToolBar(toolbar =>
    24.        {
    25.            toolbar.Create().Text(Language.Create);
    26.        })
    27.        .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title(Language.ItemsPageTitle)))
    28.        .DataSource(dataSource => dataSource
    29.            .Ajax()
    30.            .Model(m =>
    31.            {
    32.                m.Id(p => p.ColumnName);
    33.            })
    34.            .PageSize(20)
    35.            .ServerOperation(false)
    36.            .Create(create => create.Action("EditingPopup_Create", "Grid"))
    37.            .Update(update => update.Action("EditingPopup_Update", "Grid"))
    38.         )
    39.    )
    40.</div>

     

    My problem now is that if I click "Edit" on the main grid to edit a "TableSchema", the popup shows up. The data for the TableName is showing without problem but the grid for the "Model.Columns" property is empty or even "null". Note, there is data in my database for the TableSchema and the Columns.

    Do you know the problem and could anybody help me?

    Thank you very much,

    Sascha

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 23 Jun Link to this post

    Hi Claude,

    I have examined the code and it seems that the Grids are using server-side binding. However, the DataSource is configured for Ajax-binding. Note that mixing the two types of binding can result in unexpected behavior. 

    If you would like to use server binding with editing you need to ensure that the Grid components are configured as described in the article below:



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 23 Jun in reply to Viktor Tachev Link to this post

    Hi Voktor,

    Thank you for your answer. What if I would like to use AJAX? What am I doing wrong?

    Thank you very much,

    Sascha

  4. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 26 Jun Link to this post

    Hi Sascha,

    If you would like to use Ajax binding for the Grid you should configure Read method for the DataSource of the Grid. This method will be called when requesting data. For CRUD operations you would also need to set Create, Update, Destroy actions.

    Furthermore, you should not pass the Model directly to the Grid in this scenario. You just need to specify the type that the Grid component will be bound to. If you would like more information on Ajax binding you would find the resources below interesting:



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 27 Jun in reply to Viktor Tachev Link to this post

    Hi Viktor,

    Thank you for your help. I think I got it now. I did exactly what you told me to do. Created two read methods on my controller and passed them into the DataSource.

    The other thing I had to figure out was how to pass the "foreign key" from my first grid to my second grid on the editor template. I used a JavaScript method which I appended to the Read method via the "Data" keyword like this:

    .Read(read => read.Action("ReadColumns", "Item").Data("getTableName"))

     

    And here is the JavaScript method:

    function getTableName() {
        var uid = $("#Columns").closest("[data-uid]").data("uid");
        var parentGrid = $("#ItemTypes").data("kendoGrid");
        var model = parentGrid.dataSource.getByUid(uid);
        return { itemType: model.TableName };
    }

     

    The method on my controller has a second input variable named after the return variable from the JavaScript method:

    public ActionResult ReadColumns([DataSourceRequest] DataSourceRequest request, string itemType)

     

    I hope that this is the way to do this?

    Thank you,

    Sascha

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 28 Jun Link to this post

    Hi Sascha,

    You are absolutely right. This is the correct way for binding the Grid and passing additional data when using Ajax binding. 

    I am glad that the provided suggestions were helpful to you. In case you have additional queries let me know.

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Claude
    Claude avatar
    10 posts
    Member since:
    Jun 2017

    Posted 28 Jun in reply to Viktor Tachev Link to this post

    Hi Viktor,

    Thank you very much for your feedback. I have indeed another question, but I already opened another thread for that and I think I found a bug but I'm not sure yet.

    Thank you,
    Sascha

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 29 Jun Link to this post

    Hi Sascha,

    In order to keep the information in the thread consistent I suggest we continue the conversation in the other thread you have submitted. 

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top