Home Kendo Grid Binding with Razor
Reply: 0

Kendo Grid Binding with Razor

user11519
1#
user11519 Published in April 22, 2018, 4:57 am

I setup a function used to save the grid's state along with its options to a database whenever something is modified. Every user will have their own respective settings.

The saving and loading functions of the grip options are functional, however upon page loading, the loadGridState function is called and so is the saveGridState although no change has been made to the grid by the user yet.

I would like to learn about a better way to perform the binding with the grid upon loading without having to mix the save functions with the databound event functions from Kendo.

This is the code within a JavaScript section:

$(function () {                                
                                $("#navHistory").addClass("navMenuSelected");
                                $("#navHistory > a").css("color", "black");
                                var grid = $("#HistoricGrid").data("kendoGrid");
                                var gridstate = kendo.stringify(grid.getOptions());                                
                                grid.bind("dataBound", onDataBound);
                                grid.bind("columnResize", onColumnResize);
                                LoadGridState();

                                $('#search').click(function (e) {
                                    e.preventDefault();
                                    $('#excelButton').prop('disabled', true);
                                    $('#pdfButton').prop('disabled', true);
                                    $('search').prop('disabled', true);

                                    grid.dataSource.read();
                                });

                                $('#excelButton').click(function () {
                                    grid.saveAsExcel();
                                });

                                $('#pdfButton').click(function () {
                                    grid.saveAsPDF();
                                });

                                $("#save").click(function (e) {
                                    e.preventDefault();
                                    SaveGridState();
                                });

                                $("#load").click(function (e) {
                                    e.preventDefault();
                                    LoadGridState();

                                });

                                //Grid event.
                                function onDataBound(e) {
                                    SaveGridState();
                                    var excelActivation = $('#excelButton').prop('disabled');
                                    var pdfActivation = $('#pdfButton').prop('disabled');
                                    var searchActivation = $('#search').prop('disabled');

                                    if (excelActivation) {
                                        $('#excelButton').prop('disabled', false);
                                    }
                                    if (pdfActivation) {
                                        $('#pdfButton').prop('disabled', false);
                                    }
                                    if (searchActivation) {
                                        $('#search').prop('disabled', false);
                                    }
                                }

                                //Grid event.
                                function onColumnResize(e) {
                                    SaveGridState();
                                }

                                function SaveGridState() {
                                    //region #Bug 1818 - New SaveGridState() function saves the Grid's State independent of the language
                                    var gridOptions = grid.getOptions();

                                    if (gridOptions != null &&
                                         gridOptions.dataSource &&
                                         gridOptions.dataSource.transport != null &&
                                         gridOptions.dataSource.transport.read &&
                                         gridOptions.dataSource.transport.read.url != null
                                     ) {
                                        delete gridOptions.dataSource.transport.read.url;
                                    }

                                    if (gridOptions != null &&
                                         gridOptions.groupable &&
                                         gridOptions.groupable.messages != null &&
                                         gridOptions.groupable.messages.empty &&
                                         gridOptions.groupable.messages.empty != null
                                     ) {
                                        delete gridOptions.groupable.messages.empty;
                                    }

                                    if (gridOptions != null &&
                                         gridOptions.pageable &&
                                         gridOptions.pageable.messages != null &&
                                         gridOptions.pageable.messages.itemsPerPage &&
                                         gridOptions.pageable.messages.itemsPerPage != null
                                     ) {
                                        delete gridOptions.pageable.messages.itemsPerPage;
                                    }

                                    $(gridOptions.columns).each(function () {
                                        $(this).removeProp("title");
                                    });

                                    var gridColumns = kendo.stringify(gridOptions);
                                    console.log(gridOptions);

                                    $.ajax({
                                        url: '@Url.Action("GridSaveOption", "Global")',
                                        type: 'POST',
                                        async: false,
                                        data: { gridName: "HistoricGrid", gridOption: gridColumns },
                                        success: function (result, status) { },
                                        error: function (result, status) {
                                            console.log('Error on SaveGrid.');
                                        }
                                    });
                                    //end region #Bug 1818
                                }

                                function LoadGridState() {
                                    $.ajax({
                                        url: '@Url.Action("GridLoadOption", "Global")',
                                        type: 'POST',
                                        async: false,
                                        data: { gridName: "HistoricGrid" },
                                        datatype: 'text',
                                        success: function (result, status) {
                                            //region #Bug 1822 - Adjust the titles of the Grid to the current language

                                            //If there is a corresponding data grid option for current user
                                            if (result) {
                                                var gridOptions = JSON.parse(result);

                                                if (gridOptions != null &&
                                                     gridOptions.dataSource &&
                                                     gridOptions.dataSource.transport != null &&
                                                     gridOptions.dataSource.transport.read &&
                                                     gridOptions.dataSource.transport.read.url != null
                                                 ) {
                                                    delete gridOptions.dataSource.transport.read.url;
                                                }

                                                if (gridOptions != null &&
                                                     gridOptions.groupable &&
                                                     gridOptions.groupable.messages != null &&
                                                     gridOptions.groupable.messages.empty &&
                                                     gridOptions.groupable.messages.empty != null
                                                 ) {
                                                    delete gridOptions.groupable.messages.empty;
                                                }

                                                if (gridOptions != null &&
                                                     gridOptions.pageable &&
                                                     gridOptions.pageable.messages != null &&
                                                     gridOptions.pageable.messages.itemsPerPage &&
                                                     gridOptions.pageable.messages.itemsPerPage != null
                                                 ) {
                                                    delete gridOptions.pageable.messages.itemsPerPage;
                                                }

                                                if (gridOptions != null &&
                                                     gridOptions.pdf
                                                 ) {
                                                    delete gridOptions.pdf;
                                                    }

                                                if (gridOptions != null &&
                                                     gridOptions.columns
                                                 ) {
                                                    delete gridOptions.columns;
                                                }

                                                grid.setOptions(gridOptions);
                                                //end region #Bug 1822
                                            }

                                            //If there is no data grid option for current user, use default
                                            else {
                                                //#Bug 1866 - In case the user has no style defined, it will order by creation date by default
                                                var dsSort = [];
                                                dsSort.push({ field: "CreationDate", dir: "desc" });
                                                grid.dataSource.sort(dsSort);
                                            }
                                        },
                                        error: function (result, status) {
                                            console.log('Error on LoadGrid.');
                                        }
                                    });
                                }
                            });
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.248596 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO