Telerik Forums
UI for ASP.NET MVC Forum
1 answer
102 views

Hello,

I have a grid with collapsible rows and the grid also allows Filtering and Sorting. When I have a few rows collapsed and click on a column to sort, all the collapsed rows  expand. Is there a way to retain the collapsed state of rows on Sorting/ Filtering?

 

Thanks!

Konstantin Dikov
Telerik team
 answered on 06 May 2016
7 answers
221 views

1)  I noticed the grid read action is being called when the grid-filter image is clicked on the column header.    Is there a reason it is being called when .ServerOperation(false) is specified ?

 

2)  Is there a way to remove the grid-filter from the column header when the grid has no rows  to prevent the user from filtering an empty grid ?

 

Thanks,

Irwin

 

Kiril Nikolov
Telerik team
 answered on 06 May 2016
7 answers
1.0K+ views
Hi there,

There seems no "Theme" property for me to change the style of the grid, I couldn't find in anywhere but in your demo there is a dropdown to choose to see different themes, am I missing anything?

here is my code:

@(Html.Kendo().Grid(Model.Customers)
        .Name("GridCustomers")

        .Columns(columns =>
        {
            columns.Bound(p => p.ID).Title("ID");
            columns.Bound(p => p.Name).Title("Name").Width(130);
            columns.Bound(p => p.Telephone).Title("Telephone").Width(130);
            columns.Bound(p => p.Extension).Title("Extension").Width(130);
            columns.Bound(p => p.Group).Title("Group");
        })
        .Pageable()
        .Sortable()
        .Scrollable(scr => scr.Height(430))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
         )
)

Thanks
Ziming
Dimo
Telerik team
 answered on 05 May 2016
6 answers
1.1K+ views

Hi,

I have a form with a MultiSelect displaying 'Exercises'. When the form is submitted the Exercise data is passed to the model as part of the form data (e.g.Exercises:"f86a60ce-04dc-4208-a2b6-a5ee00a1990f")

However when nothing is selected in the list, the 'Exercises' parameter is excluded from the post data. As the Exercise data is not included, the model.Entity.Exercises remains unchanged and contains the original selected values.

Is there any way the Kendo MultiSelect can pass in a null value when posting an empty list, so that the form data includes the Exercise parameter? e.g. Exercises:Null 

 

@{if (edit)
{
  @(Html.Kendo().MultiSelect()
  .Name("Exercises")
  .Placeholder("  ")
  .BindTo(ViewBag.Exercises)
  .HtmlAttributes(new { @class = "universalWidth" }))
}

[HttpPost]
[ActionName("CourseEdit")]
public ActionResult CourseEditPost(TypedModel<Course> model, string mode)
{
  if (mode != "view")
  {
    if (UserController.EffectiveUser.GetClassAccess(typeof(Course)).Allows(Access.Update))
    {
      // Save Mode
      if (mode == "new")
      {
 
      }
      else if (mode == "edit")
      {           
        CourseService service = new CourseService(this.DbSession, new ModelStateWrapper(this.ModelState));
        if (service.Save(model)) //model.Entity.Exercises error when no exercises selected in list
        {
          //Sucessfully saved
          DbSession.Flush();
        }
      }
    }
  }
 
  CourseEditHelper(model);
  return View(model);
}

     

Nencho
Telerik team
 answered on 05 May 2016
1 answer
185 views

Hi I´m using the Kendo.Mvc.dll version 2014.1.318.440, I have some problems adding the action of Export to Excel on my grid, 

Does not recognize the tools.Excel(), it is possible to use this statement with this Kendo version, or am I missing a reference for example a js file needed to bound??

 

Here's the code of the grid. 

  @(Html.Kendo().Grid<Project.Models.GridModel>()
                    .Name("Grid")
                    .Scrollable()
                    .EnableCustomBinding(true)
                    .HtmlAttributes(new { style = "height:auto;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model =>
                        {
                            model.Id(x => x.NumOP);
                        })
                        .ServerOperation(false)
                        .PageSize(20)
                        .Read(read => read.Action("LoadGrid", "GridController"))
                        )

                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Name).Title("Name").Width(80);
                        columns.Bound(p => p.Description).Title("Description").Width(200);
                        columns.Bound(p => p.Amount).Title("Amount").Format("{0:0,0.0}").Width(100);

                    })
                    .ToolBar(tools => tools.Excel())
                    .Excel(excel => excel
                        .FileName("ExcelFile.xlsx")
                        .ProxyURL(@UrlAction("Excel_Export_Save", "CreditosActivos"))
                        )
                    )

 

Thanks for help

 

Milena
Telerik team
 answered on 05 May 2016
1 answer
175 views

