Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.0K+ views

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? 

 

Daniel
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 19 May 2020
3 answers
729 views

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++;
        });
    });
}

Veselin Tsvetanov
Telerik team
 answered on 19 May 2020
6 answers
2.6K+ views
I need to create a calculated column in Kendo Grid within ASP.Net. Something like this: http://jsbin.com/ojomul/89/edit where Full name is a calculated column. I tried doing this using using kendo server controls but unable to make it work. Here is my code:What I need is have the Total column calculated by the javascript function and update the UI automatically. Thanks

@(Html.Kendo().Grid(Model)   
  .Name("Grid")
  .Columns(columns =>
  {
      columns.Bound(p => p.ProductId).Groupable(false);
      columns.Bound(p => p.ProductName);
      columns.Bound(p => p.UnitPrice);
      columns.Bound(p => p.Quantity);
      columns.Bound(p => p.Tax);
      columns.Bound(p => p.Total).ClientTemplate("#= calculate() #");
 
  })
  .Groupable()
  .Pageable()
  .Sortable()
  .Scrollable()
  .Filterable()
  .Editable(e=>e.Mode(GridEditMode.InCell))
 
  .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("Products_Read", "Product"))
      .PageSize(20)
      .Model(model =>
      {
          model.Id(p => p.ProductId);
          model.Field(p => p.ProductName);
          model.Field(p => p.UnitPrice);
          model.Field(p => p.Quantity);
          model.Field(p => p.Tax);
 
 
      })
 
 
  ))
 
<script type="text/javascript">
 
function calculate(e) {
 
    var result = p.UnitPrice * p.Quantity * p.Tax;
    return result;
}
</script>
Erik
Top achievements
Rank 1
Veteran
 answered on 19 May 2020
1 answer
107 views

Hello,

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

thank you .Manu

Veselin Tsvetanov
Telerik team
 answered on 18 May 2020
7 answers
491 views
Hey guys,

I'm using a standard MVC Kendo DropDownList on a partial view.

I have a ViewData.TemplateInfo.HtmlFieldPrefix set

The problem is that the initial value that is set in the model doesn't get transferred to the dropdown when it is rendered. As soon as I take away the prefix it works fine.

@(Html.Kendo().DropDownListFor(o => o.CCInfo.CCExpireMonth)
.DataValueField("Value")
.DataTextField("Text")
.Animation(false)
.Height(150)
.BindTo(Model.CCInfo.CCExpireMonthList)
)

At the suggestion of a few other posts here I've found that I can set .Value() explicitly to set the value.

Using .Name() also allows the initial value to be set if I set it to "CCInfo.CCExpireMonth" rather than with the prefix (apart from the fact that now it doesn't have a prefix so it doesn't play nice with the rest of my form)

Note: This does not affect the actual javascript version, only the MVC wrapper. In fact even copy/pasting the output from the MVC wrapper (input & script tags) directly into the html (albeit, having to set the prefix into the id/name explicitly), makes it work as expected.

I know I can use these solutions, but I was wondering if there was any sort of fix or update coming up for this bug.

Edit: I should also note that I am using the latest update (v2013.1.319)
Petar
Telerik team
 answered on 15 May 2020
4 answers
249 views

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 ?

 

Tsvetomir
Telerik team
 answered on 15 May 2020
7 answers
156 views

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 . .

Petar
Telerik team
 answered on 15 May 2020
2 answers
932 views

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.

Nikolay
Telerik team
 answered on 15 May 2020
4 answers
225 views

I have a Grid and was wondering if there is a way to use the standard CRUD screens from the MVC application.  The reason for this is I have the screens and I like using them as I have them already.  I wanted to use inline editing but I never could get a way to get the drop down list to show up correctly.  If not, is there an easy way to being up an Edit and Create Screen?  I just want an easy way edit (and also create) a record.

 

Thanks for any help.

Christine
Top achievements
Rank 1
Veteran
 answered on 14 May 2020
5 answers
524 views

Hello,

I currently have an ASP.NET MVC application that is primarily composed of a hierarchical grid and custom edit templates. I want to display a simple error page to indicate a failed database operation to the user.

I tried a standard approach adding the following to the Web.Config file: 

<customErrors mode="On"></customErrors>

I also added the following attribute at the beginning of my controller classes:

[HandleError(ExceptionType = typeof(DbUpdateException), View = "Error")]

The error page, Error.cshtml is located in the Views/Shared directory of the application.

I cannot get this to work. I can't even view the error page in the browser. I get a 404 error when I right click on the file and select view in browser.

Are there any general error handling guidelines for Telerik UI for ASP.NET MVC? I looked, but couldn't find anything fairly recent. If any such guidelines / documentation exists, where would I find it?

Thanks

Ianko
Telerik team
 answered on 14 May 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?