Hi, I'm in the middle of evaluating if I'm going to switch to Telerick (currently using DevExpress) and one of the control that is critical to my project is (what they call) the GridLookup. Essentially it's a combox which the user pulls down, showing a grid from which rows can be (multi)selected http://demos.devexpress.com/MVCxGridViewDemos/GridLookup/MultiSelect

It needs to be available for MVC (not ajax) and needs to be able to bind to SignalR. I don't know if that matters but I'm using VS 2013, ASP.NET (MVC), C#.

I've played around with the multi-select and a custom multi-columns combobox but they lack the grid's extra capabilities (such as grouping, filtering, sorting, etc..).

Any chance I can get to the same result (or close) using Telerik's component(s)?

 

Thank you :)

We are using batch editing in a grid that has now grown to have way too many columns.
We would like to reduce the number of columns (not mandatory values) in the grid to make it more presentable, but have an Edit button to display a popup containing the rest of the columns to edit.

How can this be done? Been hunting for ages, and unable to find a solution.

NB: I don't want to do a trip to the server to get the partial view to render, along with another hit on the DB to get the rest of the data. The view model already exists in the grid. I just want the popup to enable editing of the additional columns that we are not showing in the grid.

I cant seem to find where I am going wrong with this, i'm not seeing any javascript errors.

My update action is not being called. I notice that the Update button of the grid row takes 4-5 seconds to return to an edit. This grid is loaded via jquery load into a div. 

 

Here is the grids cshtml:

