This is a migrated thread and some comments may be shown as answers.

Editing Issues

5 Answers 215 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 04 Sep 2012, 11:19 AM
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'.

5 Answers, 1 is accepted

Sort by
0
AP
Top achievements
Rank 1
Veteran
answered on 06 Sep 2012, 10:02 AM
I've logged two support tickets for issues 1 and 3, I still would like to get the drop down list working.
0
AP
Top achievements
Rank 1
Veteran
answered on 07 Sep 2012, 09:56 AM
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>

0
David A.
Top achievements
Rank 1
answered on 07 Oct 2012, 12:51 AM
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.

0
AP
Top achievements
Rank 1
Veteran
answered on 08 Oct 2012, 08:11 AM
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.

0
David A.
Top achievements
Rank 1
answered on 08 Oct 2012, 07:10 PM
Thanks AP for your response.  It is appreciated.
David A.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
AP
Top achievements
Rank 1
Veteran
David A.
Top achievements
Rank 1
Share this question
or