how to show details from foreign key in command button

[Luca]

Hi, 

after i try the demo http://demos.telerik.com/aspnet-core/grid/custom-command.

 

I have an issue showing details data from foreignkey , if you confused what im talking about , here's my code to give you some insight.

View :

<div style="padding:10px;" >
    @(Html.Kendo().Grid<DevRedsMk3.Models.MasterOpportunity>()
        .Name("Opportunity")
        .Columns(columns =>
        {
            columns.Bound(p => p.OpportunityId).Title("Opportunity ID");
            columns.Bound(p => p.OpportunityName).Title("Opportunity Name");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "ProspectId").Hidden(true).Title("Prospect Id");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "ProspectName").Hidden(true).Title("Prospect Name");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Type").Hidden(true).Title("Type");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Email").Hidden(true).Title("Email");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Phone").Hidden(true).Title("Phone");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Address").Hidden(true).Title("Address");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "IdNumber").Hidden(true).Title("ID Number");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "ProspectId", "Npwp").Hidden(true).Title("NPWP");
            columns.ForeignKey(p => p.ProspectId, (System.Collections.IEnumerable)ViewData["prospects"], "EmployeeId", "EmployeeId").Hidden(true).Title("Sales Person");
            columns.Command(command => command.Custom("Details").Click("showDetails")).Width(100);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(185);


        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Scrollable()

        .Sortable()

        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(datasource => datasource
             .Ajax()
             .ServerOperation(false)
             .Model(model => { model.Id(p => p.OpportunityId);
                 model.Field(p => p.OpportunityId).Editable(false);
             })





             .Read(read => read.Action("CustomCommand3_Read", "MasterOpportunity"))
             .Read(read => read.Action("List", "MasterOpportunity"))
             .Create(create => create.Action("Create", "MasterOpportunity"))
             .Update(update => update.Action("Update", "MasterOpportunity"))
        )
    )

    @(Html.Kendo().Window().Name("Details")
        .Title("Opportunity Details")
        .Visible(false)
        .Modal(true)
        .Draggable(true)
        .Width(600)
    )
    <script type="text/x-kendo-template" id="template">
        <div id="details-container">
            <h2>#= OpportunityName #</h2>
            <em>#= OpportunityId #</em>
            <dl>
                <dt>Prospect ID: #= ProspectId #</dt>
              @*  <dt>Name: #= ProspectName #</dt>
    <dt>Type: #= Type #</dt>
    <dt>Email: #= Email #</dt>
    <dt>Address: #= Address #</dt>
    <dt>Phone : #= Phone #</dt>
    <dt>KTP: #= IdNumber #</dt>
    <dt>NPWP: #= Npwp #</dt>
    <dt>Sales Person: #= EmployeeId#</dt>*@
            </dl>
        </div>
    </script>

    <script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
    </script>

</div>

 

 

you can see the commented code in <div id="details-container">  , im not able to show that, so please help me with it.. :)

 

here's my controller :

namespace DevRedsMk3.Controllers
{
    public class OpportunityController : Controller
    {
        private readonly dbdevredsContext _context;

        public OpportunityController(dbdevredsContext context)
        {
            _context = context;
        }
        // GET: /<controller>/
        public IActionResult Index()
        {
            var prospects = _context.MasterProspect.ToList();

            ViewData["prospects"] = prospects;
            ViewData["defaultMasterProspect"] = prospects.First();

            var employee = _context.MasterEmployee.ToList();

            ViewData["employee"] = employee;
            ViewData["defaultMasterEmployee"] = employee.First();

            return View();
        }

        public IActionResult Error()
        {
            return View();
        }
    }
}

namespace DevRedsMk3.Controllers
{
    public class MasterOpportunityController : Controller
    {


        private readonly dbdevredsContext _context;

        public MasterOpportunityController(dbdevredsContext context)
        {
            _context = context;
        }
        public IActionResult List([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_context.MasterOpportunity.ToDataSourceResult(request));
        }
        //public ActionResult CustomCommand3_Read([DataSourceRequest] DataSourceRequest request)
        //{
        //    return Json(_context.MasterEmployee.ToDataSourceResult(request));
        //}

        [HttpPost]
        public ActionResult Update([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity master)
        {
            if (master != null && ModelState.IsValid)
            {
                _context.MasterOpportunity.Update(master);
                _context.SaveChanges();
            }
            return Json(new[] { master }.ToDataSourceResult(request, ModelState));
        }

        [HttpPost]
        public ActionResult Destroy([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity opportunity)
        {
            _context.Remove(opportunity);
            _context.SaveChanges();

            return Json(new[] { opportunity }.ToDataSourceResult(request, ModelState));
        }

        [HttpPost]
        public ActionResult Create([DataSourceRequest]DataSourceRequest request, Models.MasterOpportunity opportunity)
        {
            if (opportunity != null && ModelState.IsValid)
            {
                _context.Add(opportunity);
                _context.SaveChanges();
            }
            return Json(new[] { opportunity }.ToDataSourceResult(request, ModelState));
        }
    }

}

[Harya]

i have same problem with you, 

 

now we just have to wait for the answer

[Preslav]

Hello,

Based on the provided information I believe that you want to display the text that matches the column value in the template. Please correct me if I am wrong.

The text is not available in the dataItem of the relevant element due to the fact that the actual value is a number. The text is just a template for the user. Having said that, to get this text, use a function that will match the value to the relevant text and will display it in the "showDetails" template. For example:

<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= ProductName #</h2>
        <em>#= getTextByValue(CategoryID) #</em>
    </div>
</script>

<script type="text/javascript">
    function getTextByValue(data) {
        var grid = $("#grid").data("kendoGrid");
        var text = grid.options.columns[1].values[data-1].text;

        return text;
</script>

Please, give the above a try and let me know if it works for you.


Regards,
Preslav
Progress Telerik