Hello,

I found a great example of how to export the master detail grids to excel but I'm struggling when there's a "group" applied. Could someone please provide an example on how that could be done?

Thanks!

Kendall

Using the auto complete widget, is it possible to automatically highlight (but not select) the first item in the dropdownlist, but still allow the user to type into the textbox?

Currently, when you type in the textbox and see the item you want as the first in the dropdownlist you have to hit the down arrow to select it, then tab to go to the next field. We'd like it to have that selected by default. 

Is there how to round up the value ?

　ex)　16.543　→　16.55

I can only set rounding or truncation for the "round" option...

I have a column inside a grid that is bind to DevelopersDataSource this is object that contains only id and name.

But the filter doesn't work and fell exception then if I change to simple string then the edit doesn't work properly.

so what can I do?

this is my grid:

<script type="text/kendo" id="DevelopersTemplate">
    <ul>
        #for(var i = 0; i< data.length; i++){#
        <li title="#:data[i].Name#">#:data[i].Name#</li>
        #}#
    </ul>
</script>

@Html.Partial("~/Views/Shared/Info.cshtml", Model)

@(Html.Kendo().Grid<TaskViewModel>()
          .Name("GridTasks")
          .Columns(columns =>
          {
              columns.Bound(c => c.ID).Hidden();
              columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
              columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
              columns.Bound(c => c.Name).Title("Name");
              columns.Bound(c=>c.DevelopersDataSource).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers").Sortable(false).Filterable(f => f.UI("developersMultiFilter")
                  .Mode(GridFilterMode.Row)
                  .Extra(false)
                 .Operators(operators => operators
                    .ForString(str => str.Clear()
                         .IsEqualTo("contains"))));
              columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").EditorTemplateName("EstimatedStartDateEditor").Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").EditorTemplateName("EstimatedEndDateEditor").Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<canvas id='taskChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas>").EditorTemplateName("PercentCompletedEditor");
              ;
              columns.Bound(c => c.Comment).Title("Comment");
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);

          })
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
           .Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("TaskEdit"))
           .Groupable(g => g.Enabled(false))
           .Filterable()
           .ToolBar(toolbar =>
           {
               toolbar.Template(@<text>
        <div class="toolbar" style="float:left">
            <a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
                <span class="k-icon k-i-add"></span> ADD TASK
            </a>
       
            <a class="k-button k-grid-excel k-button-icontext" href="#">
                <span class="k-icon k-i-excel"></span>Export to Excel
            </a>

        </div>
            </text>);
           })
           .Excel(excel => excel
                          .AllPages(true)
                          .FileName("Tasks.xlsx")
                          .Filterable(true)
                          .ForceProxy(true)
                          .ProxyURL(Url.Action("FileExportSave", "Home")))
          .Pageable(pager => pager
                            .Refresh(true)
                            .PageSizes(true)
                            .PageSizes(new int[] { 6, 15, 20 })
                            .ButtonCount(5))
          .Sortable(sortable =>
          {
              sortable.SortMode(GridSortMode.MultipleColumn)
             .Enabled(true);
          })
          .Events(events => events.DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation"))
          .DataSource(dataSource => dataSource
                                   .Ajax()
                                   .ServerOperation(false)
                                   .Group(group => group.Add(p => p.ProjectName))
                                   .PageSize(20)
                                   .Events(events => events.Error("errorHandlerTask"))
                                   .Read(read => read.Action("GetSavedTasks", "Task"))
                                   .Update(update => update.Action("UpdateTask", "Task"))
                                   .Destroy(update => update.Action("DeleteTask", "Task"))
                                   .Model(model => model.Id(item => item.ID))))

this is my mode:

namespace TaskManagementUI.Models
{
    public class TaskViewModel
    {
        public TaskViewModel()
        {
                  DevelopersDataSource=new List<Developer>();
        }
        public int? ID { get; set; }

        [Display(Name = "Project Name")]
        public int ProjectID { get; set; }


        [Display(Name = "Name")]
        [Required(ErrorMessage = "Please enter task name")]
        public string Name { get; set; }

        [Display(Name = "Project Name")]
        public string ProjectName { get; set; }

        [Required(ErrorMessage = "Please select a developer")]
        [Display(Name = "Developers")]
        public List<int> DevelopersID { get; set; }

