I have an MVC Grid with Popup edit mode for adding records. Once popup is opened and Update is pressed - I want to save the record and prevent popup window from being automatically closed. After that in popup window when I select some different values and press Update again - I want a new row to be added.

I was able to prevent Popup from being auto-closed and on Update press current record is saved and a new one is created but it isn't reflected in the underlying table. On first picture Update button is pressed (update_clicked.jpg). On second picture I've changed the file name to "test2" and pressed Update again thus creating a new record with "File" set to "test2". The problem is that this isn't reflected in the underlying table - there's only one row there. After I refreshed the page (last picture) - it shows both rows and this is how it should be.

I think I need to refresh the dataSource to update the underlying table markup but if I call $("#gridBreakDowns").data("kendoGrid").dataSource.read() - Popup window is closed and table is refreshed but I want is to prevent the Popup being closed with the table refreshed instead.

This is done to add records more quickly while preserving the values in other fields since they're repeated most of the time.

This is what I've got:

@(Html.Kendo().Grid(Model.ManualJobItems)
 .Name("gridBreakDowns")
 .ToolBar(toolbar => toolbar.Create().Text("Create"))
 .Columns(columns =>
 {
 columns.Bound(p => p.ItemID).Hidden(true);
 columns.Bound(p => p.ParentID).Hidden(true);
 columns.Bound(p => p.Country).Title("Country");
 columns.Bound(p => p.FileName).Title("File");
 columns.Bound(p => p.Format).Title("Format");
 columns.Bound(p => p.Quantity).Title("Quantity");
 columns.Bound(p => p.Service).Title("Service");
 columns.Bound(p => p.Method).Title("Service Level");
 columns.Bound(p => p.ItemWeight).Title("Item Weight");
 columns.Bound(p => p.TotalWeight).Title("Total Weight");
 columns.Bound(p => p.DespatchStatusString).Title("Status");
 columns.Command(c => { c.Destroy(); }).Width(100);
 })
 .Events(events => events.Edit("onGridEdit").Save("onGridSave"))
 .Editable(editable => editable
 .Mode(GridEditMode.PopUp)
 .TemplateName("CreateManualJobItem")
 .AdditionalViewData(new { Model.ClientCode }))
 .DataSource(dataSource => dataSource
 .Ajax()
 .Events(events => events.Error("onerror_handler"))
 .Create(create => create.Action("UpdateItem", "ManualJob"))
 .Read(read => read.Action("ReadItem", "ManualJob", new { jid = Model.JobID }))
 .Update(update => update.Action("UpdateItem", "ManualJob"))
 .Destroy(destroy => destroy.Action("DestroyItem", "ManualJob"))
 .Model(model =>
 {
 model.Id(p => p.ItemID);
 model.Field(p => p.ParentID).DefaultValue(Model.JobID);
 model.Field(p => p.FileName).DefaultValue("");
 model.Field(p => p.ServiceID).DefaultValue(Guid.Empty);
 model.Field(p => p.CountryCode).DefaultValue("");
 model.Field(p => p.Country).DefaultValue("");
 model.Field(p => p.Format).DefaultValue("please select...");
 model.Field(p => p.Method).DefaultValue("");
 model.Field(p => p.Quantity).DefaultValue(0);
 model.Field(p => p.ItemWeight);
 model.Field(p => p.TotalWeight);
 })
))

<script type="text/javascript">
var _PreventWindowClose = false;

function onGridEdit() {
var window = this.editable.element.data("kendoWindow");
window.bind("close", onWindowEditMemberClose);
}

function onGridSave() {
_PreventWindowClose = true;
}

var onWindowEditMemberClose = function(e) {
if (_PreventWindowClose) {

//$("#gridBreakDowns").data("kendoGrid").dataSource.read();
e.preventDefault();
}
_PreventWindowClose = false;
};
</script>

Hello,

I am a newbie with Kendo grid and I would like to have two grids on a page whose data  have a 1:n relation to each other.

Selecting a record in the first grid should display the corresponding records in the second grid. In my case, the data come from two tables in an sql database.

Is there a simple example that demonstrates the setup for such a case?

Thanks for your help.

Reards,

Manu

Good Day,

Open Spreadsheet Demo -> Basic Usage.

Select from H1:H10.
Press CTRL+C

Select I:1

Press CTRL+V

Result: null, null, null, null...

Tested on IE11 and latest version of Firefox with same results.

Best Regards

Hi 

I am trying to Cascade a Multi select from a drop down list and am having issues getting the value of the dropdown list to pass into the controller.

