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

Grid details outside grid

3 Answers 179 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jose luis
Top achievements
Rank 1
jose luis asked on 21 Jun 2018, 03:51 PM

     I need to show the details of the grid for CRUD operations outside the grid (in a tabbed layout with the details and subgrids). The template is the same used in popup but it has to be in the same page that the grid.

 

  Is there any way to achieve this? I've seen this example in the documentation but it's for jquery

 

http://dojo.telerik.com/upiPE/26

 

Thank you

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 25 Jun 2018, 11:15 AM
Hi Jose,

A possible solution is to create an external form as in the provided sample and within the Change event handler of the grid bind the form to the currently selected item.

e.g.

function onChange() {
    var dataItem = this.dataItem(this.select()[0]);
 
    kendo.bind($('#details'), dataItem)

For your convenience attached you will find a small sample which demonstrates the above approach.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lucas
Top achievements
Rank 1
answered on 30 Jun 2018, 07:14 PM

Hi Georgi!

I have test the example that you provided and I have another question based in the example code:

How can I link a dropdownfield with an IEnumerable configured like this in a PAIS.cs model: 

public IEnumerable<PAIS> ListPaises { get; set; }

In other templates I have used the following code:

@Html.DropDownListFor(
                model => model.COD_PAIS,
                new SelectList((System.Collections.IEnumerable)ViewData["Paises"], "COD_PAIS", "NOMBRE_PAIS"))

I have coded the following but it doesn't runs:

<input data-role="dropdownlist"
                                   data-auto-bind="false"
                                   data-value-primitive="true"
                                   style="width:65%"
                                   class="k-textbox"
                                   data-bind="value: COD_PAIS, source: PAIS" />

 

Thank you very much!

0
Georgi
Telerik team
answered on 03 Jul 2018, 03:38 PM
Hello Lucas,

Based on the provided information I assume that the requirement is to include a drop down widget within the custom edit form and bind it to a field of the model. Please correct me if I am wrong.

I have updated the sample from my previous message to demonstrate the above requirement. Attached you will find the modified version of the sample. Please examine it and let me know if it helps.

I look forward to your reply.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
jose luis
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Lucas
Top achievements
Rank 1
Share this question
or