Grid popup edit template with dropdownlist with no FK

[Derek]

Hi Guys

I have a grid with popup edit template with a dropdownlist that has to be populated based on a column value from the grid which is not the FK one.

My problem is that the model is empty at the time of populating the dropdown. Could you please help me how to achieve this?

here is the edit template:

@using PartnerLink.Models
@model AssignmentDocTypesExt

@{
    Layout = "~/Views/Shared/_EmptyLayout.cshtml";
    ViewBag.Title = "Customer Document - "+Model.documentDescription;
    var currentUserId = ((TBL_USER)(ViewBag.LoggedUser)).USER_ID;
    bool isAdmin = ((TBL_USER)(ViewBag.LoggedUser)).LEAD_PROVIDER_ID == null;

    EntitiesModel entities = new EntitiesModel();
    var DocumentStatusList = entities.TBL_DOCUMENT_TYPE_Status
                    .Where(d => !d.OUT_OF_USE && d.DOCUMENT_TYPE_ID == Model.DOCUMENT_TYPE_ID)
                    .Select(d => new
                    {
                        d.DOCUMENT_TYPE_STATUS_ID,
                        d.DOCUMENT_TYPE_STATUS_DESCRIPTION

                    }
                     ).ToList();

}
@Html.HiddenFor(model => model.ASSIGNMENT_DOCUMENT_TYPE_ID)
@Html.HiddenFor(model => model.DOCUMENT_TYPE_ID)
<div class="grid-popup">
    @Html.LabelFor(m=>m.DOCUMENT_TYPE_STATUS_ID,"Type Status")
    @Html.Kendo().DropDownListFor(m => m.DOCUMENT_TYPE_STATUS_ID).Name("DOCUMENT_TYPE_STATUS_ID").BindTo(DocumentStatusList).DataValueField("DOCUMENT_TYPE_STATUS_ID").DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")
    <br />
    @Html.Kendo().CheckBoxFor(m => m.COMPLETE_FLAG).Name("COMPLETE_FLAG").Label("Complete")
</div>
<br />
<div class="grid-popup">

    @(Html.Kendo().Upload()
            .Name("files")
            .Messages(m => m.Select("Select File"))
            .Async(a => a
            .Save("ClientDocUpload", "Home")
            .AutoUpload(true)
            )
            .Files(files =>
            {
                var fs = new List<CreditCheckFileToParse>();
                foreach (var f in fs)
                {
                    files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
                }
            })

            .Events(c => c
               .Success(@<text>
                    function() {
                    $(".k-grid-update").trigger('click');
                    }
                    </text>)
               .Error(@<text>
                    function() {
                    alert("File Upload Failed");
                    }
                    </text>)
                .Upload(@<text>
                        function(e) {
                        e.data = { id: $("#ASSIGNMENT_DOCUMENT_TYPE_ID").val() };
                        }
                </text>)
                        )


    )
</div>

<script>
    function onSuccessfilesClientDocs(e)
    {
        $(".k-grid-update").trigger('click');
    }

    function onErrorfilesClientDocs(e) {
        alert("Failed to upload file");
    }
</script>

here is the main grid:

@using PartnerLink.Models
@using Telerik.OpenAccess.SPI
@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>

<div style="height:500px">
    @(Html.Kendo().Grid<AssignmentDocTypesExt>()
        .Name("gridCaseDocuments")
        .Columns(columns =>
        {
            columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);
            columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);
            columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);
            columns.Bound(p => p.CREDITOR_ID).Hidden(true);
            columns.Bound(p => p.numOfUploadedFiles).Hidden(true);
            columns.Bound(p => p.documentDescription).Title("Document").Width(350);
            columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);
            columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);
            columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);
            columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);
            columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);
        })
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))
        .Sortable()
        .Scrollable()
        .ClientDetailTemplateId("gridCaseDocumentsDetails")
        .Pageable(pager => pager.Refresh(true))
        .Resizable(resize => resize.Columns(true))
        .HtmlAttributes(new { style = "height:500px;" })
        .Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handlerCaseDocuments"))
            .Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))
            .Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))
            .Update(update => update.Action("CaseDocuments_Update", "Home"))
            )

    )
