Git Product home page Git Product logo

Comments (7)

brendon avatar brendon commented on June 11, 2024

I should add that I have managed to just manually implement a set of range fields using text_field but just wondered if there's a more concise way.

from datagrid.

bogdan avatar bogdan commented on June 11, 2024

There are multiple ways.
If you are using builtin method datagrid_form_forpass input_options to filter definition:

class MyGrid
  filter(:age, :integer, input_options: {from: 18, to: 100})
end

If you are building your forms manually,, just pass option to datagrid_filter:

<%= f.datagrid_filter(:age, from: 18, to: 100) %>

from datagrid.

brendon avatar brendon commented on June 11, 2024

Sorry, looks like I didn't explain myself properly :D I'm wanting to set actual data- attributes on the HTML <input> tags. Something like data-datetime-target="fromInput" and data-datetime-target="toInput" so I can reference these things in my javascript stimulus controller.

Certainly I can do it manually by not using datagrid_filter, just wondering if it's possible to do it with that helper though :)

from datagrid.

bogdan avatar bogdan commented on June 11, 2024

I gave you two ways of doing that. What is the problem with them?

  filter(:created_at, :datetime, input_options: {:"data-datetime-target" => "fromInput"})

<%= f.datagrid_filter(:created_at, :"data-datetime-target" => "fromInput") %>

from datagrid.

brendon avatar brendon commented on June 11, 2024

I think the problem is that datagrid_filter for a range doesn't seem to allow one to set different attributes on the from and the to inputs. The same attributes get applied to both. I'm trying to achieve something like this:

<div data-controller="daterange">
  <input class="order_date date_filter from" multiple="multiple" value="2022-06-30" data-daterange-target="fromInput" type="text" name="identities_grid[order_date][]" id="identities_grid_order_date">
  <span class="separator">-</span>
  <input class="order_date date_filter to" multiple="multiple" value="2022-07-30" data-daterange-target="toInput" type="text" name="identities_grid[order_date][]" id="identities_grid_order_date">
</div>

No worries if it's not possible. I was just wanting to check :)

from datagrid.

bogdan avatar bogdan commented on June 11, 2024

Here is what you can do, run rake datagrid:copy_partials and modify app/views/datagrid/_range_filter.html.erb:

<%= form.text_field(filter.name, **from_options, **filter.options[:from_input_options]) %>
<span class="separator <%= filter.type %>"> - </span>
<%= form.text_field(filter.name, **to_options, **filter.options[:to_input_options]) %>

Now you can use those options in filter:

filter(
  :order_date, :date, range: true, 
  from_input_options: {:"data-daterange-target" => "fromInput"},
  to_input_options: {:"data-daterange-target" => "toInput"},
)

You can delete the rest of copied partials to make sure they are updated with new versions of datagrid.

from datagrid.

brendon avatar brendon commented on June 11, 2024

Thanks for that @bogdan, that makes sense to me :) Thanks for your help!

from datagrid.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.