Editing Issues

[AP]

I've got a grid which is bound via AJAX binding, with a pop-up edit form based upon an editortemplate. The form will only allow certain fields to be updated, and the controller takes this into account.

I've encountered several issues

1. I can't display some fields as text (for informational purposes) using the html helper DisplayTextFor - integer fields just display 0, and text fields show nothing. However, these fields display ok, when using the TextBoxFor helper (which I don't want!)
2. When using the Kendo dropdown list, I can get it display the list of values, but it won't display the current value in the edit form - just the first value in the list. I've had to go back to using the standard DropDownListFor helper, which works.

@(Html.Kendo().DropDownListFor(c=>c.HRFlag)

         .Name("HRList")

         .DataTextField("DisplayText")

       .HtmlAttributes(new { value = Model.HRFlag })

         .DataValueField("KeyValue")

         .DataSource(source=>source   

       .Read(read=>read.Action("GetEditHRStatusList", "HR"))))

3. When the update is made, the grid isn't being refreshed to display the correct data - sometimes no changes are shown, and sometimes two records are shown duplicated.  I've checked the update controller method, and the updated data is being passed back OK.

Controller:-

[AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Update([DataSourceRequest] DataSourceRequest request, Models.sysVacancies proposal)

        {

            Models.EVASdBDataContext db = new Models.EVASdBDataContext();

 

            Models.Vacancy originalProposal = (from v in db.Vacancies

                                              where v.ID==proposal.ID

                                              select v).Single();

 

            originalProposal.HRFlag = proposal.HRFlag;

            originalProposal.HRVacancyRef = proposal.HRVacancyRef;

 

            db.SubmitChanges();

            var query = from v in db.sysVacancies

                        where v.FinalReview != null & v.VacancyAuthorisation == "Y"

                        select v;

 

            query = query.OrderByDescending(c => c.SubmissionDate);

 

            return Json(query.ToDataSourceResult(request, ModelState));

 

        }

Grid definition:-

@(Html.Kendo().Grid<EVAS_MVC.Models.sysVacancies>()

.Name("Grid")

.Events(e=>e.Edit("onEdit"))

.Columns(columns=>

    {

        columns.Bound(p => p.ID).Title("").ClientTemplate("<img src='" + @Url.Content("~/Content/") + "#: HRGif #' alt='Proposal Details'").Filterable(false).Sortable(false);

    columns.Bound(p=>p.ID);

    columns.Bound(p => p.SubmissionDate).Title("Submission Date").Format("{0:d}");

    columns.Bound(p => p.PostTitle);

    columns.Bound(p=>p.SubmittingUser).Filterable(false);

    columns.Bound(p => p.DirectorateName).Title("Directorate").Filterable(false);

    columns.Bound(p => p.DGMName).Title("Manager").Filterable(false);

    columns.Bound(p => p.NoOfPosts).Title("Posts").Filterable(false);

    columns.Bound(p => p.WTE).Title("WTE").Filterable(false);

    columns.Bound(p => p.PayScaleDesc).Title("Pay Scale").Filterable(false);

    columns.Bound(p => p.Grade).Title("Grade").Filterable(false);

    columns.Bound(p => p.SmartCard).Title("Smart Card?").Filterable(false);

    columns.Bound(p => p.ID).Title("").ClientTemplate("<a href='http://ReportServer/ProposalDetails_Dev&id=#: ID #&rs:Command=Render&rs:Format=PDF'   target='_blank'><img src='" + @Url.Content("~/Content/Images/pdf.gif") + "' alt='Proposal Details'  style='border-width:0;Margin-left:5px;' /></a> <a href='http://getfile.aspx?DocID=#: JobDescID #'   target='_blank' style='#: JobDescStyle #'><img src='"  + @Url.Content("~/Content/Images/16-message-info.gif") + "' alt='Job Description'  style='border-width:0;Margin-left:5px;' /></a><a href='getfile.aspx?DocID=#: PersSpecID #'   target='_blank' style='#: PersSpecStyle #'><img src='" + @Url.Content("~/Content/Images/16-message-info.gif") + "' alt='Personal Specification'  style='border-width:0;Margin-left:5px;' /></a>  <input type='image' src=' " + @Url.Content("~/Content/Images/16-clock.gif") + "' onclick='showTimes(#: ID#);' style='border-width:0;Margin-left:5px;'/>").Filterable(false).Sortable(false);

    columns.Command(command =>

    {

        command.Edit().Text(" ");

     

    });

      

    })

    .ToolBar(c=>c.Template("<span style='Margin-right:10px;Margin-left:10px;'>Status:</span>" +

         

        Html.Kendo().DropDownList().Name("StatusList").DataTextField("DisplayText").DataValueField("KeyValue")

        .Events(e=>e.Change("onChange"))

        .HtmlAttributes(new { style="width:300px;"})

        .DataSource(source=>source   

             

        .Read(read=>read.Action("GetHRStatusList", "HR"))).ToHtmlString()

         

         

         

         

        ))

        .Editable(editable=>editable

        .Mode(GridEditMode.PopUp))

    .DataSource(dataSource=>dataSource

        .Ajax()

        .Model(m=>m.Id(p=>p.ID))

        .PageSize(20)

        .Read(read=>read.Action("HRVacanciesRead","HR"))

        .Update(update=>update.Action("Update","HR"))

        )

        .Pageable()

        .Sortable()

        .Filterable()

        )

I'm using the latest version of the  Kendo UI Complete for ASP.NET MVC (2012.2.831), which has solved the issue of null fields being shown as 'null'.

[AP]

I've logged two support tickets for issues 1 and 3, I still would like to get the drop down list working.

[AP]

In case it's useful for anyone,  support came back with a solution to displaying data fields as just text.

You can use the MVVM binding :-

<div>

    MyProperty:         

    <span data-bind="text:MyProperty"></span>

</div>

[David A.]

Thanks for the post AP for displaying fields.  Did you get a solution for the other 2 items you asked?  My problem is with a DropDownList and null values.  If the value of the bound field to the DDL is null, an empty item (with no text) is always created even though I have a nullable item in the list.  Plus, if I make an edit to a record that has a null value bound to the DDL, it never posts back to my update controller.

[AP]

David A,

My problem with the drop-down lists was solved by giving the drop-down list the same name as the field, which fixed the data bidning issue. I don't think it has anything to do with your null value issue, though.

Issue 3 was caused due to the Kendo grid handling updates completely differently than the old MVC extensions grid.

The Kendo grid updates itself from the edit form, without the need to get any data from the controller. However, this can cause issues when you have a derived field, only available once the save has been actioned on the database (as I did). In this case, the update controller should return only the record that has been updated, not the entire dataset.

[David A.]

Thanks AP for your response.  It is appreciated.
David A.