</div>

<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ClientDocumentsExt>()
            .Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")
            .Columns(columns =>
            {
                columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);
                columns.Bound(m => m.FILE_NAME).Title("File Name");
                columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);
                columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);
                columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))
                .Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))

            )
            .Pageable(pager => pager.Refresh(true))
            .Sortable()
            .Scrollable()
            .ToClientTemplate()
    )
</script>

<script type="text/javascript">
    function error_handlerCaseDocuments(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    $("#gridCaseDocuments").find(".k-grid-content").height(421);
    function onClickDownloadClientDoc(e)
    {
        alert(e.ASSIGNMENT_DOCUMENT_ID);
    }

    function onRowDataBoundgridCaseDocuments(e) {

        var grid = $("#gridCaseDocuments").data("kendoGrid");
        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].COMPLETE_FLAG) {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(164,198,57)");
            } else if (gridData[i].numOfUploadedFiles > 0)
            {
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).css("background-color", "rgb(255,191,0)");
            }
        }
    }
    function onCloseClientDocumentUpload()
    {
        alert("onCloseClientDocumentUpload");
    }
</script>

[Derek]

Forgot to say that the dropdownlist is DOCUMENT_TYPE_STATUS_ID but the column used to filter is DOCUMENT_TYPE_ID 

[Derek]

Can anyone help me here please?

[Daniel]

Hi,

When using Ajax binding, the model values are not available on the server when the editor template is being rendered. In order to filter the data based another field value, you could configure the dropdownlist for remote binding and pass the needed value from the grid model with the request e.g.

<script>
    function additionalData() {
        var grid = $("#gridCaseDocuments").data("kendoGrid");
        var uid = $("#DOCUMENT_TYPE_STATUS_ID").closest("[data-uid]").data("uid");
        var model = grid.dataSource.getByUid(uid);

        return {
            DOCUMENT_TYPE_ID: model.DOCUMENT_TYPE_ID
        }
    }
</script>

@(
    Html.Kendo().DropDownListFor(m => m.DOCUMENT_TYPE_STATUS_ID)
    .DataValueField("DOCUMENT_TYPE_STATUS_ID")
    .DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")
    .DataSource(source =>
    {
          source.Read(read =>
          {
              read.Action("Action", "Controller").Data("additionalData");
          });
    })
)

Regards,
Daniel
Telerik

[Derek]

Hi Daniel,

 Thank you for the reply.

I used the code above but now I am getting this error in the console:

Uncaught ReferenceError: additionalData is not defined

Here is how my view looks now:

@using PartnerLink.Models
@model AssignmentDocTypesExt

@{
    Layout = "~/Views/Shared/_EmptyLayout.cshtml";
    ViewBag.Title = "Customer Document - "+Model.documentDescription;
    var currentUserId = ((TBL_USER)(ViewBag.LoggedUser)).USER_ID;
    bool isAdmin = ((TBL_USER)(ViewBag.LoggedUser)).LEAD_PROVIDER_ID == null;

    EntitiesModel entities = new EntitiesModel();
    var DocumentStatusList = entities.TBL_DOCUMENT_TYPE_Status
                    .Where(d => !d.OUT_OF_USE && d.DOCUMENT_TYPE_ID == Model.DOCUMENT_TYPE_ID)
                    .Select(d => new
                    {
                        d.DOCUMENT_TYPE_STATUS_ID,
                        d.DOCUMENT_TYPE_STATUS_DESCRIPTION

                    }
                     ).ToList();

}
@Html.HiddenFor(model => model.ASSIGNMENT_DOCUMENT_TYPE_ID)
@Html.HiddenFor(model => model.DOCUMENT_TYPE_ID)
<div class="grid-popup">
    @Html.LabelFor(m=>m.DOCUMENT_TYPE_STATUS_ID,"Type Status")

    @(
        Html.Kendo().DropDownListFor(m => m.DOCUMENT_TYPE_STATUS_ID)
        .DataValueField("DOCUMENT_TYPE_STATUS_ID")
        .DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetDDLDocTypeStatus_Read", "Home").Data("additionalData");
            });
        })
    )

    <br /><br />
    @Html.Kendo().CheckBoxFor(m => m.COMPLETE_FLAG).Name("COMPLETE_FLAG").Label("Complete")
