Change a column editor based upon another column

[Stefan]

Hi,

I'm experimenting with the following grid and want to know if its possible to change the editor assosiated with the UserInputString column when the Field column value changes.

 

That is the Field column consists of a drop down list for example containing "Job Number", "Client", "Product" and other items. When the user selects, for example, Job Number the UserInputString editor is to be a TextBox. If Product is selected, the input will be a product auto complete text box, if 'Is Invoiced' is selected it will be a check box etc.

 

Is this possbile?

 

 

 @(Html.Kendo().Grid<S3Web.Models.AdvancedSearchModel>()
        .Name("grid")
        .Columns(columns =>
        {
          columns.Bound(p => p.AndOrString);
          columns.Bound(p => p.StartBracketString);
          columns.Bound(p => p.Field).Width(180);
          columns.Bound(p => p.OperatorString);
          columns.Bound(p => p.UserInputString);
          columns.Bound(p => p.EndBrackerString);
          columns.Command(command => command.Destroy()).Width(150);
        })
          .ToolBar(toolBar =>
          {
            toolBar.Create();
            toolBar.Save();
          })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .PageSize(20)
            .Read(read => read.Action("AdvancedSearch_Read", "Jobs"))
            .Create(create => create.Action("AdvancedSearch_Create", "Jobs"))
            .Update(update => update.Action("AdvancedSearch_Update", "Jobs"))
            .Model(model =>
            {
              model.Id(p => p.Field);
            })
        )
  )

 

[Preslav]

Hi Stefan,

I believe the desired behavior is achievable by implementing some JavaScript. For example, what I could suggest is handling the edit event. In the event handler, based on the column field and the e.model, append a regular HTML input with the k-textbox class or checkbox. Focus this input(to prevent the closing of the cell), and remove the previous editor input. After that, use the kendo.bind method to bind the new input to the model.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit
• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/fields/columns
• https://api.jquery.com/append/
• https://api.jquery.com/focus/
• https://api.jquery.com/remove/
• https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/bind

For example, I used the "Grid / ForeignKey column" as a base:

• https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
  

Now, the code looks like:

 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(200);
        columns.Bound(p => p.UnitPrice).Width(200);
        columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable()
    .Groupable()
    .Pageable()
    .Scrollable()
    .Events(e=>e.Edit("onEdit"))
    .HtmlAttributes(new { style = "height:540px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.CategoryID).DefaultValue(1);
        })
        .Read(read => read.Action("ForeignKeyColumn_Read", "Grid"))
        .Update(update => update.Action("ForeignKeyColumn_Update", "Grid"))
        .Create(create => create.Action("ForeignKeyColumn_Create", "Grid"))
        .Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Grid"))
    )
)

<script type="text/javascript">
    function errorHandler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
    function onEdit(e) {
        var field = e.sender.columns[e.container.index()].field;

        if (field === "CategoryID") {
            if (e.model.ProductName === "Chai") {
                var input = $("<input data-val='true' autocomplete='off' name='CategoryID' id='CategoryID' data-bind='value: CategoryID' class='k-textbox' />");

                e.container.append(input);
                input.focus();

                $("span.k-widget.k-dropdown").remove();
                kendo.bind(e.container, e.model);
            }
        }
    };
</script>

I hope this helps.


Regards,
Preslav
Progress Telerik

[Stefan]

Hi,

Thanks for that, seems to mostly work. The only thing I changed was the part where it removes the old input editor. See below. I still need more testing, especially with the auto complete part, but so far so good :-)

 

   function onEdit(e) {
      var field = e.sender.columns[e.container.index()].field;

      if (field === "UserInputString") {
        var input = "";
        if (e.model.Field === "Job Number") {
          input = $("<input data-val='true' autocomplete='off' name='UserInputString' id='UserInputString' data-bind='value:UserInputString' class='k-textbox' />");
        } else {
          input = $("<input type='checkbox' name='UserInputString' id='UserInputString' data-bind='checked:UserInputString' />");
        }

        var temp = $("#UserInputString");
        e.container.append(input);
        input.focus();

        temp.remove();
        kendo.bind(e.container, e.model);

      }

[Preslav]

Hi Stefan,

I am glad to hear that my suggestion helped. Do not hesitate to write back if I can assist with any further information.


Regards,
Preslav
Progress Telerik