@model PathologyScheduling.Models.TaskScheduleViewModel
@using PathologyScheduling.Models;
@( Html.Kendo().Grid<PathologyScheduling.Models.TaskScheduleViewModelRecord>(Model.Records)
        .Name("TaskScheduleGrid")
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.InLine);
    })
    .ToolBar(tools => tools.Pdf())
    //.Scrollable()//scrolling => scrolling.Enabled(true).Virtual(false)) 
    .Resizable(r => r.Columns(true))
    .ColumnResizeHandleWidth(10)
    .HtmlAttributes(new { style = " width: 100%" })
    .Pdf(pdf => pdf
        .AllPages().Landscape()
            .FileName("TaskSchedule_" + @Model.SelectedScheduleId + ".pdf")
        .ProxyURL(Url.Action("Pdf_Export_Save", "Home")))
    .Columns(x =>
    {
        x.Command(item => item.Edit());
        x.Bound(item => item.Date).Format(@"{0:ddd (dd)}")
            .Title("Date").Locked(true);
        x.Bound(item => item.Value)
            .Title("FTE");
        x.Bound(item => item.SingleDay)
            .ClientTemplate("#= renderMultiSelect(data.SingleDay) #")
            .EditorTemplateName("StaffListSingleDay")
            .Title(TaskScheduleViewModelRecord.Constants.SingleDay);
        x.Bound(item => item.HalfDay)
            .ClientTemplate("#= renderMultiSelect(data.HalfDay) #")
            .EditorTemplateName("StaffListHalfDay")
            .Title(TaskScheduleViewModelRecord.Constants.HalfDay);
        x.Bound(item => item.Gross)
             .ClientTemplate("#= renderMultiSelect(data.Gross) #")
            .EditorTemplateName("StaffListGross")
             .Title(TaskScheduleViewModelRecord.Constants.Gross);
        x.Bound(item => item.LightMicroscopy)
             .ClientTemplate("#= renderMultiSelect(data.LightMicroscopy) #")
            .EditorTemplateName("StaffListLightMicroscopy")
            .Title(TaskScheduleViewModelRecord.Constants.LightMicroscopy);
        x.Bound(item => item.Pool2X)
              .ClientTemplate("#= renderMultiSelect(data.Pool2X) #")
            .EditorTemplateName("StaffListPool2X")
            .Title(TaskScheduleViewModelRecord.Constants.Pool2X);
        x.Bound(item => item.Pool15X)
              .ClientTemplate("#= renderMultiSelect(data.Pool15X) #")
            .EditorTemplateName("StaffListPool15X")
            .Title(TaskScheduleViewModelRecord.Constants.Pool15X);
        x.Bound(item => item.Pool1X)
              .ClientTemplate("#= renderMultiSelect(data.Pool1X) #")
            .EditorTemplateName("StaffListPool1X")
            .Title(TaskScheduleViewModelRecord.Constants.Pool1X);
        x.Bound(item => item.Pool075X)
              .ClientTemplate("#= renderMultiSelect(data.Pool075X) #")
            .EditorTemplateName("StaffListPool075X")
            .Title(TaskScheduleViewModelRecord.Constants.Pool075X);
        x.Bound(item => item.Pool05X)
              .ClientTemplate("#= renderMultiSelect(data.Pool05X) #")
            .EditorTemplateName("StaffListPool05X")
            .Title(TaskScheduleViewModelRecord.Constants.Pool05X);
        x.Bound(item => item.Pool025X)
              .ClientTemplate("#= renderMultiSelect(data.Pool025X) #")
            .EditorTemplateName("StaffListPool025X")
            .Title(TaskScheduleViewModelRecord.Constants.Pool025X);
        x.Bound(item => item.Gyne1X)
              .ClientTemplate("#= renderMultiSelect(data.Gyne1X) #")
            .EditorTemplateName("StaffListGyne1X")
            .Title(TaskScheduleViewModelRecord.Constants.Gyne1X);
        x.Bound(item => item.Gyne05X)
              .ClientTemplate("#= renderMultiSelect(data.Gyne05X) #")
            .EditorTemplateName("StaffListGyne05X")
            .Title(TaskScheduleViewModelRecord.Constants.Gyne05X);
        x.Bound(item => item.Gyne025X)
              .ClientTemplate("#= renderMultiSelect(data.Gyne025X) #")
            .EditorTemplateName("StaffListGyne025X")
            .Title(TaskScheduleViewModelRecord.Constants.Gyne025X);
        x.Bound(item => item.NonG)
              .ClientTemplate("#= renderMultiSelect(data.NonG) #")
            .EditorTemplateName("StaffListNonG")
            .Title(TaskScheduleViewModelRecord.Constants.NonG);
        x.Bound(item => item.HEM)
             .ClientTemplate("#= renderMultiSelect(data.HEM) #")
            .EditorTemplateName("StaffListHEM")
             .Title(TaskScheduleViewModelRecord.Constants.HEM);
        x.Bound(item => item.Sturgeon)
             .ClientTemplate("#= renderMultiSelect(data.Sturgeon) #")
            .EditorTemplateName("StaffListSturgeon")
             .Title(TaskScheduleViewModelRecord.Constants.Sturgeon);
        x.Bound(item => item.Biochemistry)
             .ClientTemplate("#= renderMultiSelect(data.Biochemistry) #")
            .EditorTemplateName("StaffListBiochemistry")
             .Title(TaskScheduleViewModelRecord.Constants.Biochemistry);
        x.Bound(item => item.Dermpath)
             .ClientTemplate("#= renderMultiSelect(data.Dermpath) #")
            .EditorTemplateName("StaffListDermpath")
            .Title(TaskScheduleViewModelRecord.Constants.Dermpath);
        x.Bound(item => item.Colpos)
             .ClientTemplate("#= renderMultiSelect(data.Colpos) #")
            .EditorTemplateName("StaffListColpos")
            .Title(TaskScheduleViewModelRecord.Constants.Colpos);
        x.Bound(item => item.Liver)
             .ClientTemplate("#= renderMultiSelect(data.Liver) #")
            .EditorTemplateName("StaffListLiver")
            .Title(TaskScheduleViewModelRecord.Constants.Liver);
        x.Bound(item => item.QACytology)
             .ClientTemplate("#= renderMultiSelect(data.QACytology) #")
            .EditorTemplateName("StaffListQACytology")
            .Title(TaskScheduleViewModelRecord.Constants.QACytology);
        x.Bound(item => item.QAHistology)
             .ClientTemplate("#= renderMultiSelect(data.QAHistology) #")
            .EditorTemplateName("StaffListQAHistology")
            .Title(TaskScheduleViewModelRecord.Constants.QAHistology);
        x.Bound(item => item.ResidencyTraining)
             .ClientTemplate("#= renderMultiSelect(data.ResidencyTraining) #")
            .EditorTemplateName("StaffListResidencyTraining")
            .Title(TaskScheduleViewModelRecord.Constants.ResidencyTraining);
    })
    .Selectable()
    .DataSource(dataSource => dataSource
        .Ajax()
            .Events(events => events.Error("error_handler"))
        .Model(model =>
             {
                 model.Id(p => p.Id);
                 model.Field(p => p.Date).Editable(false);
                 model.Field(p => p.Value).Editable(false);
                 model.Field(p => p.SingleDay).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.HalfDay).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Gross).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.LightMicroscopy).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Pool2X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Pool15X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Pool1X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Pool075X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Pool05X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Pool025X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Gyne1X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Gyne05X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Gyne025X).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.NonG).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.HEM).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Sturgeon).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Biochemistry).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Dermpath).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Colpos).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.Liver).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.QACytology).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.QAHistology).Editable(true).DefaultValue(new List<SelectListItem>());
                 model.Field(p => p.ResidencyTraining).Editable(true).DefaultValue(new List<SelectListItem>());
             })
            .Update(update => update.Action("UpdateTaskSchedule", "Home").Type(HttpVerbs.Post))
            .Read(read => read.Action("TaskSchedule", "Home", @Model.SelectedScheduleId))
         )
)
 <script>
                    function renderMultiSelect(selectListArray) {
                        if (selectListArray != undefined && selectListArray[0] != undefined) {
                            var displayText;
                            $.each(selectListArray, function (index) {
                                if (displayText == undefined) {
                                    displayText = selectListArray[index].Text + ', ';
                                }
                                else {
                                    displayText = displayText + selectListArray[index].Text + ', ';
                                }
                            });
                            return displayText.slice(0, -2);
                        }
                        else {
                            return "";
                        }
                    }
                    function TaskScheduleRefreshGrid(e) {
                        debugger;
                        var grid = $("#TaskScheduleGrid").data("kendoGrid");
                        grid.dataSource.read({ "id": $("#TaskScheduleIdSelector").val() });
                    }

 </script>

 

