Kendo Autocomplete jQuery Steps Duplicate Query

[JMA]

Hi,

I am using the Kendo UI autocomplete control instead of a jQuery steps wizard:

http://www.jquery-steps.com/

Is this control compatible with the wizard? When searching for suggested answers, there are two calls to my database. When I remove the auto complete from the wizard, then it works fine. It would appear the wizard is rendering the control once, but the HTML to search for suggested answers twice. Here is how the control looks:

@{
       ViewBag.Title = "Add Rules";
   }

   @using ConnexForQuickBooks.Web.Models;
   @using ConnexForQuickBooks.Model;

   @model RuleSetViewModels

   <div class="content">
       <!-- Simple card -->

       <div class="card">
           <div class="card-header bg-white header-elements-inline">
               <h6 class="card-title">@ViewBag.Title</h6>
           </div>

           @using (Html.BeginForm("Index", "RuleSet", FormMethod.Post, new { @class = "wizard-form steps-basic-rules", id = "PairQBForm" }))
           {
               <h6>Give the rule a name.</h6>
               <fieldset>
                   <div class="row">
                       <div class="col-md-12">
                           <div class="form-group">
                               <label class="col-lg-3 control-label">Rule Name:</label>
                               <div class="col-lg-9">
                                   @Html.TextBoxFor(model => model.RuleSet.SetName, new { @class = "form-control" })
                               </div>
                           </div>
                       </div>
                   </div>
               </fieldset>

               <h6>Perform this action</h6>
               <fieldset>
                   <div class="row">
                       <div class="col-md-12">
                           <div class="form-group">
                               @Html.LabelFor(model => model.RuleSet.Action, "Action:", new { @class = "text-semibold" })
                               @Html.DropDownListFor(model => model.RuleSet.Action, Model.Actions, new { @class = "select-search" })
                           </div>
                       </div>
                   </div>
               </fieldset>

               <h6>If these conditions are met</h6>
               <fieldset>
                   <div class="row">
                       <div class="col-md-12">
                           @Html.Partial("~/Views/Shared/RulesTemplates/_RulesGrid.cshtml", Model)
                           <p> </p>
                       </div>
                   </div>
               </fieldset>

               <h6>Then map this value</h6>
               <fieldset>
                   <div class="row">
                       <div class="col-md-12">
                           <div class="form-group">
                               @Html.LabelFor(model => model.RuleSet.ActionValue, "Map To:", new { @class = "col-lg-3 control-label" })
                               <div class="col-lg-9">
                                   @(Html.Kendo().AutoCompleteFor(model => model.RuleSet.ActionValue)

                 .Filter("contains")
                 .MinLength(3)
                 .DataSource(source =>
                      {
                     source.Read(read =>
                     {
                         read.Action("XX", "XX")
                             .Data("onAdditionalData2");
                     })
                     .ServerFiltering(true);
                 })
                                   )

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

               <h6>Did the rule work? Let's find out.</h6>
               <fieldset>
                   <div class="row">
                       <div class="col-md-12">
                           <div class="form-group">
                               @Html.LabelFor(model => model.Connection, "Choose connection:", new { @class = "text-semibold" })
                               @Html.DropDownListFor(model => model.Connection, Model.Connections, new { @class = "select" })
                           </div>
                           <div class="form-group">
                               @Html.LabelFor(m => m.StringOrders, "Order Numbers:", new { @class = "text-semibold" })
                               @Html.TextBoxFor(model => model.StringOrders, new { @class = "form-control" })
                           </div>
                           <div class="text-left" style="padding-bottom: 10px;">
                               <button class="btn btn-primary" onclick="rebindRulesPreviewer()">Save and Preview Rule</button>
                           </div>

                           <div style="padding-bottom: 10px;">
                               @Html.Partial("~/Views/Shared/RulesTemplates/_RulesPreviewer.cshtml")
                           </div>

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

               @Html.HiddenFor(m => m.RuleSet.ID)
           }
       </div>
   </div>

   <script type="text/javascript">

       /** Rebinds the rules previewer grid, so it shows with the order number */
       function rebindRulesPreviewer() {
           $("#OrderPreviewerGrid").data("kendoGrid").dataSource.read();
           updateRuleSet();
       }

       /** When the user chooses an action, this method updates the rule in the database */
       function updateRuleSet() {
           $.post("/ruleset/updateruleset", { ruleSetId: $("#RuleSet_ID").val(), setName: $("#RuleSet_SetName").val(), action: $("#RuleSet_Action").val(), actionValue: $("#RuleSet_ActionValue").val() })
               .done(function (data) {
                   console.log("Data Loaded: " + data);
               })
       }

       function onAdditionalData2() {
           return {
               actionRule: $("#RuleSet_Action").val(),
               q: $('#ActionValue').val()
           };
       }
   </script>

[Ivan Danchev]

Hi,

We haven't tested our components along with the jQuery Steps plugin, so we cannot say with certainty that it is compatible with that third party plugin. If you face any issue with the AutoComplete, send use a runnable sample project that demonstrates the issue and we will investigate further what could be causing it.

Regards,
Ivan Danchev
Progress Telerik

[JMA]

 

 

    public ActionResult GetActionValueStep(int ruleSetId)
        {
            RuleSetViewModels model = new RuleSetViewModels();
            model.RuleSet.ID = ruleSetId;
            return PartialView("~/Views/Shared/EditorTemplates/_Rules_ActionValue.cshtml", model);
        }

 <h6>Then map this value</h6>
            <fieldset data-mode="async" data-url="@String.Format("/ruleset/getactionvaluestep?ruleSetId={0}", Model.RuleSet.ID)">
            </fieldset>

[JMA]

I added my code above. If the control is loaded async, then there are no errors. The wizard loads the control twice.

[Dimitar]

Hello,

From the provided information it seems that the initialization issue is as a result of how the jQuery Steps plugin is loading the content for each pane. Taking this into consideration, I would suggest to open a new issie in the jQuery Steps plugin repository:

• https://github.com/rstaib/jquery-steps/issues

Regards,
Dimitar
Progress Telerik