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

grid shown within modal window doesn't draw all the way until interacted with

1 Answer 909 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Toffer
Top achievements
Rank 2
Toffer asked on 12 Jan 2016, 10:40 PM

Sorry for the title...I didn't know what to use for the title while keeping it easy to understand.

So as the title suggests, I have a kendo grid within a modal kendo window.  The grid technically "works"...however when the data is not cached, the grid shows up in half of the modal window.  If the data is cached, it shows up in the whole modal window as expected.  Not sure how to fix this...any suggestions?  Here is the source code for the relevant controllers \ views \ models...along with a couple screen shots to see what I'm talking about.  In the attached "before" PNG you can see where the grid only fills half of the modal window.  After I click on the grid...it then expands to fill the rest of the modal as shown in the "after" PNG.

 

Shared Layout:

001.<!DOCTYPE html>
002.<html>
003.<head>
004.    <meta charset="utf-8" />
005.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
006.    <title>@ViewBag.Title</title>
007.    @Styles.Render("~/Content/css")
008.    @Scripts.Render("~/bundles/modernizr")
009. 
010.    <!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
011.    @Scripts.Render("~/bundles/jquery")
012.    <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.common.min.css")" rel="stylesheet" type="text/css" />
013.    <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
014.    <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
015.    <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.default.min.css")" rel="stylesheet" type="text/css" />
016.    <link href="@Url.Content("~/Content/kendo/2015.2.902/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
017.    <script src="@Url.Content("~/Scripts/kendo/2015.2.902/jquery.min.js")"></script>
018.    <script src="@Url.Content("~/Scripts/kendo/2015.2.902/jszip.min.js")"></script>
019.    <script src="@Url.Content("~/Scripts/kendo/2015.2.902/kendo.all.min.js")"></script>
020.    <script src="@Url.Content("~/Scripts/kendo/2015.2.902/kendo.aspnetmvc.min.js")"></script>
021.    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
022. 
023.    <script>
024.        function Sleep(milliSeconds)
025.        {
026.            var startTime = new Date().getTime();
027. 
028.            while (new Date().getTime() < startTime + milliSeconds);
029.        }
030.    </script>
031.    <style>
032.        .Heading
033.        {
034.            text-align: left;
035.            width: 1500px;
036.            margin: auto;
037.        }
038.        .KendoTabStrip
039.        {
040.            height: 800px;
041.            margin: auto auto 20px auto;
042.            width: 1500px;
043.        }
044.        .KendoGrid
045.        {
046.            height: 800px;
047.            margin: auto auto 20px auto;
048.            width: 1500px;
049.        }
050.        .KendoGridInTab
051.        {
052.            height: 690px;
053.        }
054.        .KendoModalGrid
055.        {
056.            height: 780px;
057.            margin: 10px 10px 10px 10px;
058.            width: 1080px;
059.        }
060.        .KendoModalWindow
061.        {
062.            height: 800px;
063.            margin: auto;
064.            width: 1100px;
065.        }
066.    </style>
067.</head>
068.<body>
069.    <div class="navbar navbar-inverse navbar-fixed-top" style="text-align: left; width: 1720px; margin: auto">
070.        <div class="container">
071.            <div class="navbar-header">
072.                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
073.                    <span class="icon-bar"></span>
074.                    <span class="icon-bar"></span>
075.                    <span class="icon-bar"></span>
076.                </button>
077.                <div class="navbar-brand">Phynet Reports</div>
078.            </div>
079.            <div class="navbar-collapse collapse">
080.                <ul class="nav navbar-nav">
081.                    <li class="@Html.IsActive("DataMaintenance", "DataMaintenanceView")">
082.                        @Html.ActionLink("Data Maintenance", "DataMaintenanceView", "DataMaintenance")
083.                    </li>
084.                    <li class="@Html.IsActive("ThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldListView")">
085.                        @Html.ActionLink("Transceiver Gold List", "ThirdPartyOpticsGoldListView", "ThirdPartyOpticsGoldList")
086.                    </li>
087.                    <li class="@Html.IsActive("TransceiverSwitchQualificationList", "TransceiverSwitchQualificationListView")">
088.                        @Html.ActionLink("Transceiver Switch Qualification List", "TransceiverSwitchQualificationListView", "TransceiverSwitchQualificationList")
089.                    </li>
090.                </ul>
091.            </div>
092.        </div>
093.    </div>
094.    <div style="margin: 10px 100px 10px 100px; border: solid">
095.        @RenderBody()
096.    </div>
097. 
098.    @Scripts.Render("~/bundles/bootstrap")
099.    @RenderSection("scripts", required: false)
100.</body>
101.</html>

 

Views:

