Is there a way to create a column template using Url.Action to create a similar function to the foreign key ability with MVC Grid? Ultimately I want the treelist to display the "DataText" field not the "DataValue" field.

columns.Add().Field(e => e.TimeFrameId).Template("@Url.Action("GetTimeFrame","Template", new {timeFrameId = #:TimeFrameId#})");

Thanks

I just created the following grid with kendo EditorTemplate

https://i.stack.imgur.com/f8RbA.png

this is the code snippet for this grid

This is working properly for View Objects and Add new Objects but for the Update scenario, it's not hit the backend method if update only the image file. if the Name property changes then it's hit backend.

https://i.stack.imgur.com/Z5IfK.png

 
this is my model

This is the Editor template

 

this is the script section in the above .cshtml file

even this setUpdateValues javascript method calls, if I change the Name model property value, but it's not even hit If I change only the photo.

This is my backend method

What did I miss here, even I tried to change this Logo value like this $("#Logo").val("TEST"), just thought this is because this model identifies as not changed, but the same result still not calling.

This is the Stackoverflow question

Hi there,

I am using a trial version to make sure it covers our project requirements. Will upgrade to full if this works.

I'm trying to display a dropdown for related data inline inside a grid. I've followed this link as closely as possible https://demos.telerik.com/aspnet-mvc/grid/editing-custom

But the ClientTemplate is not rendering the dropdown.

View:
@(Html.Kendo().Grid<GrindrodDataCapture.Models.RailConsignmentDetail>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.LoadedWeight);
          columns.Bound(c => c.GrossWeight);
          columns.Bound(c => c.TareWeight);
          columns.Bound(c => c.Tarps);
          columns.Bound(c => c.Status).ClientTemplate("=Status.Name#");
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
      .ToolBar(toolBar =>
      {
          toolBar.Create();
          toolBar.Save();
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Pageable()
      .Sortable()
      .Scrollable()

      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
          .Model(model =>
          {
              model.Id(rd => rd.ID);
              model.Field(rd => rd.ID).Editable(false);
              model.Field(rd => rd.Status).DefaultValue(ViewData["defaultStatus"] as GrindrodDataCapture.Models.ConsignmentDetailStatus);
          })
          .PageSize(20)
          .Read(read => read.Action("RailConsignmentDetails_Read", "RailDetailGrid", new { headerID = Request.Params["ConsignmentHeaderID"] }))
          .Create(create => create.Action("RailConsignmentDetails_Create", "RailDetailGrid"))
          .Update(update => update.Action("RailConsignmentDetails_Update", "RailDetailGrid"))
          .Destroy(destroy => destroy.Action("RailConsignmentDetails_Destroy", "RailDetailGrid"))
      )
)