I have an editor template for most of the columns which is the same for most of the records:

@model List<SelectListItem>
        @(Html.Kendo().MultiSelectFor(x=>@Model)
            .Name("StaffListBiochemistry")
            .BindTo((System.Collections.IEnumerable)ViewData["Staff"])
            .DataTextField("Text")
            .DataValueField("Value")
        )

 

 

Hi,

I have to render my partial view in html string (in controller), to return json object.

I found this function that works very well :

 

With a kendo grid in partial view, i'm getting a "System.NullReferenceException" on the declaration  @(Html.Kendo().Grid(.....

If I return the view with a "Return view" in my controller, it's ok.

 

My grid:

 

mvDigicode and tabTraduction are not null. 

 

That's work with the kendo chart module.

What's wrong with the grid ?

 

Many thanks, 

 

HI,,

i am try to use grid view with inline editing function.

now i have write this code:-- on cshtml.

<script>

                $(document).ready(function () {

                    $("#countryzone-grid").kendoGrid({

                        dataSource: {

                            type: "json",

                            transport: {

                                read: {

                                    url: "@Html.Raw(Url.Action("ParticipatingCountry", "Program", new {id = Model.Id } ))",

                                    type: "POST",

                                    dataType: "json",

                                    contentType: "application/json"

                                },

                                create: {

                                    url: "@Html.Raw(Url.Action("EditCountries", "Program"))",

                                    type: "POST",

                                    dataType: "json"

                                },

                                update: {

                                    url:"@Html.Raw(Url.Action("SettingUpdate", "Setting"))",

                                    type: "POST",

                                    dataType: "json"

                                },

                                destroy: {

                                    url: "@Html.Raw(Url.Action("SettingDelete", "Setting"))",

                                    type: "POST",

                                    dataType: "json"

                                },

                                parameterMap: function(data, operation) {

                                    if (operation != "read") {

                                        return data;

                                    } else {

                                        //for some reasons only such "Filter" data be parsed

                                        return JSON.stringify(data);

                                    }

                                }

                            },

                            schema: {

                                data: "Data",

                                total: "Total",

                                errors: "Errors",

                                model: {

                                    id: "Id",

                                    fields: {

                                        CountryId: { editable: true, type: "number" },

                                        CountryName: { editable: true, type: "string"},

                                        PointsValue: { editable: true, type: "number"},

                                        Id: { editable: false, type: "number" },

                                        ProgramId: { editable: false, type: "number" }

                                    }

                                }

                            },

                            requestEnd: function (e) {

                                if (e.type == "create" || e.type == "update") {

                                    this.read();

                                }

                            },

                            error: function (e) {

                                display_kendoui_grid_error(e);

                                // Cancel the changes

                                this.cancelChanges();

                            },

                            pageSize: 5,

                            serverPaging: true,

                            serverFiltering: true,

                            serverSorting: true

                        },

                        pageable: {

                            refresh: true

                        },

                        sortable: true,

                        toolbar: ["create"],

                        editable: {

                            confirmation: false,

                            mode: "inline"

                        },

                        scrollable: false,

                        columns:[{

                            field: "CountryId",

                            title: "Admin.Program.participatingCountryName",

                            editor: countryDropDownEditor,

                            template: "#:Store#"

                        },{

                            field: "PointsValue",

                            title: "Admin.Program.PointsValue"

                        },{

                            command: ["edit", "destroy"], title: "",width: "200px"

                        }]    

                    });

                });

                

                

                function countryDropDownEditor(container, options) {

                    $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:CountryId"/>')

                        .appendTo(container)

                        .kendoDropDownList({

                            autoBind: false,

                            dataTextField: "Name",

                            dataValueField: "Id",

                            dataSource: {

                                type: "json",

                                transport: {

                                    read: {

                                        dataType: "json",

                                        type: 'POST',

                                        url:
"@Html.Raw(Url.Action("DropDownListCountries", "Program", new {id =
Model.ClientId } ))"

                        }

                    }

                }

            });

        }

            </script>

