Kendo Grid Editor Issues

[Mariano]

Hi all , I need some help with some issues in a custom editor I add to a kendo grid . I'm using MCV and the code is the following : 

   @(Html.Kendo().Grid<GridProspectObject>()    
       .Name("GridAllProspects")
       .AutoBind(false) 
        Events(events =>
         {
               events.DataBound("loadtooltipsAllProspectsGrid");
               events.Edit("onEditAssignment");
          })
          .Columns(columns => 
          {
                  columns.Bound(p => p.ProspectName).Title("name");

                  columns.Bound(p => p.Class).Title("class");

                   columns.Bound(p => p.DisplayStatus).Title("assignment status (click to change)").ClientTemplate("#=AssignedTo#").EditorTemplateName("EditorVolunteer").HtmlAttributes(new { @style = "text-align:left" });
          })
         .ToolBar(toolbar => 
        {
               toolbar.Save();        
         })
         .Editable(editable => editable.Mode(GridEditMode.InCell))
         .Pageable()
         .Sortable()
          .Filterable()
         .DataSource(dataSource => dataSource        
             .Ajax()         
             .Batch(true)
            . PageSize(50)
            .Model(model =>
            {
               model.Id(p => p.ProspectId);
               model.Field(p => p.ProspectName).Editable(false);
              model.Field(p => p.Class).Editable(false);
           })
          .Read(read => read.Action("Read_AllProspects", "Projects", new { listId = prospectList.PROSPECT_LIST_ID, pid = Model.PROJECTS_ID }).Type(HttpVerbs.Get))
.          Update(update => update.Action("ChangeAssignment", "Projects"))
         )
        .HtmlAttributes(new { @style = "margin-top:10px" })
   )

The editor template is a kendo comboBox : 

      @(Html.Kendo().ComboBox()
        .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
        .Filter("contains")
        .Placeholder("--select--")
        .DataValueField("Value")
        .DataTextField("Name")
        .Events( events =>
        {
            events.DataBound("dataBound");
            events.Open("openDropDown");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("ReadAsignmentOptions", "Projects").Data("getParentId") )
        )
        .Template("#if( data.Value == '" + Guid.Empty + "' || data.Value == '-1' ) {# " +
            "<span class='specialOption'>#:data.Name #</span>" +
            " #} else {# " +
            "<span>#:data.Name#</span>" +
            " #}#")
     )


Finally the "getParentId()" function is : 

  function getParentId() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        return { prospectId: dataItem.ProspectId, currentAssigned: dataItem.AssignedToId };
    }

The issues I need help with are : 

 

 1) I want to add server filtering to the combobox so I can display a custom message "no results to display" when the text entered in the comboxbox returns no results but when I add the options "ServerFilter(true)" to the comboxbox the function getParentId() throws an error saying "cannot ready property dataItem of null".

 2) When a selection is made from the combobox (the same custom editor) , I want to display that selection with the red corner in the cell visible, so the user can see the change before saving . Right now when I select an option the old value keeps showing in the grid cell and only red icon appears. 

 3) This code works fine in IE  and Google Chrome , but for some reason it does not work in Firefox. When I click on the grid cell to edit it the combobox just spins forever because the request never gets to the controller. Is this a known bug ? 

 

Thanks !

 

 

[Mariano]

Hi, have not heard from anyone so thought I'd reword the situation I'm in.  The app I am building has a Kendo grid with about 5-6 columns of data.  One of the columns a user can click into and edit by selecting from an auto-complete dropdown.  If the user enters a value that does not match any options, I need to display "no results" or something similar.  That was the first issue. The second is that if a user make a valid selection and then clicks out of the row, I want the selection the user made to be visible.  The idea here is that the user can see the change made before clicking on save changes.  At the moment, when the user selects and clicks out, the original selection is displayed (although it does update properly on save changes).

 The 3rd point, and I'm not sure if should be in the same thread, it seems that in Firefox there is an issue using the dropdown inside the column cell.  It just spins and spins, never showing results. 

 Any help on these would be appreciated.

[Boyan Dimitrov]

Hello Mariano,

Straight to questions: 

    1. I would suggest you to use the requestEnd event of the DataSource in order to check how many items are returned from the server. Please refer to the http://dojo.telerik.com/IkuhU example. 

    2. I am not sure that I understand the problem you are facing. Please refer to this http://dojo.telerik.com/aPuni  example that demonstrates how to make the ComboBox widget a custom editor for Category column. Once a new value is selected the model value is changed properly. 

    3. Could you please replicate a problem with the example from point 2? 

Regards,
Boyan Dimitrov
Telerik