Hi,
I'm using a kendo grid to display my data.  The grid is editable, through a pop-up.  There is the problem I have : when the data is updated by a user in the pop-up window, if  a textbox contains a quote symbol, the string value is truncated.  The quote symbol is removed from the string and the rest of the string value after the quote symbol is also truncated.  I've tried to find a solution or a work-around, without success.  The data is lost before the data is sent to the controller Save/Post method.  Do you know a solution for this problem ?
There is the kendo grid declaration code :

@(Html.Kendo().Grid<Program.LevelModel>()
 .Name("MyLevels")
 .Columns(columns =>
 {
 columns.Bound(p => p.LevelId)
 .Visible(false);
 columns.Bound(p => p.Level)
 .Visible(false);
 columns.Template(@<text></text>)
 .ClientTemplate("#= LevelDisplayed # <input type='hidden' name='AlertLevels[#= indexGrid(data, 'MyLevels')#].Level' value='#= Level #' />" +
 "<input type='hidden' name='AlertLevels[#= indexGrid(data, 'MyLevels')#].LevelId' value='#= LevelId #' />" +
 "<input type='hidden' name='AlertLevels[#= indexGrid(data, 'MyLevels')#].AlmostMessageEn' value='#= AlmostMessageEn #' />" +
 "<input type='hidden' name='AlertLevels[#= indexGrid(data, 'MyLevels')#].AlmostMessageFr' value='#= AlmostMessageFr #' />" +
 "<input type='hidden' name='AlertLevels[#= indexGrid(data, 'MyLevels')#].AchievedMessageEn' value='#= AchievedMessageEn #' />" +
 "<input type='hidden' name='AlertLevels[#= indexGrid(data, 'MyLevels')#].AchievedMessageFr' value='#= AchievedMessageFr #' />")
 .HtmlAttributes(new { @class = "hl-align-center" })
 .Width(235)
 .HeaderTemplate(Html.HlText("LEVEL"))
 .HeaderHtmlAttributes(new { @class = "hl-align-center" });
 columns.Command(command => { command.Edit().UpdateText(" ").CancelText(" ").Text(" "); })
 .HtmlAttributes(new { @class = "hl-align-center" })
 .HtmlAttributes(new { style = "text-align: center;" })
 .HeaderHtmlAttributes(new { @class = "hl-align-center" })
 .HeaderTemplate(Html.HlText("MESSAGE_ALMOST_EN"));
 columns.Command(command => { command.Edit().UpdateText(" ").CancelText(" ").Text(" "); })
 .HtmlAttributes(new { @class = "hl-align-center" })
 .HtmlAttributes(new { style = "text-align: center;" })
 .HeaderHtmlAttributes(new { @class = "hl-align-center" })
 .HeaderTemplate(Html.HlText("MESSAGE_ALMOST_FR"));
 columns.Command(command => { command.Edit().UpdateText(" ").CancelText(" ").Text(" "); })
 .HtmlAttributes(new { @class = "hl-align-center" })
 .HtmlAttributes(new { style = "text-align: center;" })
 .HeaderHtmlAttributes(new { @class = "hl-align-center" })
 .HeaderTemplate(Html.HlText("MESSAGE_ACHIEVED_EN"));
columns.Command(command => { command.Edit().UpdateText(" ").CancelText(" ").Text(" "); })
 .HtmlAttributes(new { @class = "hl-align-center" })
 .HtmlAttributes(new { style = "text-align: center;" })
 .HeaderHtmlAttributes(new { @class = "hl-align-center" })
 .HeaderTemplate(Html.HlText("MESSAGE_ACHIEVED_FR"));
 @*columns.Template(@<text></text>)
 .ClientTemplate("<label class='form-checkbox form-normal form-primary form-text #= DisabledMessageClass #' style='padding-left:0px'> <input type='checkbox' class='chkbx' /> </label>")
 .HeaderHtmlAttributes(new { @class = "hl-align-center" })
 .HeaderTemplate(Html.HlText("MESSAGE_DISABLED_MSG"))
 .HtmlAttributes(new { @class = "hl-align-center" });*@
columns.Bound(p => p.AlertDisabled)
 .ClientTemplate("<input type='checkbox' id='AlertDisabled' name='AlertDisabled' #= AlertDisabled ? checked='checked': '' # value='#= AlertDisabled #' class='chkbx' onchange='alertDisabledClick(this)' />" +
 "<input type='hidden' name=AlertLevels[#= indexGrid(data, 'MessageLevels')#].AlertDisabled value = '#= AlertDisabled #' />")
 .HtmlAttributes(new { @class = "hl-align-center" })
 .HeaderHtmlAttributes(new { @class = "hl-align-center" });
 })
 .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AlertSelection"))
 .Events(events => events.Save("onSave"))
 .Events(e => e.Cancel("onCancelEdit"))
 .Events(e => e.Edit("onEdit"))
 .Events(e => e.DataBound("onDataBound"))
 .Navigatable()
 .AutoBind(false)
 .DataSource(dataSource => dataSource
 .Ajax()
 .Read(read => read.Action("Levels_Read", "Program", new { Id = Model.ProgramId }))
 .Model(model =>
 {
 model.Id(p => p.LevelId);
 })
 .Update(update => update.Action("Update", "Program"))
 )
 .HtmlAttributes(new { @class = "k-fixed-grid" })
 )

