This is a migrated thread and some comments may be shown as answers.
Grid popup edit template with dropdownlist with no FK
10 Answers 92 Views
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 21 May 2015, 08:42 PM

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>

10 Answers, 1 is accepted

Sort by
0
Derek
Top achievements
Rank 1
answered on 21 May 2015, 08:52 PM
Forgot to say that the dropdownlist is DOCUMENT_TYPE_STATUS_ID but the column used to filter is DOCUMENT_TYPE_ID 
0
Derek
Top achievements
Rank 1
answered on 23 May 2015, 03:22 PM
Can anyone help me here please?
0
Daniel
Telerik team
answered on 25 May 2015, 02:15 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Derek
Top achievements
Rank 1
answered on 25 May 2015, 02:53 PM

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?

0
Derek
Top achievements
Rank 1
answered on 26 May 2015, 01:48 PM

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!

0
Daniel
Telerik team
answered on 27 May 2015, 08:52 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Derek
Top achievements
Rank 1
answered on 27 May 2015, 10:42 AM

sweet

thanks

0
Matthew
Top achievements
Rank 1
answered on 09 Oct 2019, 05:08 PM
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.
0
Viktor Tachev
Telerik team
answered on 11 Oct 2019, 11:53 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Matthew
Top achievements
Rank 1
answered on 11 Oct 2019, 08:24 PM

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
    };
}

 

When I get a chance, I'll try it your way.

Tags
Grid
Asked by
Derek
Top achievements
Rank 1
Answers by
Derek
Top achievements
Rank 1
Daniel
Telerik team
Matthew
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or