How to get a pop up window when a cell in the grid is clicked

2 Answers 3917 Views
Grid
Priyanka
Top achievements
Rank 1
Priyanka asked on 23 Jun 2017, 04:36 PM

Hi 

I am looking for some help . I need to get a pop up window if I click the cell in the grid. In simpler words ,The user should get a pop up grid when he clicks on the particular cell in a grid .

I have tired the on row select event but that is allowing me to click the whole row but I need a particular cell to be clicked on. And how to I bind my grid to the pop up window after selecting the cell in the grid. Any example would be appreciated.

 

Thanks in Advance.

 

 

2 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 27 Jun 2017, 06:22 AM
Hi Priyanka,

I have configured a sample which illustrates how to open a Kendo Window with grid inside it when a cell of a grid is clicked:


Please use it as a reference and let me know if it works for you.


Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Hammy
Top achievements
Rank 1
Veteran
commented on 22 Apr 2020, 08:37 AM

Hi There, I got similar request, In my Vue component using code below.. question is how go about opening these using <kendo-window> component.

Thanks

 

```

        <kendo-grid id="ticket-grid" ref="kendoTicketGrid" :data-source="dataSource"
                    :column-hide="saveState" :column-show="saveState" :auto-bind="true" :width="560" :height="560"
                    :allow-copy="true" :selectable="true" :sortable="true" :filterable="false" :resizable="false"
                    :columnMenu="false" @databound="databound" @data-bound="loadState">
            <kendo-grid-column :title="'Sales'" width="60px" :filterable="false" :template="salesPopupTemplate"></kendo-grid-column>
            <kendo-grid-column :title="'Process'" width="60px" :filterable="false" :template="processPopupTemplate"></kendo-grid-column>
            <kendo-grid-column :field="'TicketTitle'" width="80px" :title="'Tax year'"></kendo-grid-column>
            <kendo-grid-column :field="'Retention'" width="90px" :title="'Retention'" :template="boolTemplate"></kendo-grid-column>
            <kendo-grid-column :field="'Workflow'" width="130px" :title="'Workflow'"></kendo-grid-column>
            <kendo-grid-column :field="'StatusChangeDate'" width="120px" :title="'Status change date'" :format="'{0:dd MMM yyyy}'"></kendo-grid-column>
        </kendo-grid>
        <script id="salesPopupTemplate" type="text/x-kendo-template">
            <div data-clientid="#=ClientId#" data-taxyearid="#=TaxYearId#" onclick="alert('S: #=ClientTaxId#');">s-icon</div>
        </script>
        <script id="processPopupTemplate" type="text/x-kendo-template">
            <div data-clientid="#=ClientId#" data-taxyearid="#=TaxYearId#" onclick="alert('P: #=ClientTaxId#');">p-icon</div>
        </script>

```

 

0
Georgi
Telerik team
answered on 24 Apr 2020, 06:05 AM

Hi Hammy,

The kendo vue window component is actually a wrapper of the jQuery window. In other words, you can use the vary same code to open the window.

e.g. 

kendo.jQuery('#windowComponentId').data('kendoWindow').open()

I hope this helps.

Regards,
Georgi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Hammy
Top achievements
Rank 1
Veteran
commented on 01 May 2020, 10:34 AM

Hi Georgi,

Thanks your reply.

I have managed to resolve my issue however, not happy with mixing jquery based wrappers in vue.

Is there a native vue version for kendo modal and is there any example of this in a gird component?

 

 

Many thanks

Hammy

 

Georgi
Telerik team
commented on 05 May 2020, 11:18 AM

Hello Hammy,

The Window component is not yet implemented as a native component. However, you could log a feature request to our feedback portal and we will consider implementing it in a future release. 

Meanwhile, I could suggest you to use the Popup component which is a native Vue widget.

Regards,
Georgi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Priyanka
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or