I'm progressively adding children to the HierarchicalDataSource via AJAX calls that populate the items array of an exists data item with the returned results.

The only way I've found to refresh the diagram is to recreate the HierarchicalDataSource with the revised data, and then call diagram.setDataSource(...).

Is that the correct method? It seems a bit heavy handed to me.

Thanks,
Gary

Hello all.

I'm looking to create a bare-bones, Kendo-powered front end for a web application.  The back end is already written (in MS Web API), and for deployment and infrastructure reasons, I'd like to keep the API project and the front-end project separate and distinct.

I'm looking for either a VS solution template or a guide for a minimal front end.  The only KendoUI project template I see includes MVC, and is over 80MB in size with several hundred (if not thousands) of files.  I'm trying to avoid bloating the solution with functionality we don't intend to use.

Is there an up-to-date resource to accomplish what I'm trying?

TIA.

John

I am using Kendo UI Web v2012.3.1315.

On my grid there is a DOB field for Date of Birth.  I have attached the DOB values that show in the grid.

I build my data as a string in JSON format here is an example: The columns are also defined in JSON: Same with the Schema Model: The DOB column sorts mostly fine.  In decending order the blanks are all at the end of the grid which is okay.  But in Ascending order the blanks start at position 49 and position 48 is incorrect: You would think Ascending would put the blanks at the start and not mess up the sort order of one item.

Any ideas?

Hey, does anyone know how to solve this problem I am having (See image below). The issues are:
1. In the red-highlighted section, when I click export to pdf everything shows correctly. However if I export to excel I get blank fields (again see image below). Why is this?!?!?!

2. In the orange-highlighted section, the field is suppose to be empty, so the excel is actually displaying the grid correctly. But the PDF is displaying the value "null". Why is that?!?!

Hi,

I'm trying to make a backoffice order editor using catalog with referenced products.

Basically i've a Grid with severals columns
- Product Picture
- Product Code
- Description
- Quantity
- Unit Amount
- VAT Rate
- Total Amount

Product Code editor is a DropDownList on which we can select the desired product.
After selecting product i need to set all others cells values on this row but i've no idea how to do that.

VAT Rate is a ForeingKey Column (DropDownList Editor)

Any help on this ?

Thanks in advance,
Best Regards.

Hi,

I have a screen with 3 vertical panes, but one of the panes is not required for all the interactions and I would like to hide it. I know I can remove the pane, but then means I have to reload content every time.

 

Is there a way to hide the pane (and the bar) and then, when needed make it reappear?

 

matt

Hi everyone,

 

When I load a page that contains a Kendo grid, I check if there is a state saved in the localStorage of the user. If so I set these options to the grid.
Here is my code :