by this code when i click on update button there is an ajax call

this is data of post tab in ajax call ( view on browser by firebug)

CountryId  0
CountryName
Id  0
PointsValue 2
ProgramId  0

there is data 0 and 2

on controlller side my code is

[HttpPost]

        public ActionResult EditCountries([Bind(Exclude = "Id")] ParticipatingCountryModel model)     <== Here i put break point 

        {

            return null;
        }

by break point i see that there is ajax call come means action call but there is an empty model ,,, alll values are 0, there is an value 2 but there is 0 why?

is am i doing wrong?

Please advice how to do?

Regard,
vinit

Hi,

We are using a detail row on one of our grids, but have noticed that there are a couple of issues with the way we have done it and I am wondering if there is a way to do the following:

 1. When we re-order the columns on the main grid, re-order the same columns on the detail row.

 2. When we re-size the columns on the main grid, re-size them on the detail row.

 The problem is that we have hard coded the order currently, but are allowing the user the ability to re-order, thus presenting us with the issues above.

Is there an easy way of achieving the above, or will it be a case of manually manipulating them both with javascript?

Cheers,

Gareth

Is there are document that maps the MVC Razor syntax to the raw Kendo UI notation?

 

I find several examples using Kendo UI that suit my needs but I need to convert them to run in an MVC project.

 

It's not always clear how the syntax matches from one to the other.

 

Thanks,

Ken

 

 CONTROLLER

 

MODEL

When the user clicks Update the cell in the grid isn't being populated with the EditorTemplate hyperlink value.