</div>
<br />
<div class="grid-popup">

    @(Html.Kendo().Upload()
            .Name("files")
            .Messages(m => m.Select("Select File"))
            .Async(a => a
            .Save("ClientDocUpload", "Home")
            .AutoUpload(true)
            )
            .Files(files =>
            {
                var fs = new List<CreditCheckFileToParse>();
                foreach (var f in fs)
                {
                    files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
                }
            })

            .Events(c => c
               .Success(@<text>
                    function() {
                    $(".k-grid-update").trigger('click');
                    }
                    </text>)
               .Error(@<text>
                    function() {
                    alert("File Upload Failed");
                    }
                    </text>)
                .Upload(@<text>
                        function(e) {
                        e.data = { id: $("#ASSIGNMENT_DOCUMENT_TYPE_ID").val() };
                        }
                </text>)
                        )


    )
</div>

<script>
    function onSuccessfilesClientDocs(e)
    {
        $(".k-grid-update").trigger('click');
    }

    function onErrorfilesClientDocs(e) {
        alert("Failed to upload file");
    }


    function additionalData() {
        var grid = $("#gridCaseDocuments").data("kendoGrid");
        var uid = $("#DOCUMENT_TYPE_STATUS_ID").closest("[data-uid]").data("uid");
        var model = grid.dataSource.getByUid(uid);

        return {
            DOCUMENT_TYPE_ID: model.DOCUMENT_TYPE_ID
        }
    }

</script>

What am I missing?

[Derek]

I added the code for the function in the Data method and it worked. Something like this

 

   @(
Html.Kendo().DropDownListFor(m => m.documentTypeStatusID)
       .DataValueField("DOCUMENT_TYPE_STATUS_ID")
       .DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")
       .DataSource(source =>
       {
           source.Read(read =>
           {
               read.Action("GetDDLDocTypeStatus_Read", "Home").Data(@<text> function(){
                                                                                           var grid = $("#gridCaseDocuments").data("kendoGrid");
                                                                                           var uid = $("#documentTypeStatusID").closest("[data-uid]").data("uid");
                                                                                           var model = grid.dataSource.getByUid(uid);

                                                                                           return {
                                                                                                   DOCUMENT_TYPE_ID: model.DOCUMENT_TYPE_ID
                                                                                           }
                                                                                       } </text>);
           });
       })
   )

Thanks for your help!

[Daniel]

Hi again,

The reason for the problem with the previous code was that the script with the additionalData function was included after the dropdownlist definition. The editor template is set dynamically to the page so any event handlers should be defined before the widget.

Regards,
Daniel
Telerik

[Derek]

sweet

thanks

[Matthew]

I need to do something similar, but in a ClientDetailTemplate where the grid to reference is based on an id in the parent grid. So, In the function addtionalData(), is there a way to retrieve the "unknown" grid name in the ClientDetailTemplate?  If I could do that, then I could actually strip the id I need to return from the "unknown" grid name.

[Viktor Tachev]

Hi Matthew,

The code snippet below illustrates how to pass the grid name as argument to the Data handler:

.Read(read => read.Action("Read", "Grid").Data("function(e){additionalData(e, grid_#=EmployeeID#)}"))

 

function additionalData(e, gridName) {
	var grid = $(gridName).getKendoGrid();
	// ...
}

 

Give the approach a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Matthew]

Hello Viktor,

Thanks for the reply! However, I had already figured out how to get the grid id like this:

function additionalData() {
    var gridid = $("#EmployeeID").closest("[data-role='grid']").attr("id");

    var employeeID = gridid.substr(gridid.indexOf("_")+1);
    return {
        empid: employeeID
    };
}