Kendo Grid Events & External .Js file(s)

[Randy]

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.

[Konstantin Dikov]

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

[Randy]

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. 

[Konstantin Dikov]

Hi Randy,

If you want to have a custom PopUp editor template you can refer to the following HowTo example:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/custom-popup-editor

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