Kendo grid column with client template showing null after row insert or update

5 posts, 0 answers
  1. Ashish
    Ashish avatar
    14 posts
    Member since:
    Dec 2018

    Posted 15 Jan Link to this post

    I have a grid that looks like this:

    @(Html.Kendo()
    .Grid<ProjectName.TerminalOutOfState>()
    .Name("manageTOSSqlRecordsGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.TerminalOutOfStateID).Hidden();
        columns.Bound(c => c.TerminalCompanyID).Title("Terminal ID").Width(60);
        columns.Bound(c => c.CompanyID).Title("Region").ClientTemplate("#=CompanyName#").Width(40);
        columns.Command(cmd =>
        {
            cmd.Edit();
            cmd.Destroy();
            cmd.Custom("Save").Visible("showSaveCommand").Click("saveTerminalRow");
        }).Title("Action").Width(80);
    })
    .ToolBar(tbr =>
    {
        tbr.Create();
        tbr.Custom().Text("Load the table");
    })
    .Editable(edt => edt.Mode(GridEditMode.PopUp).TemplateName("TOoSTemplate").CreateAt(GridInsertRowPosition.Top))
    .DataSource(dataSrc => dataSrc
        .Ajax()
        .ServerOperation(true)
        .PageSize(15)
        .Model(mdl => mdl.Id(column => column.TerminalOutOfStateID))
        .Create(update => update.Action("UpsertTerminalOoSRecordAsync", "Configuration"))
        //omitted for brevity
    )
    .AutoBind(false)
    )

     

    My focus here is on the Region column. The kind of data it gets looks like this:

    CompanyID: 1
    Instead of showing just 1, I pass the Name for that Id on a variable called CompanyName and show it using ClientTemplate.

    It all works and looks good until I either edit the row or add a new row and it shows null.
    After I reload the table, then it shows the correct value.

    Please look at my attached screenshots to get a better picture.

     

  2. Ashish
    Ashish avatar
    14 posts
    Member since:
    Dec 2018

    Posted 15 Jan in reply to Ashish Link to this post

    Posting the TOosTemplate.cshtml (grid edit template file) contents here if that helps with troubleshooting:

    @model Project.TerminalOutOfState
     
    @Html.HiddenFor(x => x.TerminalOutOfStateID)
    @Html.HiddenFor(x => x.CompanyName)
     
    <div class="row">
        <div class="form-group col-sm-12">
            <div class="col-sm-5">
                <label for="TerminalCompanyID"><b>Terminal Company ID</b></label>
            </div>
            <div class="col-sm-7">
                @(Html.Kendo().TextBoxFor(x => Model.TerminalCompanyID)
                )
            </div>
        </div>
     
        <div class="form-group col-sm-12">
            <div class="col-sm-5">
                <label for="CompanyID"><b>Company</b></label>
            </div>
            <div class="col-sm-7">
                @(Html.Kendo().DropDownListFor(x => x.CompanyID)
                    .OptionLabel("Select Company")
                    .DataValueField("CompanyID")
                    .DataTextField("CompanyName")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetCompaniesAsync", "Configuration");
                        });
                    })
                 )
            </div>
        </div>
    </div>
  3. Tsvetomir
    Admin
    Tsvetomir avatar
    845 posts

    Posted 20 Jan Link to this post

    Hi Ashish,

    When the user adds a new row to the grid, it is expected to see the value null populated for the respective column. This is due to the fact that there is no value or editor for the "CompanyName" column.

    However, in edit mode, it is not expected to see the null value. Perhaps, the server-side logic does not return the full data item, hence, if the CompanyName value is not present in the response, it will not be shown in the grid. Can you share the code snippets for the Create/Update ActionMethod as well as the response generated? The response can be observed in the Network tab of the devtools. 

    Looking forward to your reply.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  4. Ashish
    Ashish avatar
    14 posts
    Member since:
    Dec 2018

    Posted 22 Jan in reply to Tsvetomir Link to this post

    Hi Tsvetomir,

    Thank you for the response.

    The server was indeed returning the full data but somehow it was not showing up. This is how I fixed it:

    I removed the old view model properties, i.e.CompanyID and CompanyName to create a combined view model for that column.

    public class CompanyViewModel
    {
        public int CompanyID { get; set; }
        public string CompanyName { get; set; }
    }

     

    Grid's View model looks like this now:

    public class TerminalOutOfState
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int TerminalOutOfStateID { get; set; }
        [Key]
        public string TerminalCompanyID { get; set; }
     
      //Other properties omitted for brevity
        public CompanyViewModel Region { get; set; }
    }

     

    Used the new view model in the grid column like this:

    .Columns(columns =>
    {
        columns.Bound(c => c.TerminalOutOfStateID).Hidden();
        columns.Bound(c => c.TerminalCompanyID).Title("Terminal ID").Width(60);
         
        columns.Bound(c => c.Region).Title("Region").Width(40).ClientTemplate("#= Region.CompanyName #");
    })

     

    Finally the GetCompaniesAsync method:

    public async Task<IActionResult> GetCompaniesAsync()
    {
        var companies = (await _someRepository.GetCompaniesAsync())
                        .Select(x => new RegionViewModel { RegionName = x.CompanyName, RegionID = x.CompanyID })
                        .ToList();
        return Json(companies);
    }

     

    Works great now!

  5. Ashish
    Ashish avatar
    14 posts
    Member since:
    Dec 2018

    Posted 22 Jan in reply to Tsvetomir Link to this post

    I posted this to my stackoverflow as well.
Back to Top