Kendo Grid inline editing with selected row together doesn't work properly

Question

My kendo Grid has both selected row and inline edit feature. When i click edit button without selecting a row it shows the change i am doing.

But if i select a row first then try to edit it hides all the value.

My code of the grid

@(Html.Kendo().Grid<VmSegment>()
      .Name("VmSegment")
      .Events(e => e.Change("onChange"))
      .Columns(columns =>
      {
          columns.Group(group => group
              .HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"})
              .Title("Chainage (m)")
              .Columns(info =>
              {
                  info.Bound(p => p.FromChain).HtmlAttributes(new {style = "text-align:right"}).Title("From").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(40);
                  info.Bound(p => p.ToChain).HtmlAttributes(new {style = "text-align:right"}).Title("To").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(40);
              })
              );
          columns.Template(p => { }).Title("Segment Length").HtmlAttributes(new {style = "text-align:right"}).HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).ClientTemplate("#=calculate(data)#").Width(60);

          columns.Bound(p => p.SurfaceType).ClientTemplate("#=SurfaceType.surfaceTypeName#").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Title("Surface Type").Width(55);

          columns.Group(group => group
              .HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"})
              .Title("Average Width (m)")
              .Columns(info =>
              {
                  info.Bound(p => p.AvgCargW).HtmlAttributes(new {style = "text-align:right"}).Title("Carriage").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(70);
                  info.Bound(p => p.AvgShoulW_R).HtmlAttributes(new {style = "text-align:right"}).Title("Shoulder Right").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(70);
                  info.Bound(p => p.AvgShoulW_L).HtmlAttributes(new {style = "text-align:right"}).Title("Shoulder Left").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(70);
              })
              );
          columns.Group(group => group
              .HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"})
              .Title("Condition")
              .Columns(info =>
              {
                  info.Bound(p => p.SlopeCondition).ClientTemplate("#=SlopeCondition.Name#").Title("Slope").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(60);
                  info.Bound(p => p.ShoulderCondition).ClientTemplate("#=ShoulderCondition.Name#").Title("Shoulder").HeaderHtmlAttributes(new {style = "text-align:center;font-weight:bold;vertical-align: middle"}).Width(60);
              })
              );
          columns.Command(command =>
          {
              command.Edit().HtmlAttributes(new {style = "text-align:center", @id = "Edit", title = "Edit"}).Text(" ");
              command.Destroy().HtmlAttributes(new {@id = "rm", title = "Delete"}).Text(" ");
              command.Custom("ViewMap").Click("showMap").HtmlAttributes(new {@class = "", @id = "", title = "Map"}).Text(" ");
              command.Custom("ViewDetails").Click("showDetails").HtmlAttributes(new {@class = "", @id = "target3", title = "Details"}).Text(" ");
              command.Custom("ViewPhoto").Click("showPhoto").HtmlAttributes(new {@class = "", @id = "", title = "Photo"}).Text(" ");
          }).Width(120);
      })
      .ToolBar(toolBar => toolBar.Template("<a style = 'text-align:center;font-weight:bold;hover' title='First select a row.' class='k-button k-button-icontext add'></span>+Add New Record</a>")) // The "create" command adds new data items
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Selectable(selectable => selectable
                .Type(GridSelectionType.Row))  
      //.Sortable()
      .Pageable(pageable => pageable.Refresh(true))
      .ColumnMenu()
      .DataSource(dataSource => dataSource          
          .Ajax()
          .PageSize(10)

          .Events(e =>
          {
              //e.Error("onError");
              e.Sync("KendoGridRefresh");
              // e.Change("onChange");
              //e.Change("onChange");
          })
          .Model(model =>
          {
              model.Id(p => p.Id);

              model.Field(p => p.FromChain).Editable(false);

              model.Field(p => p.SurfaceType).DefaultValue(
                  ViewData["defaultSurfaceType"] as VmSurfaceType);

              model.Field(p => p.SlopeCondition).DefaultValue(
                  ViewData["defaultconditionSlope"] as VmCondition);

              model.Field(p => p.ShoulderCondition).DefaultValue(
                  ViewData["defaultconditionShoulder"] as VmConditionShoulder);
          })
          .Read(r => r.Action("Read", "Segment"))
          .Create(r => r.Action("Create", "Segment"))
          .Update(r => r.Action("Update", "Segment"))
          .Destroy(r => r.Action("Delete", "Segment"))
      )
      .Events(ev => ev.DataBound("resetRowNumber").DataBound("onRowBound"))
      .Events(ev => ev.Cancel("onCancel"))


      )

Answer 1

Actually the problem is when I select any row and go for edit option the background color of that row turn to white color. As a result, it doesn't display the data. Just change the .k-state-selected class background color.