Kendo Grid Events & External .Js file(s)

4 posts, 0 answers
  1. Randy
    Randy avatar
    12 posts
    Member since:
    Sep 2016

    Posted 19 Jan 2017 Link to this post

    Good afternoon all,

    Please see the following code:

     

    @(Html.Kendo().Grid<myVMNameHere>()
          .Name("nameOfMyGridHere")
     
          .Columns(columns =>
          {
              columns.Bound(c => c.Title).Width(75);
               columns.Bound(c => c.Category).Width(100);  
          })
          .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single))
          .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("read_method_here", "name_of_controller_here"))
            .PageSize(20))
          .Events(e => e.Change("modal"))
          .HtmlAttributes(new { style = "height:550px;width:100%;" })
          )

     

    Currently I have a script tags in my razor view. I need them to be gone, as the functions contained therein can be used by more than just one page. If I move the .Js function "modal" to another file, the function no longer fires. I have to keep the .Js code in the same file as the grid. How do I move the function(s) out to an external file so that I can make use of bundling, and name-spacing.

     

    Additionally, I am attempting to style a telerik modal, but I have seen 0 documentation on how this is done. Can someone point me to the location of the doc(s), or example(s)?

     

     

    Thanks.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 23 Jan 2017 Link to this post

    Hello Randy,

    You need to ensure that the JavaScript file is loaded before the initialization of the Grid (placing it within the head tag).

    As for the "modal", I am not sure that I understand what you mean by "customizing the telerik modal", but if you want to change the styles of the overlay DIV (for a Window with enabled modality), you can use the following CSS class to override the default styles:
    div.k-overlay{
       ...
    }


    Regards,
    Konstantin Dikov
    Telerik by Progress
    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.
  3. Randy
    Randy avatar
    12 posts
    Member since:
    Sep 2016

    Posted 30 Jan 2017 Link to this post

    Hello Konstantin,

     

    What I mean is that the modal on your demo(s) is nice and clean (http://demos.telerik.com/aspnet-mvc/grid/editing-popup). However my modals are one (vertically) long modal. Are you saying that I need use to use the div.k-overlay{ ... } to re-style the modal to my liking? So far the only solution I have been able to come up with is using a 3rd party ui client. 

     

    Thanks. 

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 01 Feb 2017 Link to this post

    Hi Randy,

    If you want to have a custom PopUp editor template you can refer to the following HowTo example:
    You could also customize the PopUp Window as shown below:
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person").Window(w=>w.Width(800)))


    Regards,
    Konstantin Dikov
    Telerik by Progress
    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.
Back to Top