        [DataType(DataType.Date)]
        [Required(ErrorMessage = "Please select a date")]
        [Display(Name = "Estimated Start Date")]
        public DateTime EstimatedStartDate { get; set; }

        [GreaterDate(EarlierDateField = "EstimatedStartDate", ErrorMessage = "End date should be after Start date")]
        [DataType(DataType.Date)]
        [Required(ErrorMessage = "Please select a date")]
        [Display(Name = "Estimated End Date")]
        public DateTime EstimatedEndDate { get; set; }

        [DataType(DataType.Date)]
        [Required(ErrorMessage = "Please select a date")]
        [Display(Name = "Actual Start Date")]
        public DateTime ActualStartDate { get; set; }

        [GreaterDate(EarlierDateField = "ActualStartDate", ErrorMessage = "End date should be after Start date")]
        [DataType(DataType.Date)]
        [Required(ErrorMessage = "Please select a date")]
        [Display(Name = "Actual End Date")]
        public DateTime ActualEndDate { get; set; }

        [UIHint("PercentCompletedEditor")]
        [Required(ErrorMessage = "Please enter percent")]
        [Display(Name = "Percent Completed")]
        public float PercentCompleted { get; set; }

        [Required(ErrorMessage = "Please enter comment")]
        [Display(Name = "Comment")]
        public string Comment { get; set; }

        [Required(ErrorMessage = "Please select a developer")]
        [UIHint("DevelopersEditor")]
        public List<Developer> DevelopersDataSource { get; set; }

        public string DevelopersNames
        {
            get
            {
                if(DevelopersDataSource!=null)
                    return String.Join(",", DevelopersDataSource.Select(s=>s.Name));
                else
                {
                    return null;
                }

            }


        }

        public List<Project> Projects { get; set; }
        
  
       
    }
}

this is the object developer:

namespace TaskManagementUI.Models
{
    public class Developer
    {
        public int? ID { get; set; }
        [Required(ErrorMessage = "Please enter a name")]
        [Display(Name = "Name")]
        public string Name { get; set; }
    }
} 

this is my filter function to  DevelopersDataSource :

var developersMultiFilter = function (element) {
    element.kendoMultiSelect({
        dataValueField:"ID",
        dataTextField:"Name",
        dataSource: {
            transport: {
               read: "/Project/DevelopersList"
            },
            valuePrimitive: false
        },
        
    });
}

thanks

I am trying to pass data back from a Kendo window to the parent page or at least get a reference back to the parent page; but its not working.

Any help resolving this would be appreciated. Everything works except I cannot get a reference to the parent page to pass data to it. the grid on the parent page is not getting populated. 

<h5 class="bold"><a name="associates"></a>Known Associates</h5> 
        <div id="GridMessage_Associate" style="display: none;"></div>
 
        @(Html.Kendo().Grid<PeopleSearchResultDO>()
            .Name("AssociateGrid")
            .AutoBind(false)
            .HtmlAttributes(new { style = "display:none;" })
            .Columns(columns =>
            {
                columns.Bound(p => p.PersonId).ClientTemplate("#= PersonId #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].PersonId' value='#= PersonId #' />");
 
                columns.Bound(p => p.FirstName).ClientTemplate("#= FirstName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].FirstName' value='#= FirstName #' />");
 
                columns.Bound(p => p.MiddleName).ClientTemplate("#= MiddleName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].MiddleName' value='#= MiddleName #' />");
 
                columns.Bound(p => p.LastName).ClientTemplate("#= LastName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].LastName' value='#= LastName #' />"); 
               
            }
            )
            .DataSource(
        dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
             )
        )
 
        <br />
        <br />
 
 
        <!-- Modal -->
 
        <input id="openassociates" value="Search for an Associate" class="btn btn-default btn-lg" />
 
 
        @(Html.Kendo().Window()
        .Name("associatewindow")
        .Width(1400)
        .Height(500)
        .Draggable()
        .Resizable()
        .Title("Add New Person")
        .Visible(false)
        .Modal(true)
 
        .Actions(actions => actions
        .Minimize()
        .Maximize()
        .Close().Refresh()
    )
 
        .Content("loading associates ...")   
    .LoadContentFrom("LoadAssociatesForm", "Person")
    .Events(ev => ev.Close("onClose"))
        )
 
 
        <div class="responsive-message"></div>
 
 
        <script>
    function onClose() {
        $("#openassociates").show();
    }  
 
    $(document).ready(function () {
        $("#openassociates").bind("click", function () {
            $("#associatewindow").data("kendoWindow").open();
            $("#openassociates").hide();
        });
    });
        </script> 
 
 
        <p>
                    <input type="submit" id="btnPersonSave" value="Save" class="btn btn-lg btn-primary" />
                </p>
    }
