This is a migrated thread and some comments may be shown as answers.

Grid popup edit template with dropdownlist with no FK

10 Answers 627 Views

Grid

This is a migrated thread and some comments may be shown as answers.

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

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

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?

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!

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.