I have a grid with a custom command and a client-side function specified for the grid's DataBound event. In the DataBound function, I hide the custom command on rows where a particular column has a certain value. My code is successfully showing the custom button only on the appropriate rows when the grid is displayed. I've also specified a custom popup editor for the grid.
Skeleton of the grid code is:

@(Html.Kendo().Grid<Models.Task>()
            .Name("gridTask")
            .Columns(columns =>
                    {
                        columns.Bound(task => task.Name);
                        columns.Bound(task => task.TaskStatus);
                        columns.Command(cmd =>
                        {
                            cmd.Edit();
                            cmd.Custom("Show Survey").Click("ShowSurvey");
                        });
                    })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .ServerOperation(false)
                .Model(model => model.Id(m => m.Task_ID))
                .Read(read => read.Action("ReadTask", "TaskPartial"))
                .Update(update => update.Action("UpdateTask", "TaskPartial"))
                .Create(update => update.Action("CreateTask", "TaskPartial"))
            )
             .Events(e =>
             {
                 e.Cancel("EditCancel");
                 e.DataBound("TaskDataBound");
             })
            .Pageable()
            .Sortable()
            .Editable(ed => {
                ed.Mode(GridEditMode.PopUp);
                ed.TemplateName("TaskEditor");
                ed.Window(win => win.Title("Task Editor"));
            })
)

And the DataBound function is:

function TaskDataBound(e) {
        // Check the Show Survey button in each task row. Remove the button if the row has a certain value.
        $("[id^='gridTask'] tbody tr .k-grid-ShowSurvey").each(function () {
            var currentDataItem = $("[id^='gridTask']").data("kendoGrid").dataItem($(this).closest("tr"));
            //Check the current dataItem to see if the button should be removed
            if (currentDataItem.testValue == 0) {
                $(this).remove();
            }
        })
    }

Now suppose I click Edit on a row which does not show the custom button, and the edits I make do not effect the column determining the visibility of the custom button. When I click Update in the popup editor, the screen is updated as expected. The popup goes away, the updated data is shown, and the grid row still does not show the button.

However, when I click Cancel in the popup editor, the popup goes away but the custom command incorrectly reappears on the grid row, even though the column determining the visibility of the custom command hasn't changed. Why is the custom command mistakenly re-appearing? 

I've tried specifying a client-side function for the Cancel event as follows to remove the custom button upon the cancel. Even though I've traced the code to confirm my cancel function is called and the remove() command is hit and executed, the Custom button still comes back.

 function EditCancel(e) {
        // Check the Show Survey button in each task row. Remove the button if the row has a certain value.
        $("[id^='gridTask'] tbody tr").each(function () {
            var currentDataItem = $("[id^='gridtask']").data("kendoGrid").dataItem($(this));
            //Check the current dataItem to see if the button should be removed
            if (currentDataItem.testValue == 0) {

                $(this).find(".k-grid-ShowSurvey").remove();
            }
        })
    }

We want to customize the DataSource Export so that it will work against any datasource regardless of the number of columns.

In the example, the cells and columns are hard coded.  We want to modify the example to read the datasource and dynamically generated the bolded sections below.

See attached.

Any ideas would be appreciated.

HI

I found a problem about ASP.NET MVC Grid : 

After web page loaded, the grid is empty (AutoBind(false), so there have no any data),
Click any column header (will invoke column sorting) but read action invoked unexpectedly,
even if ServerOperation(false).

  @(Html.Kendo().Grid<HIS.Entity.Models.TYourModel1>()
    .Name("SelectionGrid")
    ... Sortable is true ...
    .AutoBind(false)
    .Pageable(pageable => pageable.Enabled(false))
    .Columns(columns =>
    {
      columns.Bound(column => column.xxxxx).Hidden();
    })
    .DataSource(dataSource =>
    {
      dataSource.Ajax()
        .Batch(true)
        .Model(model => model.Id(m => m.Key1))
        .PageSize(20)
        .ServerOperation(false)
        .Events(events =>
        {
          events.DefaultEvents();
        })
        .Read(read => read.Action("Selection_Read", "YourController").Data("filterSelectionGrid"));
    })
    .Events(events =>
    {
    })
    .HtmlAttributes(new { @style = "height: 85%; min-height: 180px" }))


Grid sorting ServerOperation(false) behavior not matched with description - 
'... If set to false ... paging, sorting, filtering ... will be performed client-side' : 

    // Summary:
    //     Sets the operation mode of the DataSource. By default the DataSource will make
    //     a request to the server when data for paging, sorting, filtering or grouping
    //     is needed. If set to false all data will be requested through single request.
    //     Any other paging, sorting, filtering or grouping will be performed client-side.
    //
    // Parameters:
    //   enabled:
    //     True(default) if server operation mode is enabled, otherwise false.
    public TDataSourceBuilder ServerOperation(bool enabled);


