2018-March-kendo grid good tips

[farzinmonsef]

2018-March-kendo grid good tips

[farzinmonsef]

Kendo Grid Style and Formatting

http://blog.codebeastie.com/kendo-grid-style-and-formatting/

Creating a Drop-Down List Inside a Kendo UI Grid

https://www.credera.com/blog/technology-insights/microsoft-solutions/creating-a-drop-down-list-inside-a-kendo-ui-grid/

Auto Refresh Of Kendo Grid

https://nitinasp.wordpress.com/2014/03/20/auto-refresh-of-kendo-grid/

[farzinmonsef]

Pictures

Edit Picture

https://www.iconfinder.com/icons/118921/edit_find_replace_icon#size=256

[farzinmonsef]

Modal Dialog 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat nisl a nibh tincidunt condimentum. Nullam in augue vitae augue dictum eleifend. Nunc porta fermentum metus, quis efficitur lectus scelerisque ac. Quisque egestas sit amet nunc in interdum. Etiam malesuada maximus nisi, id tempus metus. Vivamus at sapien ut metus aliquet sodales sed id magna. Integer in auctor ex. Phasellus tempor, est vel placerat dapibus, nulla dui tempor ligula, at pulvinar libero nunc gravida metus. Proin non feugiat felis. Proin ut ultrices ex. Morbi aliquet lacinia elit at bibendum. Nunc facilisis, neque a finibus dignissim, turpis felis vulputate diam, a tristique tellus nibh nec nulla. Suspendisse eget augue non turpis dignissim euismod eget eget odio. Donec sit amet nibh cursus, efficitur nibh in, sodales arcu. Pellentesque pulvinar consequat lacus ac porttitor.

@using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post)) {

 

Cancel Save

}

[farzinmonsef]

Modal Dialog 2/4

    public ActionResult ViewLyubomir()
    {
        return PartialView("_Lyubomir");
    }

@Html.ActionLink("Lyubomir ", "ViewLyubomir", "Home", null, new { @class = "modal-link btn btn-success" })

[farzinmonsef]

Modal Dialog 3/4

public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
    }

[farzinmonsef]

Modal Dialog 4/4

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<style>
    .modal-content {
        width: 600px !important;
        margin: 30px auto !important;
    }
</style>

+++++++++++++++++++++++++++ Body +++++++++++++++++++++++++++

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>

+++++++++++++++++++++++++++++

<script type="text/javascript">
    $(function () {
        // Initialize numeric spinner input boxes
        //$(".numeric-spinner").spinedit();

        // Initalize modal dialog
        // attach modal-container bootstrap attributes to links with .modal-link class.
        // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
        $('body').on('click', '.modal-link', function (e) {
            e.preventDefault();
            $(this).attr('data-target', '#modal-container');
            $(this).attr('data-toggle', 'modal');
        });

        // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
        $('body').on('click', '.modal-close-btn', function () {
            $('#modal-container').modal('hide');
        });

        //clear modal cache, so that new content can be loaded
        $('#modal-container').on('hidden.bs.modal', function () {
            $(this).removeData('bs.modal');
        });

        $('#CancelModal').on('click', function () {
            return false;
        });
    });
</script>

[farzinmonsef]

Modal Dialog 5/5

Site.css

body { padding-top: 50px; padding-bottom: 20px; }

/ Set padding to keep content from hitting the edges / .body-content { padding-left: 15px; padding-right: 15px; }

/ Set width on the form input elements since they're 100% wide by default / input, select, textarea { max-width: 280px; }

/ styles for validation helpers / .field-validation-error { color: #b94a48; }

.field-validation-valid { display: none; }

input.input-validation-error { border: 1px solid #b94a48; }

input[type="checkbox"].input-validation-error { border: 0 none; }

.validation-summary-errors { color: #b94a48; }

.validation-summary-valid { display: none; }

[farzinmonsef]

Modal Dialog 6/6

ModalBootstrap.zip

[farzinmonsef]

MVC Modal PopUp - Enhanced

MVC_ModalPopup.zip