Kendo Grid with custom DropDown items

[Kelson]

Hi

I want to bind my Kendo Grid with custom dropdown... but the dropdown list items would be binded on demand or selection. not at the  "Index" action result

 

My ViewModel

public class GridShowClaimDetails
{
    public int PkEobDetailId { get; set; }
    public int PkClaimId { get; set; }
    public int FkEncounterId { get; set; }
    public int FkInsId { get; set; }
    public int FkCompanyId { get; set; }
    public int FkLocationId { get; set; }
    public int FkClaimBatchId { get; set; }
    public int PkClaimDetailId { get; set; }
    public bool IsElectronic { get; set; }
    public bool EobCompleted { get; set; }
    public bool ClaimRefiled { get; set; }
    public bool TempClosed { get; set; }

    //Encounter Values
    public DateTime EncounterDate { get; set; }
    public string CodeValue { get; set; }
    public decimal Cost { get; set; }
    public int Unit { get; set; }
    public decimal Charges { get; set; }

    //Patient Details
    public int FkPatientMpId { get; set; }
    public string PayerName { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public int IsFirstClaim { get; set; }

    #region Patient Liablity Section

    public decimal Deductible { get; set; }
    public decimal CoPayment { get; set; }
    public decimal CoInsurance { get; set; }
    public decimal Other { get; set; }

    #endregion


    //Grid Editable Fields
    [Range(0, 99999.99)]
    public decimal RemainingAmt { get; set; }


    [Range(0, 99999.99)]
    public decimal Allowed { get; set; }

    [Range(0, 99999.99)]
    public decimal Payment { get; set; }

    [Range(0, 99999.99)]
    public decimal Adjustment { get; set; }

    [Range(0, 99999.99)]
    public decimal TransferBalance { get; set; }

    //DropDown Properties
    [UIHint("_AdjustmentType")]
    public AdjustmentTypeViewModel AdjustmentType { get; set; }


    [UIHint("_CoverageType")]
    public CoverViewModel CoverageType { get; set; }

    [UIHint("_PatientResponsiblity")]
    public PatientResponsibilityViewModel PatientResponsible { get; set; }

    //Combined Properties
    /// <summary>
    /// FullAddress used to Bind the Grid on Practice Page
    /// </summary>
    public string FullName
    {
        get { return string.Format("{0}, {1}", FirstName, LastName); }
    }

    //Used for Posting the Gird Data.
    public string EncDate
    {
        get { return EncounterDate.ToString(Constants.KDateFormat); }
    }

    public GridShowClaimDetails()
    {
        //Intialize the new AdjustmentType everytime as when binding with MVC Kendo Grid it was getting null.
        //Intializing new at the time of getting ShowClaimDetails-EobController resolved the issue.
        AdjustmentType = new AdjustmentTypeViewModel();
        CoverageType = new CoverViewModel();
        PatientResponsible = new PatientResponsibilityViewModel();
    }

    //Used to Store and Retreive back the DropDown values
    public int FkCoverageTypeId { get; set; }
    public int? FkDisallowedTypId { get; set; }
    public int FkResponsibleTypeId { get; set; }
}


public class AdjustmentTypeViewModel
{

    public Int64? ChargeId { get; set; }
    public string Name { get; set; }
}

public class CoverViewModel
{
    public int? CoverageId { get; set; }
    public string CoverStatus { get; set; }
}

public class PatientResponsibilityViewModel
{
    public int PkInsuranceId { get; set; }
    public string PayerName { get; set; }
}

 

My  Partial View

@using System.Collections
@using Kendo.Mvc.UI

@model Csmr.Model.ViewModel.Billing.PatientResponsibilityViewModel

@(Html.Kendo().DropDownListFor(m => m)
      .Name("patientResponsible")
          .DataValueField("PkInsuranceId")
          .DataTextField("PayerName")
              .BindTo((IEnumerable)ViewData["patientResponsiblity"])
 )

//ShowClaimDetails is called when "Patient is seached"
//Get the Patient Claim Details and Binds it's Patient Responsibility.
public ActionResult ShowClaimDetails(int patientId = 0, int? claimId = null)
{
    var gridClaims = _eobService.GetAllClaimDetails(patientId, claimId);
    if (gridClaims.Count > 0)
    {
        BindPatientResponsiblity(patientId);
    }

    return Json(gridClaims, JsonRequestBehavior.AllowGet);
}



private void BindPatientResponsiblity(int patientId)
{
    var patientResponsiblity = _eobService.GetPatientResponsiblity(patientId);
    ViewData["patientResponsiblity"] = patientResponsiblity;
    ViewData["defaultPatientResponsiblity"] = patientResponsiblity.FirstOrDefault();
}

 

 

My Main Grid

@(Html.Kendo().Grid<GridShowClaimDetails>() // Specify the type of the grid
      .Name("gridClaimData")
      .Columns(columns =>
      {
          columns.Bound(p => p.CoverageType).ClientTemplate("#=CoverageType.CoverStatus#").Title("Coverage. Type").Width(50);
          columns.Bound(p => p.PkClaimId).Title("ClaimNo").Width(40);
          columns.Bound(p => p.PayerName).Title("Insurance").Width(50);
          columns.Bound(p => p.FullName).Width(50);
          columns.Bound(p => p.EncDate).Title("Date").Width(50);
          //.ClientTemplate("#= kendo.toString(kendo.parseDate(EncounterDate), 'MM/dd/yyyy') #");
          columns.Bound(p => p.CodeValue).Title("CPT").Width(40);
          columns.Bound(p => p.Unit).Title("Units").Width(40);
          columns.Bound(p => p.Charges).Title("Bill. Amt($)").Format("{0:0.00}").Width(40);
          columns.Bound(p => p.RemainingAmt).Title("Rem. Amt($)").Format("{0:0.00}").Width(40).Hidden();
          columns.Bound(p => p.Allowed).Title("Allowed($)").Format("{0:0.00}").Width(40);
          //columns.Group(group => group.Title("<strong><center>Patient Liablity</center></strong>")
          //    .Columns(info =>
          //    {
          //        info.Bound(x => x.Deductible).Title("Deducitble($)").Format("{0:0.00}").Width(40);
          //        info.Bound(x => x.CoPayment).Title("Co-Payment($)").Format("{0:0.00}").Width(40);
          //        info.Bound(x => x.CoInsurance).Title("Co-Insurance($)").Format("{0:0.00}").Width(40);
          //        info.Bound(x => x.Other).Title("Other($)").Format("{0:0.00}").Width(40);
          //    }));
          columns.Bound(p => p.Payment).Title("Payment ($)").Format("{0:0.00}").Width(40);
          columns.Bound(p => p.Adjustment).Title("Adjustment ($)").Format("{0:0.00}").Width(40);
          columns.Bound(p => p.AdjustmentType).ClientTemplate("#=AdjustmentType.Name#").Title("Adj.Type").Width(50);
          columns.Bound(p => p.TransferBalance).Title("Trans.Bal ($)").Format("{0:0.00}").Width(40);
          columns.Bound(p => p.PatientResponsible).ClientTemplate("#=PatientResponsible.PayerName#").Title("Pat.Resp").Width(50);
          columns.Command(command => command.Custom("Claim Details").Click("showDetails")).Width(50);
          columns.Bound(p => p.FkEncounterId).Hidden();
          columns.Bound(p => p.PkEobDetailId).Hidden();
          columns.Bound(p => p.FkInsId).Hidden();
          columns.Bound(p => p.FkCompanyId).Hidden();
          columns.Bound(p => p.FkLocationId).Hidden();
          columns.Bound(p => p.FkPatientMpId).Hidden();
          columns.Bound(p => p.FkClaimBatchId).Hidden();
          columns.Bound(p => p.IsElectronic).Hidden();
          columns.Bound(p => p.EobCompleted).Hidden();
          columns.Bound(p => p.ClaimRefiled).Hidden();
          columns.Bound(p => p.TempClosed).Hidden();
          columns.Bound(p => p.IsFirstClaim).Hidden();
          columns.Bound(p => p.PkClaimDetailId).Hidden();
      })
      .Pageable()
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Scrollable(scroll =>
      {
          scroll.Enabled(true);
          scroll.Height(240);
      })
      .Selectable(sel => sel.Type(GridSelectionType.Row))
      .Events(events => events
          .Save("onSave")
        //.Edit("OnGridProcedureEdit")
      )
      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
          .PageSize(20)
          .ServerOperation(false)
                  //.Read(read=>read.Action("EobClaim_Read", "Eob", new { area = "Billing" }).Data("additional_Info"))
          .Model(model =>
          {
              model.Field(p => p.CoverageType).DefaultValue(
                  ViewData["defaultcoverage"] as CoverViewModel);
              model.Id(p => p.PkEobDetailId);
              model.Field(p => p.PkClaimId).Editable(false);
              model.Field(p => p.PayerName).Editable(false);
              model.Field(p => p.Charges).Editable(false);
              model.Field(p => p.RemainingAmt).Editable(false);
              model.Field(p => p.CodeValue).Editable(false);
              model.Field(p => p.Unit).Editable(false);
              model.Field(p => p.Adjustment).Editable(false);
              model.Field(p => p.TransferBalance).Editable(false);
              model.Field(p => p.AdjustmentType).DefaultValue(
                  ViewData["defaultAdjustment"] as AdjustmentTypeViewModel);
              model.Field(p => p.PatientResponsible).DefaultValue(
              ViewData["defaultPatientResponsiblity"] as PatientResponsibilityViewModel);

          })
          .Events(events => events
              .Error("error_handler"))
          .PageSize(10)
      )
)

 