UI for ASP.NET MVC R2 2017 SP1
Visual Studio 2015 Enterprise

Best regards

Chris

Hi Team,

when i try to add new scaffolding item from my controller class, i could not able to see Kendo UI Template, i tried to click all the left hand side menu options, but no luck.

I tried this option with VS 2013,2015. but its not working .i am using telerik trial version

telerik.ui.for.aspnetmvc.2017.2.621.trial

watch this video : https://www.youtube.com/watch?v=Tmz_j2GrJBk and try the option from 6.48 time line

Thanks

Sundar

Hi,

im trying to export PDF from my kendo grid but im facing some issues with pdf export settings. 

Excel is working fine.

But PDF always exports only 1 visible page from the grid (and only few columns that fit to the page). I figured out that if i remove .PaperSize("A4") it is showing all data BUT its completely ignoring template and it renders grid to pdf with all buttons. 

Thanks 

Hi, I'm trying to create a custom popup editor for my grid, however, the drop downs are not being populated or at least won't open at all.  I'm stumped.  The controller method does get hit and I see 3 values but the drop downs down open.  When I first click on them I see a quick activity indicator appear but that's it.

Popup editor code

Controller code

I'm having issue for display listview template vertically.

<div class="mainsortable">
      
    @(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Product>()
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource =>
        {
            dataSource.Read(read => read.Action("ProductGrid_Read", "ListView"));
          
        })
       
    )

    @(Html.Kendo().Sortable()
        .For("#listView")
        .Ignore(".order")
        .Filter(">div.product")
        .Cursor("move")
        .PlaceholderHandler("placeholder")
        .HintHandler("hint")
    )

</div>

</div>

<script type="text/x-kendo-tmpl" id="template">

    <div class="product">
            <div class="panel panel-default">
                <div class="panel-heading">#=ProductID# #:ProductName#</div>
                <div class="panel-body">
                    <div class="partialsortable">

                        @(Html.Kendo().ListView<KendoUI_MVC.ViewModel.Order>()
                        .Name("OrderlistView_#=ProductID#")
                        .TagName("div")
                        .ClientTemplateId("ordertemplate")
                        .DataSource(dataSource =>
                        {
                            dataSource.Read(read => read.Action("Order_Read", "ListView", new { ProductID = "#=ProductID#" }));
                        })
                                 .ToClientTemplate()
                        )

                        @(Html.Kendo().Sortable()
                        .For("#OrderlistView_#=ProductID#")
                       .Filter(">div.order")
                        .Cursor("move")
                        .PlaceholderHandler("placeholder")
                        .HintHandler("hint")

                                 .ToClientTemplate()
                        )

                    </div>
                </div>
            </div>
        </div>

</script>

<script type="text/x-kendo-tmpl" id="ordertemplate">

    <div class="order">
        Unit Price : #:UnitPrice#<br />
        Quantity : #:Quantity#<br />
        Discount : #:Discount#
    </div>

</script>

<script>

    function placeholder(element) {
        return element.clone().addClass("placeholder");
    }

    function hint(element) {
        return element.clone().removeClass("k-state-selected");
    }
    
</script>

<style>
     .mainsortable {
        min-width: 1120px;
    }
    
     .order {
        margin: 10px;
        padding: 10px;
        border: 2px solid #000;
    }

    .panel{
        margin-left:10px;
        margin-right:10px;
        
    }

    .tabstrip{
        margin-bottom:10px;
    }

    .frame{
        padding:10px;
    }

    #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 400px;
        min-width:1120px;
    }

    .product {
        float: left;
        position: relative;
        width: 400px;
        min-height: 100px;
        cursor: default;
    }

    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

</style>

In css, #listView  min-width and max-width property does not working properly.

I'm try to set

 .mainsortable {
        width: 5000px;
    }

and

 #listView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 400px;
        width:5000px;
    }

seperately and it's working prperly.but its not expectable solution because can't adjust the width.

I attached following the screenshot of expected listview (Expected.png) and Issued listview (Issue.png).

Please give explanation for this issue.

Having some Grid formatting issues with a grid in a partial view, loaded via ajax function and pass it a parameter.    It appears that the grid is partially created and displayed to soon. I have attached 2 screenshot. to show what is going on. using bootstrap

Basically the process should be call the grid.  the loading.... dialog should be first, then the grid loaded when successfull with norecords shown inside of grid.  This is happening way out of order.  I am probably missing a process..

Main view:

Partial view