I have a categories dropdown list in the grid that i am populating very similar to the 'Editing custom editor' example. I populate the default categories in the index() method of my controller, just like the example shows and it works fine. When a 'organization dropdownlist' is chosen, I want to repopulate the categories based on what organization was chosen, but when I try to 'Add new record' in the grid, the old categories remain bound to the grid and it doesn't save properly.

 

I have in my grid something similar to this defined for the default value:

model.Field(p => p.Category).DefaultValue(ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);

Every time a new organization dropdown item is chosen, and a read operation occurs, how would I update or rebind the model to reflect the new defaultCategory?

 

Thanks in advance,

Dave

Pavlina
Telerik team
 answered on 04 May 2016
0 answers
121 views

The official 2016 Q2 Release (2016.2.504) release will export Excel files with grid lines disabled.

The change is not intentional and will be reverted in the following hotfix and service pack releases.

As a workaround you can turn on the grid lines explicitly in the ExcelExport event:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
    .Name("grid")   
...
    .Events(e => e.ExcelExport(
        @<text>
        function(e) {
            e.workbook.sheets[0].showGridLines = true;
        }
        </text>
        )
    )
)

Apologies for the caused inconvenience.

Kendo UI
Top achievements
Rank 1
 asked on 04 May 2016
2 answers
221 views

Hello, 

I have a column in my Grid with a custom filter which has pre-populated values in a dropdown. When user opens the page I want the default value to be set to a value that I pass from the Controller in ViewData. I'm able to set the grid filtered to a value on page load but the dropdown in the filter does not have the value selected.

Grid has the below column

 columns.Bound(c => c.DealYear).Filterable(filterable => filterable.UI("yearFilter")).Width(70);

with the below options set

.Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
           .ForString(str => str.Clear()
               .StartsWith("Starts with")
               .IsEqualTo("Is equal to")
               .IsNotEqualTo("Is not equal to")
           ))
        )

 

And on page load I filter the grid with a value passed from Controller  - This works fine.

  .Filter(f =>f.Add(p => p.DealYear).Equals(ViewData["DealYear"]))

 

But in my javascript, how do I set the value to the Filter Dropdown?

function yearFilter(element) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Action("FilterMenuCustomization_DealYear")"
            }
        },
            optionLabel: "--Select Year--"
        });
    }

 

The page loads with a predefined filter but the dropdown in the Filter shows 'Select Year'.

 

Thanks!

RICHARD
Top achievements
Rank 1
 answered on 04 May 2016
1 answer
206 views

I'm trying to combine the SignalR live updates example with the Hierarchical grid example.

I want both grids to update via SignalR when there's a change. The Customers grid works great.

Trouble is, I can't even read the  order data when I switch the Order grid to SignalR. The Read method on the child (order) grid is never called.

I wish there were more documentation on the Transport, Promise, and Hub properties.

Any suggestions?

 