Controller section:

 public class RailDetailGridController : Controller
    {
        private GrindrodContext db = new GrindrodContext();

        public ActionResult Manage(int ConsignmentHeaderID)
        {
            PopulateWagons();
            return View();
        }

 private void PopulateWagons()
        {
            ViewData["statuses"] = db.ConsignmentDetailStatuses;
            ViewData["defaultStatus"] = db.ConsignmentDetailStatuses.First();
        }

public ActionResult RailConsignmentDetails_Read([DataSourceRequest]DataSourceRequest request, int headerID)
        {

            IQueryable<RailConsignmentDetail> railconsignmentdetails = (from rd in db.RailConsignmentDetails
                                                                        where rd.RailConsignment.ID == headerID
                                                                        select rd).Include("Status");

            DataSourceResult result = railconsignmentdetails.ToDataSourceResult(request, railConsignmentDetail => new {
                ID = railConsignmentDetail.ID,
                LoadedWeight = railConsignmentDetail.LoadedWeight,
                GrossWeight = railConsignmentDetail.GrossWeight,
                TareWeight = railConsignmentDetail.TareWeight,
                Tarps = railConsignmentDetail.Tarps,
                Status = new ConsignmentDetailStatus ()
                {
                    ID = railConsignmentDetail.Status.ID,
                    Code = railConsignmentDetail.Status.Code,
                    Name = railConsignmentDetail.Status.Name,
                    NameLocal = railConsignmentDetail.Status.NameLocal,
                    Description = railConsignmentDetail.Status.Description,
                    IsOcean = railConsignmentDetail.Status.IsOcean,
                    IsRail = railConsignmentDetail.Status.IsRail,
                    IsRoad = railConsignmentDetail.Status.IsRoad

                }
            });

            return Json(result, JsonRequestBehavior.AllowGet);
        }

I have visual studio 2015 Enterprise Update 3.
When i installed Telerik R1 2017 on it i faced the error below :

Please see the attached for it's screenshot.
By Disabling extensions from Tools -> Extensions and Updates...error vanished.
What is going on & why Telerik has no solution for this?
==============================================
"In VisualStudio 2015 -> Tools -> Extensions and updates ->
Online: Search for the string: "Fix NuGet GetFullVsVersionString must be
called on the UI thread" and install the given fix."

I did it and found nothing.
Where is that extension to fix this issue?
Why did they remove it from marketplace?

I have a working server-bound grid. I'm trying to add a server-bound template column based on the following snippet from here.

The ".Template" method generates the error:

Error CS1061 'GridBoundColumnBuilder<MyModel>' does not contain a definition for 'Template' and no accessible extension method 'Template' accepting a first argument of type 'GridBoundColumnBuilder<MyModel>' could be found (are you missing a using directive or an assembly reference?)

These lines are in my _ViewImports.cshtml:

@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI

Using Telerik.UI.for.AspNet.Core 2020.3.915

https://demos.telerik.com/aspnet-mvc/grid/serverrowtemplate

I have not yet found a solution after looking at many links. Am I really missing a using?

(And for the record, the New Thread editor for these forums is shameful. The standard Windows undo/redo/selection do not work in Chrome and poor/lack of formatting options significantly limit what I'm trying to convey.)

Hi Team,

We are using Kendo ListBox in our application. This can have, say a list of countries. Once user types a letter, the first record with that letter should be selected (similar behaviour like in dropdowns). Please advise how this can be achieved.

Thanks,

Faraaz

I  am using a KendoUI treeview. The treeview contain 13 anchor tags . This anchor tags are basically questions. On clicking each Anchor tag, I am making a Ajax call and on Ajax success , I am returning a Partial View as html in the div tag.  The Partial view contains textarea and  KendoUI grid. 
The html is loaded correctly in the div tag with text area and grid .However the console is showing error "Uncaught ReferenceError: onDataBound is not defined"

How do I fix the error ? Should I use Deferred Initialization ?
https://docs.telerik.com/aspnet-mvc/getting-started/helper-basics/fundamentals?&_ga=2.185465772.48909972.1612825511-1665294203.1606507004#deferring-initialization

Also, when I try to test .Read,.Create,.Destroy, .Update, the code does not hit the controller. 

Should I move the javascript code for the KendoUI grid in the PartialView to the global javascript file ?How do I make the Kendo UI grid work in Partial View after Ajax success ? A project with example will be helpful?

Index.cshtml : (Displaying html)

  <div id="divQuestions">

   </div>

Ajax Call:

if (id != null) {
        $.ajax({
            type: "POST",
            url: Globals.BaseUrl + "Questions/SaveTocAndShowQuestions/?questionNo=" + tocquestionNo + "&displayNumber=" + tocdisplayNo + "&sectionId=" + SectionId + "&subSectionId=" + SubSectionId,
            dataType: "html",
            async: true,
            cache: false,
            data: serializedForm,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (result, textStatus, jqXHR) {
                // window.location.href = result;
               // console.log(result);

                if ($("#divQuestions").length) {
                    $('#divQuestions').html(result);
                                      
                        }
                                          
                    },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Error during process: \n' + ajaxOptions + "," + thrownError + "," + xhr.responseText);
            }

        });

Partial View Containing KendoUI Grid

<div id="pnReporterCommentsGrid">


    @(Html.Kendo().Grid<FYQuestionCommentsInfo>()
         .Name("ReporterCommentGrid")
       
          .Columns(columns =>
          {
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
              columns.Bound(m => m.RECORD_TYPE)
                      .Title("Record Type");
              columns.Bound(m => m.RECORDED_DATE).Format("{0:G}")
           .Title("Returned Date");
              columns.Bound(m => m.USERID)
             .Title("Returned By");
              columns.Bound(m => m.COMMENTS)
              .Title("Comments");

          })
        .ToolBar(toolbar => toolbar.Create().Text("Add New Item"))
        .Resizable(resize => resize.Columns(true))
          .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FYQuestionsCommentsInfo").Window(w => w.Title("Edit").Name("customedit").Width(1000)))
      //    .Events(e => e.Edit("HideGridFields"))
          .Events(e => e.DataBound("onDataBound"))
         .Pageable()
        .Sortable()
        .Scrollable()
         .DataSource(dataSource => dataSource
        .Ajax()

        //  .ServerOperation(false)
        .Events(events => events
        .Sync("RefreshReporterCommentGrid"))
        .Events(events => events.Error("error_handler"))

        .Model(model =>
        {
            model.Id(m => m.QuestionCommentsInfoId);
            model.Field(m => m.QuestionCommentsInfoId).Editable(false);
            model.Field(m => m.USERID).DefaultValue(Model.upacsUserViewModel.Username);
            model.Field(m => m.RECORDED_DATE).Editable(false);

        })
        .Read(read => read.Action("Bind_Reporter", "Questions").Data("sendAntiForgery"))
        .Create(update => update.Action("CreateReporterComments", "Questions").Data("sendAntiForgery"))
         .Destroy(d => d.Action("DestroyReporterComments", "Questions").Data("sendAntiForgery"))
         .Update(update => update.Action("UpdateReporterComments", "Questions").Data("sendAntiForgery"))

     )
    )
</div>

<script type="text/javascript">
        function HideGridFields(e) {

            HideControl("QuestionCommentsInfoId", e);
            HideControl("REGION", e);
            HideControl("STATE_CODE", e);
            HideControl("FiscalYear", e);
            HideControl("REPORT_ID", e);
            HideControl("SECTION_ID", e);
            HideControl("SUBSECTION_ID", e);
            HideControl("QUESTION_NUMBER", e);
            HideControl("QUESTION_PART_NUMBER", e);
            HideControl("DISPLAY_NUMBER", e);
            HideControl("RECORD_TYPE", e);
            HideControl("RECORDED_DATE", e);
            HideControl("QuestionDetailId", e);

        }
        function HideControl(fieldName, e) {
            var cont = $(e.container);
            HideFieldLabel(cont.find("label[for='" + fieldName + "']"));
            HideFieldField(cont.find("#" + fieldName));
        }

        function HideFieldLabel(control) {
            control.parent(".editor-label").hide();
        }

        function HideFieldField(control) {
            control.parent(".editor-field").hide();
        }


        function RefreshReporterCommentGrid() {
            var grid = $('#ReporterCommentGrid').data('kendoGrid');
            grid.dataSource.read();
        }

        function onDataBound(e) {
            var grid = $('#ReporterCommentGrid').data('kendoGrid');
            var gridData = grid.dataSource.view();

            for (var i = 0; i < gridData.length; i++) {
                var currentUid = gridData[i].uid;
                if (gridData[i].RECORDED_DATE != null) {
                    var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                    var editButton = $(currenRow).find(".k-grid-edit");
                    var deleteButton = $(currenRow).find(".k-grid-delete");
                    if (('@Model.upacsUserViewModel.HSIPUserType' == 'SuperReporter') || ('@Model.upacsUserViewModel.HSIPUserType' == 'Reporter'))
                    {
                        if ('@Model.FiscalYear' == '@Constants.Year')
                        {

                            if (gridData[i].RECORD_TYPE == 'Reporter Comments')
                            {
                                editButton.show();
                                deleteButton.show();
                            }
                            else if ((gridData[i].RECORD_TYPE == 'Reviewer Approve Comments') || (gridData[i].RECORD_TYPE == 'Reviewer Return Comments'))
                            {
                                editButton.hide();
                                deleteButton.hide();
                            }
                        }
                        else
                        {
                            editButton.hide();
                            deleteButton.hide();
                        }
                    }
                    else
                    {
                        editButton.hide();
                        deleteButton.hide();
                    }
                }
            }

        }

        function sendAntiForgery() {
            return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
        }


        function error_handler(e, status) {
            $('#ReporterCommentGrid').data('kendoGrid').cancelChanges();
            if (e.errors) {
                var message = "\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }

</script>

I  am using a KendoUI treeview. The treeview contain 13 anchor tags . This anchor tags are basically questions. On clicking each Anchor tag, I am making a Ajax call and on Ajax success , I am returning a Partial View as html in the div tag.  The Partial view contains KendoUI grid. 
When the partial view is rendered, it only displays an empty grid without data in it.

How do I get it to work in Partial View 

However the console is showing error "Uncaught ReferenceError: onDataEdit is not defined"

Index.cshtml : (Displaying html)
  <div id="divQuestions">

   </div>

Ajax Call:
if (id != null) {
        $.ajax({
            type: "POST",
            url: Globals.BaseUrl + "Questions/SaveTocAndShowQuestions/?questionNo=" + tocquestionNo + "&displayNumber=" + tocdisplayNo + "&sectionId=" + SectionId + "&subSectionId=" + SubSectionId,
            dataType: "html",
            async: true,
            cache: false,
            data: serializedForm,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (result, textStatus, jqXHR) {
                // window.location.href = result;
               // console.log(result);

                if ($("#divQuestions").length) {
                    $('#divQuestions').html(result);
                                      
                        }
                                          
                    },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Error during process: \n' + ajaxOptions + "," + thrownError + "," + xhr.responseText);
            }

        });

Partial View

<div id="pvRHCPGridQuestion7">

    <p><b>Input the number of crossings and program emphasis areas by crossing type.</b></p>

    @Html.AntiForgeryToken()

    @(Html.Kendo().Grid<HSIP.Domain.Grid7DomainModel>()
                  .Name("PerformanceGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(m => m.display_num).Hidden();
                      columns.Bound(m => m.FIXED_ROWS).Hidden();
                      columns.Bound(m => m.MAX_ROW_NUM).Hidden();
                      columns.Command(command => { command.Destroy(); }).Width("20%");
                      //columns.Command(command =>
                      //{
                      //    command.Custom("Delete").Click("onDataRemove").SendDataKeys(true);
                      //}).Width("20%");
                      columns.Bound(m => m.val_description).Title("Crossing Type").HtmlAttributes(new { style = "text-align: left;" }).HeaderHtmlAttributes(new { style = "text-align: center;" });
                      columns.Bound(m => m.col1).EditorTemplateName("IntegerBox").HtmlAttributes(new { style = "text-align: right;" })
                      .Title("Number of Crossings").HeaderHtmlAttributes(new { style = "text-align: center;" });

                  })
    .ToolBar(toolbar => {
        toolbar.Create().Text("Add New Item");
        toolbar.Save().CancelText("Undo");
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Resizable(resize => resize.Columns(true))
    .Events(events => events.Edit("onDataEdit").Save("onDataSave").SaveChanges("onSaveChanges"))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Events(events => events.Error("error_handler"))
    .Events(events => events.Sync("RefreshGrid"))
    .Model(model =>
    {
        model.Id(m => m.display_num);
        model.Field(m => m.display_num).Editable(false);
        model.Field(m => m.val_description).Editable(true);
        model.Field(m => m.col1).Editable(true);
        model.Field(m => m.FIXED_ROWS).Editable(false);
        model.Field(m => m.MAX_ROW_NUM).Editable(false);

    })
    .Sort(sort => sort.Add("display_num").Ascending())
    .Create(update => update.Action("Create_Q7_Batch", "Questions").Data("sendAntiForgery"))
    .Read(read => read.Action("Bind_Q7", "Questions").Data("sendAntiForgery"))
    .Update(update => update.Action("Update_Q7_Batch", "Questions").Data("sendAntiForgery"))
    .Destroy(d => d.Action("Destroy_Q7_Batch", "Questions").Data("sendAntiForgery"))
    )

    )

</div>

<script type="text/javascript">

function sendAntiForgery() {
        return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
    }
   
    function onDataRemove(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        if (confirm('Are you sure you want to clear the values?')) {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("CustomDelete_Q7", "Questions")',
                data: { display_num: dataItem.display_num },
                dataType: "text",
                traditional: true,
                async: false,
                success: function (s) {
                    if (s.ErrorDetails) {
                        alert(s.ErrorDetails);
                    } else {
                        $('#PerformanceGrid').data("kendoGrid").dataSource.read();
                    }
                },
                error: function (s) {
                    if (s.ErrorDetails) {
                        alert(s.ErrorDetails);
                    }
                }
            });
        }
    };

function onSaveChanges(e) {
        var errors = [];
        var dataSource = $('#PerformanceGrid').data("kendoGrid").dataSource;
        var rows = dataSource.data();
        for (var i = 0; i < rows.length; i++) {
            if (rows[i].dirty) {
                if ((rows[i].FIXED_ROWS == null || (rows[i].id != null && rows[i].id > rows[i].FIXED_ROWS)) && rows[i].val_description != null && rows[i].val_description.length > 100) {
                    alert("Maximum length for Performance Measure is 100!");
                    e.preventDefault();
                    return;
                }
            }
        }

        var validRows = 0;
        for (var i = 0; i < dataSource.data().length; i++) {
            if (rows[i].dirty) {
                if (isNaN(parseInt(rows[i].col1)) == false) {
                    validRows++;
                }
            }
            else {
                validRows++;
            }
        }
        if (validRows < dataSource.data().length) {
            e.preventDefault();
            alert('Please complete "NUMBER OF CROSSING" for all rows.');
        }
    }

    function onDataSave(e) {
    if (e.values.val_description) {
        if ((e.model.isNew() || e.model.id > e.model.FIXED_ROWS) && e.values.val_description.length > 100) {
            alert("Maximum length for Performance Measure is 100!");
        }
    }
    }

    function onDataEdit(e) {
        $(".field-validation-valid").empty();
         if (e.model.isNew()) {

        }
        else {
            if (e.model.id <= e.model.FIXED_ROWS) {
                e.container.find("input[name='val_description']").each(function () { $(this).attr("disabled", "disabled") });
            }
        }

         //$('#col1').kendoNumericTextBox({decimals:0, format: '#', min:0});
    }

    function RefreshGrid() {
        var grid = $('#PerformanceGrid').data('kendoGrid');
        grid.dataSource.read();
    }

    function error_handler(e, status) {
        $('#PerformanceGrid').data('kendoGrid').cancelChanges();
        if (e.errors) {
            var message = "\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

</script>