This is a migrated thread and some comments may be shown as answers.

Change a column editor based upon another column

3 Answers 910 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 16 Jun 2018, 04:57 AM

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);
            })
        )
  )

 

3 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 19 Jun 2018, 06:29 PM
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.

For example, I used the "Grid / ForeignKey column" as a base:
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Stefan
Top achievements
Rank 1
answered on 21 Jun 2018, 10:58 AM

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);

      }

0
Preslav
Telerik team
answered on 21 Jun 2018, 01:14 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Stefan
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Stefan
Top achievements
Rank 1
Share this question
or