Grid popup edit template with dropdownlist with no FK

11 posts, 0 answers
  1. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 21 May 2015 Link to this post

    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>

  2. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 21 May 2015 Link to this post

    Forgot to say that the dropdownlist is DOCUMENT_TYPE_STATUS_ID but the column used to filter is DOCUMENT_TYPE_ID 
  3. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 23 May 2015 Link to this post

    Can anyone help me here please?
  4. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 25 May 2015 Link to this post

    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
  5. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 25 May 2015 in reply to Daniel Link to this post

    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?

  6. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 26 May 2015 in reply to Derek Link to this post

    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!

  7. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 27 May 2015 Link to this post

    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
  8. Derek
    Derek avatar
    104 posts
    Member since:
    Aug 2008

    Posted 27 May 2015 in reply to Daniel Link to this post

    sweet

    thanks

  9. Matthew
    Matthew avatar
    7 posts
    Member since:
    Feb 2015

    Posted 09 Oct 2019 in reply to Daniel Link to this post

    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.
  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2500 posts

    Posted 11 Oct 2019 Link to this post

    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.
  11. Matthew
    Matthew avatar
    7 posts
    Member since:
    Feb 2015

    Posted 11 Oct 2019 in reply to Viktor Tachev Link to this post

    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.

Back to Top