001.@using PhynetReporting
002. 
003.@{
004.    ViewBag.Title = "Gold List - 3rd Party Optics";
005.    Layout = "~/Views/Shared/_Layout.cshtml";
006.}
007. 
008.<script>
009.    function grid_error(e)
010.    {
011.        if (e.errors)
012.        {
013.            var message = "There are some errors:\n";
014. 
015.            // Create a message containing all errors.
016.            $.each(e.errors, function (key, value)
017.            {
018.                if ('errors' in value)
019.                {
020.                    $.each(value.errors, function ()
021.                    {
022.                        message += this + "\n";
023.                    });
024.                }
025.            });
026. 
027.            // Display the message
028.            alert(message);
029. 
030.            // Cancel the changes
031.            var grid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");
032.            grid.cancelChanges();
033.        }
034.    }
035. 
036.    function GetTransceiverBreakoutModeFilter(element)
037.    {
038.        element.kendoComboBox(
039.        {
040.            dataSource:
041.            {
042.                schema:
043.                {
044.                    data: "Data",
045.                    total: "Total"
046.                },
047.                transport:
048.                {
049.                    read: '@Url.Action("GetTransceiverBreakoutModesForFiltering", "ThirdPartyOpticsGoldList")'
050.                },
051.                type: "aspnetmvc-ajax"
052.            }
053.        });
054.    }
055. 
056.    function GetTransceiverCableLengthFilter(element)
057.    {
058.        element.kendoComboBox(
059.        {
060.            dataSource:
061.            {
062.                schema:
063.                {
064.                    data: "Data",
065.                    total: "Total"
066.                },
067.                transport:
068.                {
069.                    read: '@Url.Action("GetTransceiverCableLengthsForFiltering", "ThirdPartyOpticsGoldList")'
070.                },
071.                type: "aspnetmvc-ajax"
072.            }
073.        });
074.    }
075. 
076.    function GetTransceiverCompatibilityFilter(element)
077.    {
078.        element.kendoComboBox(
079.        {
080.            dataSource:
081.            {
082.                schema:
083.                {
084.                    data: "Data",
085.                    total: "Total"
086.                },
087.                transport:
088.                {
089.                    read: '@Url.Action("GetTransceiverCompatibilitiesForFiltering", "ThirdPartyOpticsGoldList")'
090.                },
091.                type: "aspnetmvc-ajax"
092.            }
093.        });
094.    }
095. 
096.    function GetTransceiverFormFactorFilter(element)
097.    {
098.        element.kendoComboBox(
099.        {
100.            dataSource:
101.            {
102.                schema:
103.                {
104.                    data: "Data",
105.                    total: "Total"
106.                },
107.                transport:
108.                {
109.                    read: '@Url.Action("GetTransceiverFormFactorsForFiltering", "ThirdPartyOpticsGoldList")'
110.                },
111.                type: "aspnetmvc-ajax"
112.            }
113.        });
114.    }
115. 
116.    function GetTransceiverLifecycleStatusFilter(element)
117.    {
118.        element.kendoComboBox(
119.        {
120.            dataSource:
121.            {
122.                schema:
123.                {
124.                    data: "Data",
125.                    total: "Total"
126.                },
127.                transport:
128.                {
129.                    read: '@Url.Action("GetTransceiverLifecycleStatusForFiltering", "ThirdPartyOpticsGoldList")'
130.                },
131.                type: "aspnetmvc-ajax"
132.            }
133.        });
134.    }
135. 
136.    function GetTransceiverRevisionFilter(element)
137.    {
138.        element.kendoComboBox(
139.        {
140.            dataSource:
141.            {
142.                schema:
143.                {
144.                    data: "Data",
145.                    total: "Total"
146.                },
147.                transport:
148.                {
149.                    read: '@Url.Action("GetTransceiverRevisionsForFiltering", "ThirdPartyOpticsGoldList")'
150.                },
151.                type: "aspnetmvc-ajax"
152.            }
153.        });
154.    }
155. 
156.    function GetTransceiverSupplierFilter(element)
157.    {
158.        element.kendoComboBox(
159.        {
160.            dataSource:
161.            {
162.                schema:
163.                {
164.                    data: "Data",
165.                    total: "Total"
166.                },
167.                transport:
168.                {
169.                    read: '@Url.Action("GetTransceiverSuppliersForFiltering", "ThirdPartyOpticsGoldList")'
170.                },
171.                type: "aspnetmvc-ajax"
172.            }
173.        });
174.    }
175. 
176.    $(function ()
177.    {
178.        $('#ThirdPartyOpticsGoldListGrid').on('click', '.tpoglChkBx', function ()
179.        {
180.            var checked = $(this).is(':checked');
181.            var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid;
182.            var dataItem = grid.dataItem($(this).closest('tr'));
183.            dataItem.set('Selected', checked);
184.        })
185.    })
186. 
187.    function tpoglCheckAll(e)
188.    {
189.        var state = $(e).is(':checked');
190.        var grid = $('#ThirdPartyOpticsGoldListGrid').data().kendoGrid;
191. 
192.        $.each(grid.dataSource.view(), function ()
193.        {
194.            if (this['Selected'] != state)
195.                this.dirty = true;
196.            this['Selected'] = state;
197.        });
198. 
199.        grid.refresh();
200.    }
201. 
202.    function ShowSwitchesModal(e)
203.    {
204.        var switchesModalWindow = $("#SwitchesModalWindow").data("kendoWindow");
205.        switchesModalWindow.open().center(true);
206.    }
207. 
208.    function SwitchesModalCloseEvent(e)
209.    {
210.        var switchesModalWindow = $("#SwitchesModalWindow").data("kendoWindow");
211.        switchesModalWindow.close();
212.    }
213.</script>
214. 
215.<div class="Heading">
216.    <br />
217.    <br />
218.    <br />
219.    <h2>Gold List - 3rd Party Optics</h2>
220.    <br />
221.    <br />
222.</div>
223. 
224.<div>
225.    @{ var columnWidth = 170; }
226. 
227.    @(Html.Kendo().Grid<ThirdPartyOpticsGoldListModel>()
228.        .Columns(c =>
229.        {
230.            c.Template(@<text></text>)
231.                .ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='tpoglChkBx' />")
232.                .HeaderTemplate("<input type='checkbox' id='tpoglMasterCheckBox' onclick='tpoglCheckAll(this)'/>")
233.                .Width(30);
234.            c.Bound(tpogl => tpogl.DisplayName)
235.                .Title("Title")
236.                .Width(columnWidth);
237.            c.Bound(tpogl => tpogl.TransceiverCompatibilityName)
238.                .Filterable(f => f.UI("GetTransceiverCompatibilityFilter"))
239.                .Title("Compatibility Type")
240.                .Width(columnWidth);
241.            c.Bound(tpogl => tpogl.TransceiverFormFactorName)
242.                .Filterable(f => f.UI("GetTransceiverFormFactorFilter"))
243.                .Title("Form Factor")
244.                .Width(columnWidth);
245.            c.Bound(tpogl => tpogl.SupplierName)
246.                .Filterable(f => f.UI("GetTransceiverSupplierFilter"))
247.                .Title("Vendor")
248.                .Width(columnWidth);
249.            c.Bound(tpogl => tpogl.Revision)
250.                .Filterable(f => f.UI("GetTransceiverRevisionFilter"))
251.                .Title("Firmware Revision")
252.                .Width(columnWidth);
253.            c.Bound(tpogl => tpogl.BreakoutMode)
254.                .ClientTemplate("#:BreakoutMode#")
255.                .Filterable(f => f.UI("GetTransceiverBreakoutModeFilter"))
256.                .Title("Breakout Mode")
257.                .Width(columnWidth);
258.            c.Bound(tpogl => tpogl.CableLength)
259.                .Filterable(f => f.UI("GetTransceiverCableLengthFilter"))
260.                .Title("Cable Length")
261.                .Width(columnWidth);
262.            c.Bound(tpogl => tpogl.TransceiverLifecycleStatusName)
263.                .Filterable(f => f.UI("GetTransceiverLifecycleStatusFilter"))
264.                .Title("Status")
265.                .Width(columnWidth);
266.        })
267.        .DataSource(ds => ds
268.            .Ajax()
269.            .Events(e => e.Error("grid_error"))
270.            .Model(m =>
271.            {
272.                m.Id(tpogl => tpogl.ID);
273.                m.Field(tpogl => tpogl.Selected).Editable(true);
274.                m.Field(tpogl => tpogl.ID).Editable(false);
275.                m.Field(tpogl => tpogl.DisplayName).Editable(false);
276.                m.Field(tpogl => tpogl.TransceiverCompatibilityName).Editable(false);
277.                m.Field(tpogl => tpogl.TransceiverFormFactorName).Editable(false);
278.                m.Field(tpogl => tpogl.SupplierName).Editable(false);
279.                m.Field(tpogl => tpogl.Revision).Editable(false);
280.                m.Field(tpogl => tpogl.BreakoutMode).Editable(false);
281.                m.Field(tpogl => tpogl.CableLength).Editable(false);
282.                m.Field(tpogl => tpogl.TransceiverLifecycleStatusName).Editable(false);
283.            })
284.            .PageSize(30)
285.            .Read(r => r.Action("GetThirdPartyOpticsGoldListItems", "ThirdPartyOpticsGoldList"))
286.            .ServerOperation(false))
287.        .Editable(e => e.Mode(GridEditMode.InCell))
288.        .Excel(e => e
289.            .AllPages(true)
290.            .FileName("ThirdPartyOpticsGoldListReport.xlsx")
291.            .Filterable(true)
292.            .ProxyURL(Url.Action("ExcelExportSave", "DataMaintenance")))
293.        .Filterable(f => f
294.            .Extra(false)
295.            .Operators(o => o
296.                .ForString(s => s
297.                    .Clear()
298.                    .Contains("Contains")
299.                    .StartsWith("Starts With")
300.                    .IsEqualTo("==")
301.                    .IsNotEqualTo("!="))))
302.        .Groupable()
303.        .HtmlAttributes(new { @class = "KendoGrid" })
304.        .Name("ThirdPartyOpticsGoldListGrid")
305.        .Navigatable()
306.        .Pageable(p => p.PageSizes(new int[] { 10, 20, 30, 50, 100 }))
307.        .Reorderable(r => r.Columns(true))
308.        .Resizable(r => r.Columns(true))
309.        .Scrollable()
310.        .Selectable(s =>
311.        {
312.            s.Type(GridSelectionType.Row);
313.            s.Mode(GridSelectionMode.Multiple);
314.        })
315.        .Sortable()
316.        .ToolBar(t =>
317.        {
318.        t.Template(
319.                @<text>
320.                    <table>
321.                        <tr>
322.                            <td width="200px;" style="border: none">
323.                                @item.SaveButton()
324.                            </td>
325.                            <td width="80px;" style="border: none">
326.                                <label>Bulk commands:</label>
327.                            </td>
328.                            <td width="130px" style="border: none">
329.                                <a class='k-button k-button-icontext' onclick='ShowSwitchesModal()' href='#'>Switch Qualification Testing</a>
330.                            </td>
331.                            <td style="border: none">
332.                                <a class="k-button k-button-icontext k-grid-excel" href="#" style="float: right"><span class="k-icon k-i-excel"></span>Export To Excel</a>
333.                            </td>
334.                        </tr>
335.                    </table>
336.                </text>);
337.        }))
338.</div>
339. 
340.<div>
341.    @(Html.Kendo().Window()
342.        .Actions(a => a.Close())
343.        .Draggable(true)
344.        .HtmlAttributes(new { @class = "KendoModalWindow" })
345.        .LoadContentFrom("SwitchModalView", "Switch")
346.        .Modal(true)
347.        .Name("SwitchesModalWindow")
348.        .Resizable()
349.        .Title("Switches")
350.        .Visible(false))
351.</div>
352. 
353.<script>
354.    $(document).ready(function ()
355.    {
356.        document.getElementById('SwitchesModalWindow').style.height = (screen.height - 400).toString() + 'px';
357.        document.getElementById('SwitchesModalWindow').style.width = (screen.width - 400).toString() + 'px';
358.    });
359.</script>

 