@{
    ViewBag.Title = "Home Page";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@*<link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2016.1.112/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
 
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
 
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
 
<script src="@Url.Content("~/signalr/hubs")"></script>
<div id="modalWindow">
    <h2>Delete?</h2>
    <button id="yes" class="k-button">Yes</button>
    <button id="no" class="k-button">No</button>
</div>
<script>
 //   var hub = $.connection.customerHub;
    var customerHub = $.connection.customerHub;
    var orderHub = $.connection.orderHub;
    var hubStart = $.connection.hub.start();
</script>
@(Html.Kendo().Notification()
      .Name("notification")
      .Width("100%")
      .Position(position => position.Top(0).Left(0))
)
@(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.CustomerViewModel>()
    .Name("Customers")
    .Filterable()
    .Columns(columns =>
    {
        columns.Bound(c => c.CustomerId).Visible(false);
        columns.Bound(c => c.LastName)
                     .ClientTemplate("#:LastName#, #:FirstName#" + "#:MiddleInitial#")
                     .Title("Full Name");
        columns.Bound(c => c.AccountNumber);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        })
            .Title("Actions")
            .HeaderHtmlAttributes(new { style = "font-weight:600;" });
    })
    .ToolBar(toolbar => toolbar.Create().Text("Add new Customer"))
    .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel"))
    .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp)
                        .DisplayDeleteConfirmation(false))
    .Events(events => events.DetailExpand("onExpandCustomer"))
    // .Events(e => e.DataBound("onRowBound"))
    .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5))
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .ClientDetailTemplateId("Orders")
 
       .DataSource(dataSource => dataSource
        .SignalR()
        //    .AutoSync(true) // Automatically save changed data items by calling the sync method
        @*.Events(events => events.Push(@<text>
                function(e) {
                var notification = $("#notification").data("kendoNotification");
                notification.success(e.type);
                }
            </text>))*@
        .PageSize(10)
        // Transport is the configuration used to load and save the data items
        .Transport(tr => tr
 
            .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory.
            .Hub("customerHub")
            .Client(c => c //transport.signalr.client  Specifies the client-side CRUD methods of the SignalR hub.
                .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
                .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
                .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
                .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
            .Server(s => s
                .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
                .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
                .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
                .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
                )
         )
        .Schema(schema => schema
            .Model(model =>
            {
                model.Id(m => m.CustomerId);
                model.Field(m => m.CustomerId).Editable(false);
            })
        )
    )
)
 
 
<script id="Orders" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TelerikMvcCRUDGrid.Models.OrderViewModel>()
 
                        .Name("grid_#=CustomerId#") // template expression, to be evaluated in the master context
                        .Filterable()
                        .ToolBar(toolbar => toolbar.Create().Text("Add new Order"))
                        .ToolBar(toolbar => toolbar.Excel().Text("Export to Excel"))
                        .ToolBar(toolbar => toolbar.Pdf().Text("Export to PDF"))
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .HtmlAttributes(new { style = "height:100%;width:100%" })
                        .Events(e => e.DataBound("onRowBound"))
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderId).Visible(false);
                            columns.Bound(o => o.OrderTotal).Width(115);
                            columns.Bound(o => o.OrderSubtotal).Width(120);
                            columns.Bound(o => o.OrderTax).Width(80);
                            columns.Bound(o => o.DatePlaced).Width(115);
                            columns.Bound(o => o.DateShipped).Width(110);
                            columns.ForeignKey(f => f.OrderChannelId, (System.Collections.IEnumerable)
                                        ViewData["orderchannels"], "Value", "Text").Title("Channel");
                            columns.Command(command =>
                            {
                                command.Edit();
                                command.Custom("Delete").Click("openWindow");
                            }).Title("Order Actions").HeaderHtmlAttributes(new { style = "font-weight:600;" });
                        })
 
              .DataSource(dataSource => dataSource
                .SignalR()
                //    .AutoSync(true) // Automatically save changed data items by calling the sync method
                .PageSize(10)
 
                 // Transport is the configuration used to load and save the data items
                .Transport(tr => tr
 
                    .Promise("hubStart") // The promise returned by the start method of the SignalR connection. The promise option is mandatory.
                    .Hub("orderHub")
                    .Client(c => c //transport.signalr.client  Specifies the client-side CRUD methods of the SignalR hub.
                        .Read("read") //Specifies the name of the client-side method of the SignalR hub responsible for reading data items.
                        .Create("create") //Specifies the name of the client-side method of the SignalR hub responsible for creating data items.
                        .Update("update") //Specifies the name of the client-side method of the SignalR hub responsible for updating data items.
                        .Destroy("destroy")) //Specifies the name of the client-side method of the SignalR hub responsible for destroying data items.
                    .Server(s => s
                        .Read("read") //Specifies the name of the server-side method of the SignalR hub responsible for reading data items.
                        .Create("create") // Specifies the name of the server-side method of the SignalR hub responsible for creating data items.
                        .Update("update") //Specifies the name of the server-side method of the SignalR hub responsible for updating data items.
                        .Destroy("destroy") //Specifies the name of the server-side method of the SignalR hub responsible for destroying data items.
                        )
                 )
                .Schema(schema => schema
                    .Model(model =>
                    {
                        model.Id(o => o.OrderId);
                        model.Field(o => o.OrderId).Editable(false);
                    })
 
 
        )
        ).ToClientTemplate());
 
</script>
 
<script>
    var wnd;
    $(document).ready(function () {
        wnd = $("#modalWindow").kendoWindow({
            title: "Delete confirmation",
            modal: true,
            visible: false,
            resizable: false,
            width: 300
        }).data("kendoWindow");
    });
 
    function openWindow(e) {
        e.preventDefault();
        var grid = this;
        var row = $(e.currentTarget).closest("tr");
        wnd.center().open();
        $("#yes").click(function () {
            grid.removeRow(row);
            wnd.close();
        });
        $("#no").click(function () {
            wnd.close();
        });
    }
 
    function onRowBound(e) {
        $(".k-grid-Delete").find("span").addClass("k-icon k-delete");
    }
 
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
 
    function onExpandCustomer() {
        $(".k-detail-cell").css({
            "padding": "10px",
            "background-color": "#f35800"
        });
    }
</script>
 
<script id="delete-confirmation" type="text/x-kendo-template">
    <p class="delete-message">Are you sure?</p>
    <button class="delete-confirm k-button">Yes</button>
    <a href="#" class="delete-cancel">No</a>
</script>
 
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
<script>
    function onExpandProduct() {
        $(".k-detail-cell").css({
            "padding": "10px",
            "background-color": "white"
        });
    }
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

Maria Ilieva
Telerik team
 answered on 04 May 2016
3 answers
216 views

Hi,

We have different cultures setup based on the user login.

We found an issue with grid sort, it seems sorting correctly with US culture, but it fails with UK or custom cultures.

thanks!

 

 

Pavlina
Telerik team
 answered on 04 May 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?