</div>
 
 
<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);
        }
    }
 
    function indexAssociate(dataItem) {
        var data = $("#AssociateGrid").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }

Here is the content of the Kendo Window

@(Html.Kendo().Grid<PeopleSearchResultDO>()
            .Name("AssociateResultsGrid")
            .AutoBind(false)
            .HtmlAttributes(new { style = "display:none;" })
            .Columns(columns =>
            { 
                columns.Select().Width(50);
                columns.Bound(p => p.PersonId).Hidden(true);
                columns.Bound(p => p.FirstName).ClientTemplate("<strong>#: FirstName #</strong>");
                columns.Bound(p => p.MiddleName).ClientTemplate("<strong>#: MiddleName #</strong>");
                columns.Bound(p => p.LastName).ClientTemplate("<strong>#: LastName #</strong>");   
            })
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Read(read =>
                    read.Action("AssociatesSearchResults", "Person")
                    .Data("getPeopleSearchCriteria").Type(HttpVerbs.Post)
                )
                    ) 
            .NoRecords(n => n.Template("<div class='alert alert-danger'><h3 class='text-danger bold'>No records returned!</h3></div>")) 
            .Scrollable(s => s.Height("400px"))
) 
 
<p> <input type="button" id="btnAddAssociate" value="Add Selected Associate(s)" class="btn btn-default bold" style="display: none;" />
        </p>   
 
<script type="text/javascript">
 
    $("#btnAddAssociate").click(function () {
 
        $("#GridMessage_Associate").css("display", "none"); 
        var entityGrid = $("#AssociateResultsGrid").data("kendoGrid");
        var rows = entityGrid.select();  
       
        if (rows !== undefined) { 
            rows.each(function (index, row) {
 
                var selectedItem = entityGrid.dataItem(row);
                // selectedItem has EntityVersionId and the rest of your model
 
                var assogrid = $("#AssociateGrid").data("KendoGrid");
                assogrid.dataSource.add(
                    {
                        PersonId: selectedItem.PersonId,
                        FirstName: selectedItem.FirstName,
                        MiddleName: selectedItem.MiddleName,
                        LastName: selectedItem.LastName,
                        DOB: selectedItem.DOB,
                        Age: selectedItem.Age,
                        LastFourOfSSN: selectedItem.LastFourOfSSN,
                        AddressLine1: selectedItem.AddressLine1,
                        CityOther: selectedItem.CityOther,
                        GenderShortName: selectedItem.GenderShortName,
                        RaceShortName: selectedItem.RaceShortName
                    });
 
                $("#AssociateGrid").css("display", "block");   
                //clear selected items in parent grid 

 //finally close modal window
        var myWindow = $("#associatewindow");
        myWindow.data("kendoWindow").close(); 
            });
        }
        else {               
            $("#AssociateGrid").css("display", "none");
        }  
    })   
</script>

Is there another way to get the multiselect to stay open other then having autoClose set to false?

I would like it to stay open only while the user is pressing ctrl, so that they could select multiple items and when they release the ctrl key to would close the multiselect, or if they only want to select one they would not have press ctrl and it would close right after they have selected an item.

Welcome,
I've got a grid , with grid row details like here:
https://demos.telerik.com/kendo-ui/grid/detailtemplate

also each grid ( "master" and "details") have a checkbox select column like here
https://demos.telerik.com/kendo-ui/grid/checkbox-selection

My grids have local javascript variable (array) which is bound, in master with filter "ParentId == null" , in details "ParentId == e.data.Id".

My problem is:
when i right click on master grid - everything is ok.
when i right click on details grid - i get from e.target item from master grid ( i click second item in detail grid -> i get second item in master grid etc.)