001.@using PhynetReporting
002. 
003.@{
004.    ViewBag.Title = "Switch Selection";
005.    Layout = null;
006.}
007. 
008.<script>
009.    function grid_error(e)
010.    {
011.        if (e.errors)
012.        {
013.            var message = "There are some errors:\n";
014. 
015.            // Create a message containing all errors.
016.            $.each(e.errors, function (key, value)
017.            {
018.                if ('errors' in value)
019.                {
020.                    $.each(value.errors, function ()
021.                    {
022.                        message += this + "\n";
023.                    });
024.                }
025.            });
026. 
027.            // Display the message
028.            alert(message);
029. 
030.            // Cancel the changes
031.            var grid = $("#SwitchModalGrid").data("kendoGrid");
032.            grid.cancelChanges();
033.        }
034.    }
035. 
036.    $(function ()
037.    {
038.        $('#SwitchModalGrid').on('click', '.smChkBx', function ()
039.        {
040.            var checked = $(this).is(':checked');
041.            var grid = $('#SwitchModalGrid').data().kendoGrid;
042.            var dataItem = grid.dataItem($(this).closest('tr'));
043.            dataItem.set('Selected', checked);
044.        })
045.    })
046. 
047.    function smCheckAll(e)
048.    {
049.        var state = $(e).is(':checked');
050.        var grid = $('#SwitchModalGrid').data().kendoGrid;
051. 
052.        $.each(grid.dataSource.view(), function ()
053.        {
054.            if (this['Selected'] != state)
055.                this.dirty = true;
056.            this['Selected'] = state;
057.        });
058. 
059.        grid.refresh();
060.    }
061. 
062.    function GetModelFilter(element)
063.    {
064.        element.kendoComboBox(
065.        {
066.            dataSource:
067.            {
068.                schema:
069.                {
070.                    data: "Data",
071.                    total: "Total"
072.                },
073.                transport:
074.                {
075.                    read: '@Url.Action("GetSwitchModelsForFiltering", "ThirdPartyOpticsGoldList")'
076.                },
077.                type: "aspnetmvc-ajax"
078.            }
079.        });
080.    }
081. 
082. 
083.    function GetSupplierFilter(element)
084.    {
085.        element.kendoComboBox(
086.        {
087.            dataSource:
088.            {
089.                schema:
090.                {
091.                    data: "Data",
092.                    total: "Total"
093.                },
094.                transport:
095.                {
096.                    read: '@Url.Action("GetSwitchSuppliersForFiltering", "ThirdPartyOpticsGoldList")'
097.                },
098.                type: "aspnetmvc-ajax"
099.            }
100.        });
101.    }
102. 
103.    function GetSwitchOSFilter(element)
104.    {
105.        element.kendoComboBox(
106.        {
107.            dataSource:
108.            {
109.                schema:
110.                {
111.                    data: "Data",
112.                    total: "Total"
113.                },
114.                transport:
115.                {
116.                    read: '@Url.Action("GetSwitchOSsForFiltering", "ThirdPartyOpticsGoldList")'
117.                },
118.                type: "aspnetmvc-ajax"
119.            }
120.        });
121.    }
122. 
123.    function SubmitButtonClick(e)
124.    {
125.        var modalWindow = $("#SwitchesModalWindow").data("kendoWindow");
126.        var switchesGrid = $("#SwitchModalGrid").data("kendoGrid");
127.        var goldListGrid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");
128.        var assignToTextBox = $("#AssignToTextBox")[0].value;
129.        var switchesGridObjects = switchesGrid.dataSource.data();
130.        var goldListGridObjects = goldListGrid.dataSource.data();
131. 
132.        var dataParams =
133.        {
134.            switchObjects: switchesGridObjects,
135.            goldListObjects: goldListGridObjects,
136.            assignTo: assignToTextBox
137.        };
138. 
139.        var dataParamsJson = JSON.stringify(dataParams);
140. 
141.        var goldListAddActionURL = '@Url.Action("AddToThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldList")';
142. 
143.        $.ajax(
144.        {
145.            contentType: "application/json",
146.            data: dataParamsJson,
147.            dataType: "json",
148.            type: "POST",
149.            url: goldListAddActionURL
150.        })
151.        .error(function (objAjaxRequest, strError) {
152.            var respText = objAjaxRequest.responseText;
153.            console.log(respText);
154.        });
155. 
156.        modalWindow.close();
157.    }
158.</script>
159. 
160.<div>
161.    @(Html.Kendo().Grid<SwitchModel>()
162.        .Columns(c =>
163.        {
164.            c.Template(@<text></text>)
165.                .ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='smChkBx' />")
166.                .HeaderTemplate("<input type='checkbox' id='smMasterCheckBox' onclick='smCheckAll(this)'/>")
167.                .Width(80);
168.            c.Bound(s => s.SupplierName)
169.                .EditorTemplateName("SwitchSupplierDropDownListTemplate")
170.                .Filterable(f => f.UI("GetSupplierFilter"))
171.                .Title("Supplier");
172.            c.Bound(s => s.Model)
173.                .Filterable(f => f.UI("GetModelFilter"))
174.                .Title("Model");
175.            c.Bound(s => s.SwitchOSName)
176.                .EditorTemplateName("SwitchOSDropDownListTemplate")
177.                .Filterable(f => f.UI("GetSwitchOSFilter"))
178.                .Title("OS");
179.            c.Bound(s => s.LastUpdate)
180.                .Title("Last Update");
181.        })
182.        .DataSource(ds => ds
183.            .Ajax()
184.            .Events(e => e.Error("grid_error"))
185.            .Model(m =>
186.            {
187.                m.Id(s => s.ID);
188.                m.Field(s => s.ID).Editable(false);
189.                m.Field(s => s.SwitchOSName).DefaultValue("[N/A~No OS Installed]");
190.            })
191.            .PageSize(30)
192.            .Read(r => r.Action("GetSwitches", "Switch")))
193.        .Filterable(f => f
194.            .Extra(false)
195.            .Operators(o => o
196.                .ForString(s => s
197.                    .Clear()
198.                    .Contains("Contains")
199.                    .StartsWith("Starts With")
200.                    .IsEqualTo("==")
201.                    .IsNotEqualTo("!="))))
202.        .HtmlAttributes(new { @class = "KendoModalGrid" })
203.        .Name("SwitchModalGrid")
204.        .Pageable()
205.        .Resizable(r => r.Columns(true))
206.        .Scrollable()
207.        .Sortable()
208.        .ToolBar(t =>
209.        {
210.            t.Template(
211.                @<text>
212.                    <table>
213.                        <tr>
214.                            <td style="float: left; width: 100px">
215.                                <label>Assign To:</label>
216.                            </td>
217.                            <td style="float: left">
218.                                @(Html.Kendo().TextBox()
219.                                    .Name("AssignToTextBox")
220.                                    .Value("Triage"))
221.                            </td>
222.                            <td style="float: right">
223.                                <a class='k-button k-button-icontext' onclick='SubmitButtonClick()' href='#'>Submit For Testing</a>
224.                            </td>
225.                        </tr>
226.                    </table>
227.                </text>);
228.        }))
229.</div>
230. 
231.<script>
232.    $(document).ready(function ()
233.    {
234.        document.getElementById('SwitchModalGrid').style.height = (screen.height - 430).toString() + 'px';
235.        document.getElementById('SwitchModalGrid').style.width = (screen.width - 430).toString() + 'px';
236.    });
237.</script>

 