EditorTemplate:
@(Html.Kendo().Editor()
.Name("EVIDENCE")
.HtmlAttributes(new { style = "width: 250px;height:25px" })
.Tools(tools => tools.Clear().CreateLink())
.Value(@<text> </text>)
)

view:
<div class="wide-grid">
@Html.AntiForgeryToken()
@(Html.Kendo().Grid(Model.TASKs)
.Name("TasksGrid")
.Columns(columns =>
{
columns.Command(command => { command.Edit(); }).Width(50);
columns.Bound(c => c.STATUS).Visible(false);
columns.ForeignKey(c => c.RESP_ORG_ID, (System.Collections.IEnumerable)ViewData["RespOrgs"], dataFieldText: "RESP_ORG_DESC", dataFieldValue: "RESP_ORG_ID").Title("Resp Org").Width("200px");
columns.ForeignKey(c => c.ACTIVITY_ID, (System.Collections.IEnumerable)ViewData["Activities"], dataFieldText: "ACTIVITY_DESC", dataFieldValue: "ACTIVITY_ID").Title("Activity");
columns.ForeignKey(c => c.SOURCE_DOC_ID, (System.Collections.IEnumerable)ViewData["SourceDocs"], dataFieldText: "SOURCE_DOC_DESC", dataFieldValue: "SOURCE_DOC_ID").Title("Source Doc").ClientTemplate("<a href='#=SOURCE_DOC_PATH#'>#=SOURCE_DOC_DESC#</a>").Width(125);
columns.ForeignKey(c => c.ROLE_ID, (System.Collections.IEnumerable)ViewData["Roles"], dataFieldText: "ROLE_DESC", dataFieldValue: "ROLE_ID").Title("Role");
columns.Bound(c => c.RESP_ORG_ID).Visible(false);
columns.Bound(c => c.ACTIVITY_ID).Visible(false);
columns.Bound(c => c.ROLE_ID).Visible(false);
columns.Bound(c => c.DOC_REF).Width(75);
columns.Bound(c => c.DUE_DATE).EditorTemplateName("DueDate").Width(75);
columns.Bound(c => c.COMPLETED).Width(75);
columns.Bound(c => c.TASK_DESC).EditorTemplateName("TaskDescription").Width(500);
columns.Bound(c => c.EVIDENCE).EditorTemplateName("TaskEvidence").Width(15);
columns.Bound(c => c.CTL_NO);
columns.Bound(c => c.ACQUISITION_ID).Visible(false);
})
.ToolBar(toolbar => toolbar.Create().Text("Add New Task"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.ServerOperation(false)
.Events(events => events.RequestEnd("requestEnd"))
.Model(model =>
{
model.Id(a => a.TASK_ID);
})
.Update(update => update.Action("Edit", "Task").Data("sendAntiForgery"))
.Read(read => read.Action("TaskGrid_Read", "Task", new { id = @Model.ACQUISITION_ID }))
.Create(create => create.Action("Create", "Task").Data("sendAntiForgery"))
)
)
</div>

Hi,

in former WebForm projects I was using asp:DropDownList mostly in these kind of scenarios:

1) The DL was fully rendered server side and the selectable values have been populated using Object/SQL/LinqDataSource on the server.

2) The DL was two-way-bound (by the Bind or Eval statement) to a property of an arbitrary data model, e.g. in the context of a ListView or FormView.

To give you an example of the use case: Say a "status" property in a model need to have values like "On", "Off", "Unknown" and nothing else. An ObjectDataSource ensured, that the DL only contained the values for selection. Then the real model was queried in order to find the selected value and that was selected after Page_Load automatically. Once the user changed the selected value in the "status" DL, the new value was posted back to the server.

That worked fine.

I know how to achieve 1) in the "Kendo World", but I'm wondering, how I could simultaneously "two-way-bind" the DL to another model in order to set the "SelectedItem" form another data model as well as to POST finally changes made by the user.

Any pointer welcome

TIA