I want to show/hide some columns on Kendo Grid and customize export to the excel.

Export conditions:

• use grid filter selection
• use grid seletected items
• show/hide columns programaticaly

Is it possible to combine?

Is posible to export programaticaly only 5000 rows?

For export I use:

Customize excel code:

Hi Team,

Two things iam facing problem , when i have use hierarchical kendo grid.

1. How do i search grid data when i have hierarchical kendo grid. (search option in toolbox)

2. How do i place checkbox in innermost child grid ?  ex : in my case it will be grid containing ReleaseID as attached in diagram.

Help in this will be highly helpful.

 Attached is the screenshot. 

Please suggest.

hello everyone , im just start learning with mvc 2 weeks ago, and decide to using telerik, and now i have some problem while using client detail template , after im running the code the data wont show up. please help. ( see my attachment ) , and i've attach my model if necessary

my controller :

View :

I want to use inline server editing grid.  But the grid does not load any data.  Can't figure out what is missing.

Here is the code:

Index.cshtml page

@using Kendo.Mvc.UI

@using (Html.BeginForm("AddUser", "Contact"))
{
      @Html.AntiForgeryToken()
     <fieldset>
           <legend>Add User</legend>
           Please enter minimum 3 letters to search.
              <div>
@(Html.Kendo().ComboBox()
.Name("NewUser")
.DataTextField("DisplayName")
.DataValueField("Snumber")
.Filter(FilterType.StartsWith)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Search", "Contact");
}).ServerFiltering(true);
})
)
<input type="submit" name="AddUser" value="AddUser" />
<div class="AddUserError">@TempData["AddUserError"]</div>
</div>
</fieldset>
}

@{
Html.Kendo().Grid<CCC.ITSChangeControl.Models.ViewModels.GridContactViewModel>().Name("grid").Columns(columns =>
{
        columns.Bound(contact => contact.FullName);
columns.Bound(contact => contact.Admin);
columns.Bound(contact => contact.Approver);
columns.Bound(contact => contact.Active);
columns.Bound(contact => contact.Id).Visible(false);
columns.Bound(contact => contact.Snumber).Visible(false);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(250);
})            
}

Hello,

Hello, I have to pass a string parameter (in particular the field name) to the function of the additional parameters. One such thing, see autocompleteAdditionalData:

@(Html.Kendo().AutoComplete()
                            .Name("L1CFOR")
                            .HtmlAttributes(new { @class = "form-control mb-2 mr-sm-2 mb-sm-0", placeholder = "L1CFOR", style = "max-width: 120px;" })
                            .MinLength(3)
                            .DataTextField("WKCELE")
                            .Filter("contains")
                            .Template("<span>${data.WKXTAB} ${data.WKCELE} ${data.WKDESE}</span>")
                            .AutoWidth(true)
                            .DataSource(source =>
                             {
                                 source.Read(read =>
                                 {
                                     read.Action("AutoComplete", "Zoom")
                                        .Data("autocompleteAdditionalData('L1CFOR')");
                                 })
                                .ServerFiltering(true);
                             })
                            .Events(e =>
                                {
                                    e.Select("autocompleteSelect");
                                })
                        )

How can I do. thank you.

Best regards.

M

I'm trying to add a onClick JS function to a certain column in the child grid, but so far with no luck.

This is my column:

columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('#=oper_numero#')\" href='\\#'>#=oper_numero#</a>");

I achieved the desired functionality with both a non hiearchy grid and the parent grid.

I've read that I have to escape the the # symbol in the child grid, but I've tried every combination and still doesn't work. This for example doesn't work:

columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('#=oper_numero#')\" href='\\#'>\\#'=oper_numero\\#'</a>");
columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('\\#'=oper_numero\\#'')\" href='\\#'>#=oper_numero#</a>");
columns.Bound(o => o.oper_numero).Width(110).ClientTemplate("<a onclick=\"showDetails('\\#'=oper_numero\\#'')\" href='\\#'>\\#=oper_numero\\#</a>");

I'd like to know what I'm doing wrong.

Thanks a lot

I have a grid with incell editing. Everything works fine, the incell editing has a dropdown list. 

My problem is that once the row (cell) has been updated, it goes to the bottom of the grid. Any idea what might be causing that?

Hello,

In my view there is a kendotreeview and  kendo tab inside which i have Kendo splitter with 2 panes each. Pane 1 and pane4 load partial view when a node in Kendo treeview selected depending on what is selected on node. On main view i have 2 save button. Button1 Contents of form inside pane1(formid: frmObjdetails) in splitterchild and other button to save Content from pane 4 form inside splitterchild1(formid:frmDoc). If i have only pane 1 form loaded then clicking Button1 submits the data perfectly. But when i have both forms loaded then clicking on Button 1 post pane 4 form data and not pane 1 form data. though both forms have specific id

Here are my codes

  @helper ObjectDetailContentTemplate()
{
         @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .SelectedIndex(0)
          .Animation(animation =>
              animation.Open(effect =>
                  effect.Fade(FadeDirection.In)))
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("ObjektDetail")
                  .Selected(true)
                  .Content(@<text>
         @ObjectDetailContentSplitterTemplate()
          </text>);
              tabstrip.Add().Text("Objekt-Aktivitat")
                  .Content(@<text>
               @ObjectActivityContentSplitterTemplate()
                  </text>);
          })
            )
    }   
 @helper ObjectDetailContentSplitterTemplate()
{
    @(Html.Kendo().Splitter()
      .Name("splitterchild")
      .HtmlAttributes(new { style = "height: 800px;" })
      .Orientation(SplitterOrientation.Vertical)
      .Panes(panes =>
      {
          panes.Add()
              .Scrollable(false)
               .Size("290px")
              .HtmlAttributes(new { id = "pane1" })
              .Collapsible(false)
               .LoadContentFrom("Index", "ObjectDetail", new { id = ViewBag.SelectedObjectID });
          panes.Add()
              .Scrollable(false)
              .HtmlAttributes(new { id = "pane2" })
              .Content(@<text>
                        @ObjectAddressGrid()
                        </text>);
      }))
   
}
  @helper ObjectActivityContentSplitterTemplate()
{
    @(Html.Kendo().Splitter()
      .Name("splitterchild1")
      .HtmlAttributes(new { style = "height: 100%;" })
      .Orientation(SplitterOrientation.Vertical)
      .Panes(panes =>
      {
          panes.Add()
               .Size("400px")
              .HtmlAttributes(new { id = "pane3" })
              .Collapsible(false)
                .Content(@<text>
                       @DocumentGrid()
                        </text>);
          panes.Add()
              .Size("200px")
              .HtmlAttributes(new { id = "pane4" })
              .Collapsible(false);
      }))
   
}

When treeview node is selected i call ajaxrequest for loading the partialviews with forms

 function onSelect(e) {             
        var nodeid = $("#treeview").getKendoTreeView().dataItem(e.node).id;
       
        var splitter = $("#splitterchild").data("kendoSplitter");
        var splitterch = $("#splitterchild1").data("kendoSplitter");
       
        splitter.ajaxRequest("#pane1",rootDir + "ObjectDetail/Index", { id: nodeid });
        splitterch.ajaxRequest("#pane4", rootDir + "Document/Index", { id: nodeid, DocumentID: nodeid });
}

here is partial view Content for pane1

@using (Html.BeginForm("SubmitObjectCollection", "ObjectDetail", FormMethod.Post, new { @name = "frmObjdetails", Id = "frmObjdetails" }))
{

}

here is partial view Content for pane4

@using (Html.BeginForm("SubmitFormCollection", "Document", FormMethod.Post, new { data_ajax = "false", @name = "frmDoc", id = "frmDoc" }))
{

}

In main view on button 1 click i do

var dataPost = $('#frmObjdetails').serialize();
$.ajax({
cache: false,
async: false,
url: "@Url.Action("SubmitObjectCollection", "ObjectDetail")",
type: 'POST',
data: dataPost,
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {

}
}
});

and button2 click

var dataPost = $('#frmDoc').serialize();
$.ajax({
cache: false,
async: false,
url: "@Url.Action("SubmitFormCollection", "Document")",
type: 'POST',
data: dataPost,
success: function (data) {
if (data.result == "Error") {
alert(data.message);
} else {
// alert(data);
}
}
});

But when both panes are loaded clicking button 1 submit frmDoc .

What is causing this Problem. How can i post correct form on respective button click

Thanks

Anamika