Controllers:

001.namespace TPOReports.Controllers
002.{
003.    using System.Collections.Generic;
004.    using System.Linq;
005.    using System.Web.Configuration;
006.    using System.Web.Mvc;
007.    using Kendo.Mvc.Extensions;
008.    using Kendo.Mvc.UI;
009.    using PhynetReporting;
010.    using Kendo.Mvc.UI.Fluent;
011.    using System.Linq.Expressions;
012. 
013.    public class ThirdPartyOpticsGoldListController : Controller
014.    {
015.        /// <summary>
016.        /// returns the view ThirdPartyOpticsGoldListView
017.        /// </summary>
018.        /// <returns>ThirdPartyOpticsGoldListView</returns>
019.        public ActionResult ThirdPartyOpticsGoldListView()
020.        {
021.            return View();
022.        }
023. 
024.        /// <summary>
025.        /// adds a new ThirdPartyOpticsGoldList into the database
026.        /// </summary>
027.        /// <param name="deviceType">ThirdPartyOpticsGoldList to add</param>
028.        /// <returns>the newly added ThirdPartyOpticsGoldList object</returns>
029.        [HttpPost]
030.        public ActionResult AddToThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, IEnumerable<SwitchModel> switchObjects, IEnumerable<ThirdPartyOpticsGoldListModel> goldListObjects, string assignTo)
031.        {
032.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
033.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.AddToTransceiverSwitchQualificationList(switchObjects, goldListObjects, assignTo);
034. 
035.            if (!thirdPartyOpticsGoldListResult.Result)
036.            {
037.                ModelState.AddModelError("AddToThirdPartyOpticsGoldList", thirdPartyOpticsGoldListResult.Message);
038.            }
039. 
040.            return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState));
041.        }
042. 
043.        [OutputCache(Duration = 600, VaryByParam = "none")]
044.        [HttpPost]
045.        public ActionResult GetSwitchModelsForFiltering([DataSourceRequest] DataSourceRequest request)
046.        {
047.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
048.            var switchesResult = dataMaintenance.GetSwitches();
049. 
050.            if (!switchesResult.Result)
051.            {
052.                ModelState.AddModelError("GetSwitchModelsForFiltering", switchesResult.Message);
053.            }
054. 
055.            DataSourceResult result = switchesResult.Payload.Select(tsql => tsql.Model).Distinct().ToDataSourceResult(request);
056.            return Json(result, JsonRequestBehavior.AllowGet);
057.        }
058. 
059.        [OutputCache(Duration = 600, VaryByParam = "none")]
060.        [HttpPost]
061.        public ActionResult GetSwitchOSsForFiltering([DataSourceRequest] DataSourceRequest request)
062.        {
063.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
064.            var switchesResult = dataMaintenance.GetSwitches();
065. 
066.            if (!switchesResult.Result)
067.            {
068.                ModelState.AddModelError("GetSwitchOSsForFiltering", switchesResult.Message);
069.            }
070. 
071.            DataSourceResult result = switchesResult.Payload.Select(tsql => tsql.SwitchOSName).Distinct().ToDataSourceResult(request);
072.            return Json(result, JsonRequestBehavior.AllowGet);
073.        }
074. 
075.        [OutputCache(Duration = 600, VaryByParam = "none")]
076.        [HttpPost]
077.        public ActionResult GetSwitchSuppliersForFiltering([DataSourceRequest] DataSourceRequest request)
078.        {
079.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
080.            var switchesResult = dataMaintenance.GetSwitches();
081. 
082.            if (!switchesResult.Result)
083.            {
084.                ModelState.AddModelError("GetSwitchSuppliersForFiltering", switchesResult.Message);
085.            }
086. 
087.            DataSourceResult result = switchesResult.Payload.Select(tsql => tsql.SupplierName).Distinct().ToDataSourceResult(request);
088.            return Json(result, JsonRequestBehavior.AllowGet);
089.        }
090. 
091. 
092.        [OutputCache(Duration = 600, VaryByParam = "none")]
093.        [HttpPost]
094.        public ActionResult GetThirdPartyOpticsGoldListItems([DataSourceRequest] DataSourceRequest request)
095.        {
096.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
097.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
098. 
099.            if (!thirdPartyOpticsGoldListResult.Result)
100.            {
101.                ModelState.AddModelError("GetTransceiverGoldListItems", thirdPartyOpticsGoldListResult.Message);
102.            }
103. 
104.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.ToDataSourceResult(request);
105.            return Json(result);
106.        }
107. 
108.        [OutputCache(Duration = 600, VaryByParam = "none")]
109.        [HttpPost]
110.        public ActionResult GetTransceiverBreakoutModesForFiltering([DataSourceRequest] DataSourceRequest request)
111.        {
112.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
113.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
114. 
115.            if (!thirdPartyOpticsGoldListResult.Result)
116.            {
117.                ModelState.AddModelError("GetTransceiverBreakoutModesForFiltering", thirdPartyOpticsGoldListResult.Message);
118.            }
119. 
120.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.BreakoutMode).Distinct().ToDataSourceResult(request);
121.            return Json(result, JsonRequestBehavior.AllowGet);
122.        }
123. 
124.        [OutputCache(Duration = 600, VaryByParam = "none")]
125.        [HttpPost]
126.        public ActionResult GetTransceiverCableLengthsForFiltering([DataSourceRequest] DataSourceRequest request)
127.        {
128.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
129.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
130. 
131.            if (!thirdPartyOpticsGoldListResult.Result)
132.            {
133.                ModelState.AddModelError("GetTransceiverCableLengthsForFiltering", thirdPartyOpticsGoldListResult.Message);
134.            }
135. 
136.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.CableLength).Distinct().ToDataSourceResult(request);
137.            return Json(result, JsonRequestBehavior.AllowGet);
138.        }
139. 
140.        [OutputCache(Duration = 600, VaryByParam = "none")]
141.        [HttpPost]
142.        public ActionResult GetTransceiverCompatibilitiesForFiltering([DataSourceRequest] DataSourceRequest request)
143.        {
144.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
145.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
146. 
147.            if (!thirdPartyOpticsGoldListResult.Result)
148.            {
149.                ModelState.AddModelError("GetTransceiverCompatibilitiesForFiltering", thirdPartyOpticsGoldListResult.Message);
150.            }
151. 
152.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverCompatibilityName).Distinct().ToDataSourceResult(request);
153.            return Json(result, JsonRequestBehavior.AllowGet);
154.        }
155. 
156.        [OutputCache(Duration = 600, VaryByParam = "none")]
157.        [HttpPost]
158.        public ActionResult GetTransceiverFormFactorsForFiltering([DataSourceRequest] DataSourceRequest request)
159.        {
160.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
161.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
162. 
163.            if (!thirdPartyOpticsGoldListResult.Result)
164.            {
165.                ModelState.AddModelError("GetTransceiverFormFactorsForFiltering", thirdPartyOpticsGoldListResult.Message);
166.            }
167. 
168.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverFormFactorName).Distinct().ToDataSourceResult(request);
169.            return Json(result, JsonRequestBehavior.AllowGet);
170.        }
171. 
172.        [OutputCache(Duration = 600, VaryByParam = "none")]
173.        [HttpPost]
174.        public ActionResult GetTransceiverLifecycleStatusForFiltering([DataSourceRequest] DataSourceRequest request)
175.        {
176.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
177.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
178. 
179.            if (!thirdPartyOpticsGoldListResult.Result)
180.            {
181.                ModelState.AddModelError("GetTransceiverLifecycleStatusForFiltering", thirdPartyOpticsGoldListResult.Message);
182.            }
183. 
184.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.TransceiverLifecycleStatusName).Distinct().ToDataSourceResult(request);
185.            return Json(result, JsonRequestBehavior.AllowGet);
186.        }
187. 
188.        [OutputCache(Duration = 600, VaryByParam = "none")]
189.        [HttpPost]
190.        public ActionResult GetTransceiverRevisionsForFiltering([DataSourceRequest] DataSourceRequest request)
191.        {
192.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
193.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
194. 
195.            if (!thirdPartyOpticsGoldListResult.Result)
196.            {
197.                ModelState.AddModelError("GetTransceiverRevisionsForFiltering", thirdPartyOpticsGoldListResult.Message);
198.            }
199. 
200.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.Revision).Distinct().ToDataSourceResult(request);
201.            return Json(result, JsonRequestBehavior.AllowGet);
202.        }
203. 
204.        [OutputCache(Duration = 600, VaryByParam = "none")]
205.        [HttpPost]
206.        public ActionResult GetTransceiverSuppliersForFiltering([DataSourceRequest] DataSourceRequest request)
207.        {
208.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
209.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.GetThirdPartyOpticsGoldList();
210. 
211.            if (!thirdPartyOpticsGoldListResult.Result)
212.            {
213.                ModelState.AddModelError("GetTransceiverSuppliersForFiltering", thirdPartyOpticsGoldListResult.Message);
214.            }
215. 
216.            DataSourceResult result = thirdPartyOpticsGoldListResult.Payload.Select(tsql => tsql.SupplierName).Distinct().ToDataSourceResult(request);
217.            return Json(result, JsonRequestBehavior.AllowGet);
218.        }
219. 
220.        [HttpPost]
221.        public ActionResult UpdateThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, [Bind(Prefix ="models")]IEnumerable<ThirdPartyOpticsGoldListModel> thirdPartyOpticsGoldListItems)
222.        {
223.            TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
224.            var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.UpdateThirdPartyOpticsGoldList(thirdPartyOpticsGoldListItems);
225. 
226.            if (!thirdPartyOpticsGoldListResult.Result)
227.            {
228.                ModelState.AddModelError("UpdateThirdPartyOpticsGoldList", thirdPartyOpticsGoldListResult.Message);
229.            }
230. 
231.            return Json(thirdPartyOpticsGoldListResult.Payload.ToDataSourceResult(request, ModelState));
232.        }
233.    }
234.}

 

