We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using DropDownList at Grid at DialogTemplate edit mode

Hi Syncfusion,

I have some troubles. I try to use your greate Grid in DialogTemplate edit mode. At this mode I want to use dropdownlist. 
I found some solution how to do that:
https://www.syncfusion.com/forums/123570/cascade-populate-dropdown-on-add-edit-mode-with-dialog-template

I try to implement it in my project. At result I get DropDownList at my template. 
But when I select one of the item at DropDownList, other items are losing. 

Could you help me with this. Maybe I do something wrong,
Here test code. To unsderstand whats wrong, just add new record and select at dropdown list some item. Then try to select another. You can't do this cause other items was removed after selection:

@{
  var testChoiceList = new List<object>
  {
    new { value = 1, text = "One" },
    new { value = 2, text = "Two" },
    new { value = 3, text = "Three" },
  };

  var jsonTestChoiceList = JsonConvert.SerializeObject(testChoiceList);

  var testGridData = new List<object>
  {
    new { Id = 1, Name = "Lorem" , PriceId = 2 },
    new { Id = 2, Name = "Ipsum" , PriceId = 1 },
    new { Id = 2, Name = "Something else" , PriceId = 3 },
  };
}

<script type="text/template" id="testTemplate">

  <div class="panel panel-default">
    <div class="panel-body">

      <input id="Name" name="Name" value="{{:Name}}" class="e-field e-ejinputtext valid"
              style="text-align: right; width: 260px; height: 28px" />

      <input type="text" id="PriceId" name="PriceId" />
    </div>
  </div>

</script>

<script type="text/javascript">
  function TestGridComplete(args) {
    if (args.requestType == "beginedit" || args.requestType == "add") {

      var sellers = JSON.parse('@Html.Raw(jsonTestChoiceList)');

      var selectedValue = args.row != null
        ? args.row.children().eq(2).text()// 15 is a seller column number.
        : null;

      var sellerCombo = $('#PriceId')
        .ejDropDownList({
          dataSource: sellers,
          fields: { value: "value", text: "text" },
          cascadeTo: 'PriceId',
          width: "100%",
        })
        .data("ejDropDownList");
      if (sellerCombo != null && selectedValue != null) {
        sellerCombo.selectItemByValue(selectedValue);
      }
    }
  }
</script>

@(Html.EJ().Grid<object>("TestGrid")
      .Datasource(ds => ds.Json(testGridData)
      .UpdateURL("/FakeUpdate")
      .RemoveURL("/FakeDelete")
      .InsertURL("/FakeInsert")
      .Adaptor(AdaptorType.RemoteSaveAdaptor))
      .AllowSorting() /*Sorting Enabled*/
      .EditSettings(edit =>
      {
        edit.AllowAdding()
          .AllowDeleting()
          .AllowEditing()
          .EditMode(EditMode.DialogTemplate)
          .DialogEditorTemplateID("#testTemplate");
      })
      .ToolbarSettings(toolbar =>
      {
        toolbar.ShowToolbar().ToolbarItems(items =>
        {
          items.AddTool(ToolBarItems.Add);
          items.AddTool(ToolBarItems.Edit);
          items.AddTool(ToolBarItems.Delete);
          items.AddTool(ToolBarItems.Update);
          items.AddTool(ToolBarItems.Cancel);
        });
      })
      .Columns(col =>
      {
        col.Field("Id").HeaderText("").IsIdentity(true).IsPrimaryKey(true).Visible(true).Width(75).Add();
        col.Field("Name").HeaderText("Name").Width(80).Visible(true).Add();
        col.Field("PriceId").HeaderText("Price Type").Visible(true).Width(80).Add();
      })
      .ClientSideEvents(eve => { eve.ActionComplete("TestGridComplete"); }))



4 Replies

EG egor August 3, 2016 02:04 PM UTC

Screen shots for this issue in attachments.

Attachment: ScreenShots_706e3ba7.zip


KC Kasithangam C Syncfusion Team August 4, 2016 10:37 AM UTC

Hi Egor,   
 
Thanks for contacting Syncfusion support.   
 
The cause of the issue “when I select one of the item at DropDownList, other items are losing” is that you have mentioned the dropdownlist “cascadeTo” property is same control id(PriceId). If you need to filter the data in 2nd dropdownlist based on the 1st dropdownlist, then you need to specify the 2nddropdownlist control id in the cascadeTo property as shown below code:   
<code> 
var sellerCombo = $('#PriceId') 
        .ejDropDownList({ 
          dataSource: sellers, 
          fields: { value: "value", text: "text" }, 
          cascadeTo: 'BuyerPriceId', 
          width: "100%", 
        }) 
        .data("ejDropDownList"); 
</code> 
We have showcased cascading dropdownlist functionality in the below UG link:   
 
Also, we have showcased this in our online demo link. Please find the link for the same: 
As per your code, if you use single dropdownlist, then it’s not necessary to specify the “cascadeTo” property in the dropdownlist.   
 
We have prepared a sample grid with cascade dropdownlist. Please find the sample from the following location.  
 
Sample: Sample 
Regards,
Kasithangam 



EG egor August 4, 2016 08:22 PM UTC

Yes you are right! Thenk you for your help. 
Now I follow your suggestion and get perfect result.

Thenk you for your hard job!

Best regards,
Egor.


KC Kasithangam C Syncfusion Team August 5, 2016 04:07 AM UTC

Hi Egor,  
Thanks for your update. We are happy that the provided suggestion helped you. 
Please let us know if you have further query. 
Regards, 
Kasithangam 
  


Loader.
Live Chat Icon For mobile
Up arrow icon