Hi All,

I want to display an icon in the kendo grid at the last with click event functionality ,Kindly provide me a sample .Please find the attached screen shot how it should be.

Thanks & Regards,

Sampath

Hi ,

I am using the Filter row in my grid, it works fine if there are no client template. but if there are any client template it gives error.

@(Html.Kendo().Grid<Document>()
                        .SetDefaults()
                        .Name("gridDocuments")
                        .Groupable()
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .Events(x => x.DataBinding("OnDataBound").Edit("EditGrid"))
                        .Columns(columns =>
                        {
                            columns.Bound(x=>x.CategoryCode).Filterable(false).ClientTemplate(#=data.CategoryDescription#").EditorTemplateName("CategoryTypeMultiselect"); 
                            columns.Bound(x => x.AssetTag).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                            columns.Command(command =>
                            {
                                command.Edit().Text(" ").CancelText(" ").UpdateText(" ");
                                command.Custom("Del").Text("<span class='k-icon k-i-delete'></span>").Click("PageGridDelClicked");
                            }).Width("3%").HtmlAttributes(new { style = "text-align:center;background:#=RowColor#" });
                        })
                        .Selectable(selectable => selectable
                        .Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))
                        .Navigatable()
                        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                        .DataSource(dataSource => dataSource
                        .SetDefaults()
                        .PageSize(20)
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.AssetTag).Editable(false);
                            model.Field(p => p.CategoryType).Editable(true);
                        })
                        .Read(x => x.Action("GetSelectedData", "Assets", new { CacheKey = PageUID }).Data("getAssetId"))
                        .Update(x => x.Action("UpdateDocuments", "Assets", new { CacheKey = PageUID }).Data("getAssetId"))))

if i enable filter for Categorycode i am getting error.

Please suggest me how to use the Filter row when we have ClientTemplate in the column.

Hey guys,

I already found other forum threads about grids tied to a dictionary. Unfortunately all the cases are very complicated (for me), so that I have to create a new thread with a really basic case to understand. 
https://www.telerik.com/forums/dictionary-keys-binding 

So I have a view without a model containing a grid like this:
@(Html.Kendo().Grid<Dictionary<string, int>>()
   .Name("gridStatus")
   .Columns(columns =>
   {
      columns.Template(c => c.Keys.ElementAt(0).Title("Name"));
      columns.Template(c => c.Values.ElementAt(0).Title("Count"));
   })
   .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("RetrieveData", "Settings"))
   )
)

With this code I already can fill my grid with "data". But the rows of my grid are empty till now. But when I expect 3 datasets in my dictionary, I have 3 rows in my grid. So I think, that I'm near the solution. I think the columns.Template() functionality isn't implemented correctly. Do I have to create somethink like a template.cshtml to actually use a template? Or can I implement the "template" inline?

Can anyone help me? 

Hello, I am using the Telerik  Kendo UI MVC Gantt control and want to display multiple tasks on one row.

As far as I know, this is not supported in Gantt control without doing some hacking in css and javascript. 

What I am currently trying out is to use UnderScore.Js to group my data and then adjust the vertical

displacement by setting the css top property. I am loading multiple tasks for each employee into the Gantt and 

I want to get these tasks on one line. In addition, I have to hide the rows that then will not show any data anymore.

My business requirement is to make the Gantt display more compact.

I am hooking into the OnDataBound client-side event of Gantt control and the code below contains commented code 
to try to patch the Gantt view. Problem now is that the adjustment does not look good aligned. The data is not aligned well,
trying to hide the rows in the Gantt control does not help. In addition, the code is way to slow as the jQuery code is far too slow. 

I got about 4-500 rows in my Gantt control. The javascript code below contains the commented code where I have tried to adjust 
the Gantt control to support Multiple tasks on a row. 

Is there any elegant and easy way to do this?

function onDataBound() {
    //debugger;
  
    var gantt = this;

    // var ganttasks = [];

    // gantt.element.find(".k-task").each(function (e) {
    //     //debugger;
    //     var taskuid = $(this).attr("data-uid");
    //     var dataItem = gantt.dataSource.getByUid(taskuid);
    //     ganttasks.push({ uid: taskuid, ganttask: dataItem });
    // });

    ////underscore js used below
    // var that = this;
    // var gantt = that;
    var ganttdatasource = $("#gantt").data('kendoGantt').dataSource.data();
    _.chain(ganttdatasource).sortBy('EmployeeName').groupBy('PrsPersonId').sortBy('start').each(function (g) {
        var gindxgantt = 0;
        var isBigona = false;
        _.each(g, function (gi) {

            if (gi.PrsPersonId === 9050) {
                //debugger;
                isBigona = true;
            }

            //debugger;
            if (_.first(g).uid === gi.uid) {
                //this is the first row in the group, start a runner indexing variable
            }
            if (_.first(g).uid !== gi.uid) {
                //This is not the first item, hide the row itself and move task in the gantt up a given set of pixels
                //debugger;
                //var ganttselector = "div[data-uid=" + gi.uid + "]:first";

                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("display", "block");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("height", "1px");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().first().css("background", "yellow");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("padding", "0px");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("margin", "0px");

                //var ganttverticaldisplacement = (-32 * gindxgantt) + "px";
                //$(ganttselector).css("top", ganttverticaldisplacement);
                //if (isBigona) {
                //    $(ganttselector).css("background-color", "red");
                //}
                //var ganttrowselector = "tr[data-uid=" + gi.uid + "]";
                //if (gindxgantt >= 1) {
                //    $(ganttrowselector).remove();
                //}
            }
            gindxgantt++;
        });
    });
}

Hello,

How can I check availability from a date on server-side ?

thank you .Manu

Question:

Page A , i'm using kendo grid with hashtag for display output then i use ajax to acquire data from another page which also kendo grid too then load data into kendo window inside Page A, but I stuck with invalid template due to another page also use hash characters to display value too, and if i use escape hash then i can't get value from it , what should i do ?

Hello There,

I have a resource in my Scheduler and there is the option DataColorField where I can give every Option in the list a specific color.

I'm trying to do the same but with a DropDownListFor in my CustomEditorTemplate.

Thanks in Advance . .

Hello,

When the grid is in edit mode, pressing the ENTER key cancels the edit mode. Each row has several columns of text fields and the upload button (Kendo upload control) is on the last column.
With the Navigatable option, I can tab on each column to edit the text and when I tab into the upload button column and hit enter to upload files, the edit mode is gone and no pop-up window to select files. This behavior is the same with text fields; if I hit the enter key, the fields are closed (not open for edit).  

How do I fix this? It's the grid that doesn't allow the upload control to use the enter key to launch it. Only the mouse CLICK can launch the upload button but I need the upload button to work with the enter key as well.

Below are the options of the grid:

                                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                                            .Pageable()
                                            .Sortable()
                                            .Scrollable()
                                            .Filterable()
                                            .Events(e => e.FilterMenuInit("filterMenuInit"))  <==  I tried this but not working
                                            .Navigatable()

    function filterMenuInit(e) {
        if (e.field == "PdfFileUpd") {  <== I used the browser debugging tool and found this the ID of upload button
            e.container.find("input").keydown(function (e) {
                if (e.keyCode === 13) {
                    $(this).focus().trigger('click');
                }
            });
        }
    }

Below is the columns in the Grid for the upload option:
columns.Bound(p => p.PdfFileUrl).EditorTemplateName("PdfFileUrl").Title("My File").ClientTemplate("Upload").Sortable(false).Filterable(false);

Other than that, the grid works fine. Does anyone know how I can make the Enter key to work normally in edit mode?

Thank you.