Question:
What am I doing wrong? How to fix it?

Source:
function initMasterGrid() {
    $("#modalGrid").kendoGrid({
        dataSource: {
            data: gridSource,
            pageSize: 20,
            filter: { field: "ParentId", operator: "eq", value: null },
            schema: {
                model: {
                    id: "Id"
                }
            }
        },
        height: 550,
        scrollable: true,
        resizable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        change: onChange,
        detailTemplate: kendo.template($("#detailTemplate").html()),
        detailInit: detailInit,
        dataBound: function () {
            //                    this.expandRow(this.tbody.find("tr.k-master-row").first().html);
            var tmpGrid = this;
            tmpGrid.tbody.find("tr[role = 'row']").each(function () {
                var id = tmpGrid.dataItem(this).Id;
                if (expanded.hasOwnProperty(id) && expanded[id]) {
                    tmpGrid.expandRow(this);
                }
            });
        },
        persistSelection: true,
        columns: [
            { selectable: true, width: "30px", headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center" } },
            { field: "Id", title: "Id", width: "50px" },
            { field: "ParentId", title: "ParentId", width: "50px" },
            { field: "Name", title: "Nazwa", width: "100px" },
            { field: "Number", title: "Liczba", width: "200px" },
            { command: { text: "Usun", click: RemoveRow }, title: " ", width: "50px" }
        ],
        detailExpand: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = true;
        },
        detailCollapse: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = false;
        }
    });

    $("#nameField").kendoComboBox({
        dataTextField: "Text",
        filter: "contains",
        minLength: 3,
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: "/api/entityname/getnames"
            }
        }
    });
    $("#quantityField").kendoNumericTextBox({
        type: "number"
    });

    var menu = $("#menu"),
        original = menu.clone(true);

    original.find(".k-state-active").removeClass("k-state-active");
    initMenu();
}

function initMenu() {
    var menu = $("#menu").kendoContextMenu({
        orientation: "vertical",
        target: "#modalGrid",
        //        filter: ".k-detail-row tbody tr[role='row']",
        filter: "tr[role='row']",
        animation: {
            open: { effects: "fadeIn" },
            duration: 500
        },
        select: ContextMenuHandler,
        open: AddMenuItems
    });
};
function detailInit(e) {
    var detailRow = e.detailRow;

    detailRow.find(".tabstrip").kendoTabStrip({
        animation: {
            open: { effects: "fadeIn" }
        }
    });

    detailRow.find(".groupInfo").kendoGrid({
        dataSource: {
            data: gridSource,
            filter: { field: "ParentId", operator: "eq", value: e.data.Id },
            schema: {
                model: {
                    id: "Id"
                }
            }
        },
        detailTemplate: kendo.template($("#detailTemplate").html()),
        detailInit: detailInit,
        dataBound: function () {
            var tmpGrid = this;
            tmpGrid.tbody.find("tr[role = 'row']").each(function () {
                var id = tmpGrid.dataItem(this).Id;
                if (expanded.hasOwnProperty(id) && expanded[id]) {
                    tmpGrid.expandRow(this);
                }
            });
        },
        change: onChange,
        persistSelection: true,
        columns: [
            { selectable: true, width: "30px", headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center" } },
            { field: "Id", title: "Id", width: "50px" },
            { field: "ParentId", title: "ParentId", width: "50px" },
            { field: "Name", title: "Nazwa", width: "100px" },
            { field: "Number", title: "Liczba", width: "100px" },
            { command: [{ text: "Usuń", click: RemoveRow }, { text: "Usuń z grupy", click: RemoveFromPackage }], title: " ", width: "60px", attributes: { style: "text-align:center" } }
        ],
        detailExpand: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = true;
        },
        detailCollapse: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = false;
        }
    });
}

function AddMenuItems(e) {  
    console.log(item.Id);

// Add options to context Menu

initMenu()
}

I'm trying to create a grid filter for my kendo grid, the column shows an ID value and I want the filter to search based on the text.
For example: Column has employee ID and I want to search the grid with employee name but employee name is not a column. (This is as per the requirement)
I've managed to make the autocomplete work and load the employee names but how to I get the employee ID and filter the grid?