Jquery

//Patient Search on Eob. and Binding Claim Details
$("#txtSearchPatient").kendoAutoComplete({
    minLength: 3,
    dataTextField: "FullName",
    dataValueField: "PkPatientInfoId",
    suggest: true,
    filter: "contains",
    headerTemplate: '<div class="dropdown-header k-widget k-header">' +
        '<span>Full Name</span>' +
        '<span>SSN</span>' +
        '</div>',
    template: '<span class="k-state-default">#:data.FirstName#</span>' +
        '<span class="k-state-default">#: data.Ssn #</span>',
    dataSource: {
        serverFiltering: true,
        transport:
        {
            read:
            {
                url: PatientDetails,
                dataType: "json",
                type: "POST"
            },
            parameterMap: function () {
                return { seachPatient: $("#txtSearchPatient").data("kendoAutoComplete").value() };
            }
        }
    },

    //select event redirects user to the profile of selected patient
    //Redirecting and Binding to ClaimDetails
    //Gets the Claim Details
    //Gets the Patient Responsibility.
    select: function (e) {
        var dataItem = this.dataItem(e.item.index());
        var patientId = dataItem.FkMpId;
        var claimId = "";

        $.ajax({
            url: ShowClaimDetails,
            data: { patientId: patientId, claimId: claimId },
            success: function(data) {
                if (data.length > 0) {
                    //If Patient Search is sucessfull and it contains the claim data specific
                    //Bind to gridClaimData  - on existing Eob
                    var grid = $("#gridClaimData").getKendoGrid();
                    grid.dataSource.data(data);
                    grid.refresh();
                } else {
                    alert("No Claim Exists!!");
                    $("#txtSearchPatient").focus();
                }
            },
            error: function(request, status, error) {
                alert(request.responseText);
            }
        });
    }
});

Attaching Image what exactly I am trying to achieve

 

[Kelson]

some how I was able to bind the DropDown inside the Kendo grid but its not reflecting the updated value

i.e

code

@(Html.Kendo().DropDownListFor(m => m)
      .Name("patientResponsible")
          .DataValueField("PkInsuranceId")
          .DataTextField("PayerName")
              .BindTo((IEnumerable)ViewData["patientResponsiblity"])
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetChildData", "Eob")
            .Data("GetData"))
         ))

My Jquery code

function GetData() {


    var selectedItem = "";
    //getting the grid Data
    var entityGrid = $("#gridClaimData").data("kendoGrid");
    //selecting the selected rows.
    var rows = entityGrid.select();
    rows.each(function (index, row) {
        // selectedItem has EntityVersionId and the rest of your model
         selectedItem = entityGrid.dataItem(row);
    });

    //getting the PatientId from SelectedItem.FkPatientMpId and sending to Eobcontroller [GetChildData  ]
    var patientId = selectedItem.FkPatientMpId;

    //sending PatientId to EobController and Binding the PatientResponsibilty dropdowns
    return {
        patientId: patientId
    };
}

My Controller Code

public JsonResult GetChildData(int patientId)
{
    var patientResponsiblity = _eobService.GetPatientResponsiblity(patientId);

    ViewData["patientResponsiblity"] = patientResponsiblity;

    return Json(patientResponsiblity, JsonRequestBehavior.AllowGet);
}

 

so Dropdown is getting bind correctly but when selecting the dropdown value its still not updating on the grid

it's still showing the old/previous value

check the screenshot

[Boyan Dimitrov]

Hello Kelson,

 

I noticed that in the partial view (custom editor) it is used DropDownListFor and Name is set as well. Please note with the DropDownListFor view helper the name is automatically taken from the model field name. 

 

So in this case I would suggest just to remove the Name definition: 

@(Html.Kendo().DropDownListFor(m => m)
          .DataValueField("PkInsuranceId")
          .DataTextField("PayerName")
              .BindTo((IEnumerable)ViewData["patientResponsiblity"])
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetChildData", "Eob")
            .Data("GetData"))
         ))

 

 

Regards,
Boyan Dimitrov
Telerik