001.namespace TPOReports.Controllers
002.{
003.    using System.Linq;
004.    using System.Web.Configuration;
005.    using System.Web.Mvc;
006.    using Kendo.Mvc.Extensions;
007.    using Kendo.Mvc.UI;
008.    using PhynetReporting;
009. 
010.    /// <summary>
011.    /// controller class for dealing with Switch related actions
012.    /// </summary>
013.    public class SwitchController : Controller
014.    {
015.        /// <summary>
016.        /// returns the view SwitchModalView
017.        /// </summary>
018.        /// <returns>SwitchModalView</returns>
019.        [HttpGet]
020.        public ActionResult SwitchModalView()
021.        {
022.            return View();
023.        }
024. 
025.        /// <summary>
026.        /// returns the view SwitchView
027.        /// </summary>
028.        /// <returns>SwitchView</returns>
029.        [HttpGet]
030.        public ActionResult SwitchView()
031.        {
032.            return View();
033.        }
034. 
035.        /// <summary>
036.        /// adds a new Switch into the database
037.        /// </summary>
038.        /// <param name="switchObject">Switch to add</param>
039.        /// <returns>the newly added Switch object</returns>
040.        [HttpPost]
041.        public ActionResult AddSwitch([DataSourceRequest] DataSourceRequest request, SwitchModel switchObject)
042.        {
043.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
044.            var switchResult = dataMaintenance.AddSwitch(switchObject);
045. 
046.            if(!switchResult.Result)
047.            {
048.                ModelState.AddModelError("AddSwitch", switchResult.Message);
049.            }
050. 
051.            return Json(new[] { switchResult.Payload }.ToDataSourceResult(request, ModelState));
052.        }
053. 
054.        /// <summary>
055.        /// retrieves all Switch objects from the database
056.        /// </summary>
057.        /// <returns>a collection of Switch objects as json</returns>
058.        [HttpPost]
059.        public ActionResult GetSwitches([DataSourceRequest] DataSourceRequest request)
060.        {
061.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
062.            var switchesResult = dataMaintenance.GetSwitches();
063. 
064.            if(!switchesResult.Result)
065.            {
066.                ModelState.AddModelError("GetSwitches", switchesResult.Message);
067.            }
068. 
069.            DataSourceResult result = switchesResult.Payload.ToDataSourceResult(request);
070.            return Json(result);
071.        }
072. 
073.        /// <summary>
074.        /// retrieves all Switch Model objects from the database
075.        /// </summary>
076.        /// <returns>a collection of Switch Model objects as json</returns>
077.        [HttpPost]
078.        public ActionResult GetSwitchModels([DataSourceRequest] DataSourceRequest request)
079.        {
080.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
081.            var switchesResult = dataMaintenance.GetSwitches();
082. 
083.            if (!switchesResult.Result)
084.            {
085.                ModelState.AddModelError("GetSwitchModels", switchesResult.Message);
086.            }
087. 
088.            DataSourceResult result = switchesResult.Payload.Select(s => s.Model).Distinct().ToDataSourceResult(request);
089.            return Json(result);
090.        }
091. 
092. 
093.        /// <summary>
094.        /// removes the Switch from the database
095.        /// </summary>
096.        /// <param name="switchObject">SwitchModel object to be deleted</param>
097.        /// <returns>the deleted SwitchModel object</returns>
098.        [HttpPost]
099.        public ActionResult RemoveSwitch([DataSourceRequest] DataSourceRequest request, SwitchModel switchObject)
100.        {
101.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
102.            var switchResult = dataMaintenance.RemoveSwitch(switchObject);
103. 
104.            if (!switchResult.Result)
105.            {
106.                ModelState.AddModelError("RemoveSwitch", switchResult.Message);
107.            }
108. 
109.            return Json(new[] { switchResult.Payload }.ToDataSourceResult(request, ModelState));
110.        }
111. 
112.        /// <summary>
113.        /// updates a Switch in the database
114.        /// </summary>
115.        /// <param name="switchObject">updated SwitchModel</param>
116.        /// <returns>updated Switch object from the database</returns>
117.        [HttpPost]
118.        public ActionResult UpdateSwitch([DataSourceRequest] DataSourceRequest request, SwitchModel switchObject)
119.        {
120.            DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
121.            var switchResult = dataMaintenance.UpdateSwitch(switchObject);
122. 
123.            if (!switchResult.Result)
124.            {
125.                ModelState.AddModelError("UpdateSwitch", switchResult.Message);
126.            }
127. 
128.            return Json(new[] { switchResult.Payload }.ToDataSourceResult(request, ModelState));
129.        }
130.    }
131.}

 

Let me know if there is any other code needed to be seen...

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Jan 2016, 04:50 PM
Hello Toffer,

This is a known issue. Please check this help topic to learn how it can be resolved.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Toffer
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Share this question
or