[Solved] loading kendo mvvm grid in kendo window

[Neeraj]

Hello,
           I have a scenario where want to load kendo grid  in kendo window on button  The button is in external template  by . Please suggest something by which can close and exit/hide grid  and window easily


Grid MVVM external Script:

<script id="FeeGrid" type="text/x-kendo-template" class="KendoExtTemplate">

    <div id="feegridContainer">
        <div data-role="grid"
             data-editable="true"
             data-toolbar="['create', 'save']"
             data-columns="[
                                 { 'field': 'FeeCurrency', 'width': 270 }
                              ]"
             data-bind="source: FeeBreakup"></div>
    </div>

</script>

 

01.<script id="Heads" type="text/x-kendo-template" class="KendoExtTemplate">
02.    <div>
03.        <input data-role="numerictextbox" data-min="0" data-bind="value: Gross_Fare">
04.        <input data-role="numerictextbox" data-min="0" data-bind="value: TotalFee"><button data-role="button"
05.        data-icon="edit"
06.        data-bind="click: OpenFeeGrid"
07.        ></button>
08.    </div>
09.
10.</script>

 

 

the OpenFeeGrid , should trigger to show / hide  kendo Window with Grid inside.

[Preslav]

Hi Neeraj,

To show and hide a Kendo MVVM window from a button, I would suggest binding the visible configuration to a boolean variable. For example:

data-bind="visible: isVisible"
...

var viewModel = kendo.observable({
   isVisible: true
});

For a runnable example, check this Demo:

• http://demos.telerik.com/kendo-ui/window/mvvm

Regards,
Preslav
Progress Telerik

[Neeraj]

 Thanks for the reply, I have done that, now at the intial start the window is hidden and it has a grid inside. So, when it is hidden and when I click on the button to show grid, the data in the grid is empty. 
          But when I set visible true for the window at the start , that data for the grid is properly.  How to solve problem for grid when is hidden?

[Preslav]

Hi Neeraj,

To overcome this issue, I would suggest checking the relevant documentation. It is available here:

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#hidden-containers

Additionally, I would also suggest checking this how to article:

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/hidden/initiliaze-in-window

Please, give the above a try and let me know if you have any further questions.


Regards,
Preslav
Progress Telerik

[Neeraj]

Preslav,
            The above links  helped. Let me explain once again: I have external kendo template in that had another template script which has kendo window and that contains kendo grid.

1) when set kendo window visible =true it works as expected.
2) when set kendo window visible the data bind to .

[Preslav]

Hello Neeraj,

Based on the provided information, I am not sure if I fully understand the scenario.

Having said that, could you please share an example that demonstrates and isolates the issue? Checking and testing this example will help me fully understand the case and provide assistance to the best of my knowledge.

I look forward to your reply.


Regards,
Preslav
Progress Telerik