var grid = $("#" + gridName).data("kendoGrid");
                var options = localStorage["kendo-" + gridName];
                if (options) {
                    var toolBar = $("#" + gridName + " .k-grid-toolbar").html();
                    grid.setOptions(JSON.parse(options));
                    $("#" + gridName + " .k-grid-toolbar").html(toolBar);
                    $("#" + gridName + " .k-grid-toolbar").addClass("k-grid-top");
                }

 

My issue is : when the grid contains a template that format a date, the format is not applied.

Here is the code of my grid :

@(Html.Kendo().Grid<RepairCheckViewModel>()
      .Name("GridOpenCalls")
      .Columns(columns =>
      {
          columns.Bound(c => c.IntId).Title(Resources.TicketId);
          columns.Bound(c => c.RepairCheck.Engineer).Title(Resources.Engineer);
          columns.Bound(c => c.RepairCheck.EpId).Title(Resources.EPId);
          columns.Bound(c => c.RepairCheck.ProductDescription).Title(Resources.ProductDescription);
          columns.Bound(c => c.ReceptionDate).Title(Resources.ReceptionDate);
          columns.Bound(c => c.RepairCheck.MaterialStatus).Title(Resources.HardwareStatus);
          columns.Bound(c => c.RepairCheck.MaterialSite).Title(Resources.HardwareSite);
          columns.Bound(c => c.RepairCheck.MaterialLocalisation).Title(Resources.HardwareLocation);
      })
      .ToolBar(tools =>
      {
          tools.Excel();
      } )
      .Excel(excel => excel
          .FileName("OpenCalls.xlsx")
          .Filterable(true)
          .ProxyURL(Url.Action("Export_Save", "Base"))
          .AllPages(true)
      )
      .Events(e => e.DataBound("resolveGrouping").DataBound("saveState"))
      .Resizable(resize => resize.Columns(true))
      .Sortable()
      .Groupable(group => group.Enabled(true))
      .Filterable(filtr => filtr.Enabled(true))
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(5)
          .PageSizes(new[] {30, 60, 100})
      )
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(30)
          .ServerOperation(true)
          .Read(read => read.Action("GetOpenEpsdTickets", "Dashboard"))

      )
      .ClientRowTemplate(
          "# if (RepairCheck.MaterialStatus == \"USE\") {# <tr class=\"highlight\"> #}else{# <tr> #}#" +
                  "#var groups = $(GridOpenCalls).data('kendoGrid').dataSource.group().length;#" +
        "#if(groups > 0) {#" +

        "#= new Array(groups + 1).join('<td class=\"k-group-cell\"></td>') #" +
        "#}#" +

          "<td>#= (IntId == null) ? ' ' : IntId #</td>" +
          "<td>#= (RepairCheck.Engineer == null) ? ' ' : RepairCheck.Engineer #</td>" +
          "<td> #=RepairCheck.EpId# </td>" +
          "<td> #=RepairCheck.ProductDescription# </td>" +
          "<td> #=kendo.toString(kendo.parseDate(RepairCheck.ReceptionDate), 'dd/MM/yyyy HH:mm')# </td>" +
          "<td> #=RepairCheck.MaterialStatus# </td>" +
          "<td> #=RepairCheck.MaterialSite# </td>" +
          "<td> #=RepairCheck.MaterialLocalisation# </td>" +
          "</tr>"
      )
      )

 

Here is how the date is displayed : https://s10.postimg.org/4pqal9i61/date_Format.png

 

I tried to comment the js code that load the settings. If I do so, the format if the date is correct.
Can you help me ?

 

Thank you in advance.

I think that declaration file (kendo.all.d.ts) is missing declaration, where second parameter for append method is not required (based on this example).

I think that this is the way, how can I add menu item if there are no items yet in the menu?

I would like to limit the text inside my kendo scheduler month view as it is affecting other text elements inside the date box.

Please refer the screen shot.

I tried to use the below code of my event-template that identifies if the text length is greater that 10 then print "NA" which I'm not suppoed to do.Instead I would like to trim the word and display in the date box..

 

<span class="bold"> #: kendo.toString(title.length>10 && title.slice(0,10) || title) # </span>   //not working