My Drop down code is: 

    <h4 style="margin-top: 2em;">Sub Sub Category:</h4>
    @(Html.Kendo().DropDownList()
          .Name("category3")
          .OptionLabel("Select Sub Sub Category")
          .DataTextField("Description")
          .DataValueField("Id")
          .DataSource(source =>
          {
              source.Read(read => { read.Action("GetCategory3", "CampaignSimple").Data("filterCategory3"); }).ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("category2")
          .Events(e => e.Select("select"))
         

 )
    <script>
        function filterCategory3() {
            
            return {
                category2: $("#category2").val()
            };
        }
    </script>

And my MultiSelect code is:

    <h4 style="margin-top: 2em;">Ad Group</h4>
    @(Html.Kendo().MultiSelect()
          .Name("adgroup")
          .Placeholder("Select AdGroup")
          .DataTextField("Description")
          .DataValueField("Id")
          .DataSource(source =>
          {
              source.Read(read => { read.Action("GetAdGroups", "CampaignSimple").Data("filterAdGroups"); }).ServerFiltering(true);
          })
          .AutoBind(false)
          .Enable(false)

          )

    <script type="text/javascript">

        function filterAdGroups() {
 
        return {
            category3: $("#category3").val()
        };
    }

    function select(e) {
        var dropdownlist = $("#category3").data("kendoDropDownList");
        dropdownlist.select(e.item.index());

        var multiselect = $("#adgroup").data("kendoMultiSelect");
        multiselect.dataSource.read();
        multiselect.enable(true);
    };
    </script>

When I select an item from the drop down list it does go into the the controller method but the parameter is always null.

Any ideas?

Thanks in advanced 

So I have an MVC grid where I'm saving the grid settings to localstorage so that I can load the filters and the current page back to the same spot when navigating back from another action. It all works great for almost all of the columns, except for the date column (LastUpdatedDate below). The date entered is there, but you must click the Filter button again on this column to apply it, where on other columns, the filter is applied already on load. Any ideas? Page code below.

@{
    ViewBag.Title = "Vendors";
}
<h2>Vendors Index</h2>

@(Html.Kendo().Grid<VendorRegistry.Models.Vendor>()
      .Name("grid")
      .Columns(columns =>
      {
          //Excel like filtering on columns. Pulls from datasource because default shows them not in order. See Expired for default without datasource.
          columns.Bound(c => c.CompanyName).Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("GetCompanies", "VendorGrid"))));
          columns.Bound(c => c.Address1).Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("GetAddresses", "VendorGrid"))));
          columns.Bound(c => c.City).Width(110).Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("GetCities", "VendorGrid"))));
          columns.Bound(c => c.LastUpdatedDate);
          columns.Bound(c => c.Expired).Filterable(ftb => ftb.Multi(true));
          columns.Bound(c => c.Vetted).Filterable(ftb => ftb.Multi(true));
          columns.Template(@<text></text>)
            .ClientTemplate("<a class='k-button k-button-icontext' href='Vendors/Edit/#= ID#'><span class='k-icon k-edit'></span>Edit</a>" +
                            "<a class='k-button k-button-icontext k-grid-delete' href='Vendors/Delete/#= ID#'><span class='k-icon k-delete'></span>Delete</a>" +
                            "<a class='k-button k-button-icontext' href='Vendors/Details/#= ID#'>Details</a>")
            .Title("")
            .Width(240);
      })
      .ToolBar(tools => tools.Excel())
      .Excel(excel => excel
          .AllPages(true)
      )
      .Pageable(pager => pager
          .PageSizes(new[] { 10, 20, 30, 50, 100 }) // Default page sizes are 5, 10 and 20
      )
      .Sortable(sortable => {
          sortable.SortMode(GridSortMode.SingleColumn);
      })
      .Filterable()
      .Events(e => e.DataBound("grid_dataBound"))
      .DataSource(dataSource => dataSource
          .Ajax()
          .ServerOperation(false)
          .Model(model => model.Id(p => p.ID))
          .Read(read => read.Action("Vendors_Read", "VendorGrid"))
          .Destroy(destroy => destroy.Action("Vendors_Destroy", "VendorGrid"))
          .Sort(sort => { sort.Add(vendor => vendor.CompanyName); })
      )
      
)

@section Scripts {
    <script>
        $(document).ready(function () {
            //Load grid settings from localstorage
            var grid = $("#grid").data("kendoGrid");
            var options = localStorage["kendo-grid-options"];
            if (options) {
                grid.setOptions(JSON.parse(options));
            }
        });

        //Save grid settings so they can be reloaded later.
        function grid_dataBound() {
            var grid = $("#grid").data("kendoGrid");
            localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
        }
    </script>
}

Hello,

I can find out why initial sorting does not work for:

Everything else works fine; clicking on the column header does sorting. But no initial sorting!

Any ideas?

Best regards,

Manu

So I have a dropdown list that initially populates with 10 values (the most common values for race) However, when the user starts typing, it searches the entire list of values(around 900) for a match.  I didn't want load 900 values into a dropdown list so it uses server filtering and goes back to the server and searches for a match.  I can select  a race and this populates the dropdown list appropriately.  However, if i reselect the dropdownlist, it loses the value, and only shows the initial 10.  Is there a way where i can set the filter for the dropdown list to populate on click, so it will go to the server and bring back the match so it'll show that in the list and not lose its value?